この記事では、ログイン認証コードを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: データベースのデフォルトパスを変更した後にmysqlが起動できない問題の解決策
>>: Windows 10 システムに mysql-8.0.13 (zip インストール) をインストールする詳細なチュートリアル
目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...
この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...
目次序文1. 文字列を分割する2. JSONのフォーマットと解析3. 複数行の文字列と埋め込み式4....
1. CSSスタイルは、テキストが長すぎる場合に省略記号を表示する問題を解決します1. 一般的なスタ...
この記事では、WeChatアプレットで星評価を実装するための具体的なコードを参考までに紹介します。具...
目次1. 効果図(複数列) 2. 通常セレクター: mode = selector、複数列セレクター...
序文:親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...
目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...
Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...
まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...
1. ネットワーク接続方法がブリッジされていることを確認する物理ネットワーク接続ステータスのコピーを...
システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...
この記事では、ダッシュボードの左右スクロール効果を実現するためのスワイパー+echartsの具体的な...
GtkTreeView コンポーネントは、美しい通常のリストやツリーのようなリストを作成できる高度な...
略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...