vue+springbootでログイン認証コードを実現

vue+springbootでログイン認証コードを実現

この記事では、ログイン認証コードを実装するためのvue+springbootの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。

まずは効果画像をご覧ください

ログインページに検証コードHTMLを追加する

バックエンドの pom ファイルに kaptcha 依存関係を追加する

<依存関係>
     <groupId>com.github.penggle</groupId>
     <artifactId>キャプチャ</artifactId>
     <バージョン>2.3.2</バージョン>
</依存関係>

KaptchaConfigツールクラスを作成する

パッケージ com.brilliance.module.system.controller.util;
 
com.google.code.kaptcha.impl.DefaultKaptcha をインポートします。
com.google.code.kaptcha.util.Config をインポートします。
org.springframework.context.annotation.Bean をインポートします。
org.springframework.context.annotation.Configuration をインポートします。
 
java.util.Properties をインポートします。
 
@構成
パブリッククラスKaptchaConfig{
    @ビーン
    パブリックDefaultKaptcha getDefaultKaptcha() {
        デフォルトのKaptcha defaultKaptcha = 新しい DefaultKaptcha();
        プロパティ properties = new Properties();
        // 画像の幅 properties.setProperty("kaptcha.image.width", "180");
        // 画像の高さ properties.setProperty("kaptcha.image.height", "50");
        // 画像の境界線のプロパティ。setProperty("kaptcha.border", "yes");
        // 境界線の色 properties.setProperty("kaptcha.border.color", "105,179,90");
        // フォント色のプロパティ。setProperty("kaptcha.textproducer.font.color", "blue");
        // フォントサイズ properties.setProperty("kaptcha.textproducer.font.size", "40");
        //セッションキー
        properties.setProperty("kaptcha.session.key", "コード");
        // 検証コードの長さ properties.setProperty("kaptcha.textproducer.char.length", "4");
        // フォントのプロパティ。setProperty("kaptcha.textproducer.font.names", "Songti、Kaiti、Microsoft YaHei");
        設定 config = new Config(properties);
        defaultKaptcha.setConfig(config);
        defaultKaptcha を返します。
    }
}

コントローラーでは、生成された検証コードは後で検証するために redis に保存されます (redis の設定と依存関係は Baidu で確認できます)

@レストコントローラ
@RequestMapping("/api/user")
@Api(tags = "システムユーザー管理")
パブリッククラスSysUserControllerはAbstractControllerを拡張します{
 オートワイヤード
 プライベート SysUserService sysUserService;
 オートワイヤード
 プライベート DefaultKaptcha defaultKaptcha;
 
 オートワイヤード
 Redisテンプレート redisテンプレート;
 
 @GetMapping("/createImageCode")
 public void createImageCode(HttpServletRequest リクエスト、HttpServletResponse レスポンス) は IOException をスローします {
  response.setHeader("Cache-Control", "no-store, no-cache");
  レスポンス.setContentType("image/jpeg");
  // テキスト検証コードを生成します。String text = defaultKaptcha.createText();
  // 画像検証コードを生成 BufferedImage image = defaultKaptcha.createImage(text);
  // ここでは、redis を使用して検証コードの値をキャッシュし、有効期限を 60 秒に設定します。redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS);
  ServletOutputStream 出力 = response.getOutputStream();
  ImageIO.write(image, "jpg", out);
  出力をフラッシュします。
  out.close();
 }

生成後、認証コードが正しいかどうかを確認するために、ログイン インターフェイスで認証コードを検証する必要があります。

ログインボタンの外側のレイヤーにリクエスト判定を追加し、入力された認証コードが正しいかどうかを確認し、戻り値に基づいてエラーメッセージを表示します。

@PostMapping("/compareCode")
パブリック RESULT compareCode(@RequestBody String 検証コード) {
    if(!redisTemplate.hasKey("imageCode")) {
  return RESULT.error(500,"認証コードの有効期限が切れています");
 }
 文字列コード = redisTemplate.opsForValue().get("imageCode").toString();
 if(StringUtils.equals(検証コード、コード)) {
  RESULT.ok() を返します。
 } それ以外 {
  RESULT.error(500,"認証コードの入力が正しくありません");を返します。
 }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 検証コードログインメソッドのVue実装例
  • Vueはログイン時にグラフィック検証コードを実装します
  • Vue は携帯電話の認証コードによるログインを実装します
  • vueを使用して登録ページの効果を実現し、vueを使用してSMS認証コードログインを実現します
  • Vueはログイン認証コードを実装する
  • Vue はグラフィック検証コードログインを実装します
  • Vueはログイン時に画像認証コードを実装します
  • Vue は携帯電話番号と確認コードによるログインを実装します (60 秒のカウントダウンは無効)
  • Vueはログインインターフェースの検証コード機能を実装します
  • vue+Element はログイン用のランダム検証コードを実装します

<<:  データベースのデフォルトパスを変更した後にmysqlが起動できない問題の解決策

>>:  Windows 10 システムに mysql-8.0.13 (zip インストール) をインストールする詳細なチュートリアル

推薦する

Vue3 を使用して虫眼鏡効果を実現する方法の例

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

JavaScript 文字列操作の 4 つの実用的なヒント

目次序文1. 文字列を分割する2. JSONのフォーマットと解析3. 複数行の文字列と埋め込み式4....

CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します

1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...

WeChatミニプログラムが星評価を実装

この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...

WeChat アプレット ピッカー マルチ列セレクター (モード = multiSelector)

目次1. 効果図(複数列) 2. 通常セレクター: mode = selector、複数列セレクター...

Vue3 における provide と inject の使用法と原則

序文:親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...

Vue3はフロントエンドのログを出力するためにaxiosインターセプターを使用する

目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

VMware 仮想マシンでの Centos8 ブリッジの静的 IP 設定方法

1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...

VMware Workstation のインストール Linux (Ubuntu) システム

システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...

Swiper+echartsは複数のダッシュボードの左右スクロール効果を実現します

この記事では、ダッシュボードの左右スクロール効果を実現するためのスワイパー+echartsの具体的な...

GTK ツリービューの原理と使用法の分析

GtkTreeView コンポーネントは、美しい通常のリストやツリーのようなリストを作成できる高度な...

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...