Springboot 検証コードの生成と検証機能を実装する方法

WBOY
リリース: 2023-05-17 12:15:22
転載
1523 人が閲覧しました

    1.easy-captcha ツールキット

    検証コードを生成するにはさまざまな方法がありますが、ここでは easy-captcha ツールキットを選択します。

    github の元のアドレスは次のとおりです: easy-captcha ツール キット

    このモジュールは、gif、中国語、算術、その他のタイプを含む Java グラフィカル検証コード サポートを提供し、次のようなプロジェクトに適しています。 Java Web と JavaSE。

    2 依存関係の追加

    まず、easy-captcha の依存関係構成ファイルを pom.xml ファイルに追加する必要があります。

    インポート依存関係ステートメントはオープンソース プロジェクトに記述されているので、それをコピーして貼り付けるだけです。

    Springboot 検証コードの生成と検証機能を実装する方法

       <dependency>
          <groupId>com.github.whvcse</groupId>
          <artifactId>easy-captcha</artifactId>
          <version>1.6.2</version>
       </dependency>
    ログイン後にコピー

    3. 検証コードの文字種

    Springboot 検証コードの生成と検証機能を実装する方法

    ##使用法:

    //生成验证码对象
    SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
    //设置验证码的字符类型
    captcha.setCharType(Captcha.TYPE_ONLY_NUMBER);
    ログイン後にコピー

    4. フォント設定

    Springboot 検証コードの生成と検証機能を実装する方法#組み込みフォントを使用したくない場合は、システム フォントを使用することもできます。使用方法は以下の通りです。

    //生成验证码对象
    SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
    
    // 设置内置字体
    captcha.setFont(Captcha.FONT_1); 
    
    // 设置系统字体
    captcha.setFont(new Font("楷体", Font.PLAIN, 28));
    ログイン後にコピー

    5 認証コード画像出力

    ここでは一般的な処理方法であるファイルストリームとして出力することができます。もちろん、base64 でエンコードされた画像を使用する Web プロジェクトもいくつかあります。 Easycaptcha は両方の方法をサポートしています。

    base64 エンコードの出力方法は次のとおりです:

    SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
    specCaptcha.toBase64();
    
    // 如果不想要base64的头部data:image/png;base64,
    specCaptcha.toBase64("");  // 加一个空的参数即可
    ログイン後にコピー

    ディスクへの出力方法は次のとおりです:

    FileOutputStream outputStream = new FileOutputStream(new File("C:/captcha.png"))
    SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 5);
    specCaptcha.out(outputStream);
    ログイン後にコピー

    このコードは画像を生成し、ディスク ディレクトリに保存します。ここでは、easy-captcha ツールに付属する out() メソッドを使用して出力できます。 Web プロジェクトを開発する場合、開発者は Response オブジェクトの出力ストリームを使用して検証コードを出力します。

    6. 検証コードの生成と表示

    6.1 バックエンド

    新しいメソッドを作成することで KaptchaController クラスを作成できますが、このメソッドはコントローラー パッケージ内に配置する必要があります。メソッド内で GifCaptcha を使用すると、PNG タイプの検証コード オブジェクトを生成し、表示用のピクチャ ストリームの形式でフロント エンドに出力できます。コードは次のとおりです。コントローラーの場合、このメソッドのインターセプト処理パスは /kaptcha です。フロントエンドのパスにアクセスすると、画像ストリームを受信して​​ブラウザページに表示できます。

    6.2 フロントエンド

    静的ディレクトリに新しい kaptcha.html ページを作成し、そのページに検証コードを表示します。コードは次のとおりです:

    @Controller
    public class KaptchaController {
        @GetMapping("/kaptcha")
        public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception{
            httpServletResponse.setHeader("Cache-Control","no-store");
            httpServletResponse.setHeader("Pragma","no-cache");
            httpServletResponse.setDateHeader("Expires",0);
            httpServletResponse.setContentType("image/gif");
    
            //生成验证码对象,三个参数分别是宽、高、位数
            SpecCaptcha captcha = new SpecCaptcha(130, 48, 5);
            //设置验证码的字符类型为数字和字母混合
            captcha.setCharType(Captcha.TYPE_DEFAULT);
            // 设置内置字体
            captcha.setCharType(Captcha.FONT_1);
            //验证码存入session
            httpServletRequest.getSession().setAttribute("verifyCode",captcha.text().toLowerCase());
            //输出图片流
            captcha.out(httpServletResponse.getOutputStream());
        }
    }
    ログイン後にコピー

    back-end/kaptcha Pathにアクセスして認証コード画像を取得し、imgタグ内に表示します。次に、img タグがクリックされたときに新しい検証コードを動的に切り替えて表示できる onclick 関数を作成します。クリック時にアクセスされるパスは ’/kaptcha?d=' new Date()*1 です。つまり、元の検証コード パスの後にタイムスタンプ パラメーター d が続きます。タイムスタンプが変更されるため、各クリックは前のリクエストとは異なるリクエストになります。これを行わないと、ブラウザのキャッシュ メカニズムにより、クリックして確認コードを更新してもリクエストが再送信されず、同じ確認コードの画像が一定期間表示されることになります。

    コーディングが完了したら、Spring Boot プロジェクトを開始します。正常に起動したら、ブラウザを開き、検証コード

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证码显示</title>
    </head>
    <body>
    <img  src="/kaptcha" onclick="this.src=&#39;/kaptcha?d=&#39;+new Date()*1" / alt="Springboot 検証コードの生成と検証機能を実装する方法" >
    </body>
    </html>
    ログイン後にコピー

    で表示されるテスト ページのアドレスを入力します。結果は次のとおりです。

    7 検証コードの入力verify

    Springboot 検証コードの生成と検証機能を実装する方法一般的なアプローチは、バックエンドが検証コードを生成した後に、現在生成されている検証コードの内容を保存することです。セッション オブジェクト、キャッシュ、またはデータベースに保存することを選択できます。次に、確認コードの画像を返し、フロントエンド ページに表示します。ユーザーが確認コードを認識したら、ページ上の対応する入力ボックスに確認コードを入力してバックエンドにリクエストを送信します。リクエストを受信した後、バックエンドはユーザーが入力した確認コードを検証します。ユーザーが入力した認証コードが以前に保存した認証コードと一致しない場合は、「認証コードエラー」メッセージが返され、以降の処理は続行されず、認証が成功した場合のみ以降の処理が続行されます。

    7.1 バックエンド

    KaptchaController クラスに新しい verify() メソッドを追加します。コードは次のとおりです:

    http://localhost:8080/kaptcha
    ログイン後にコピー

    ユーザーが入力した検証コード リクエスト パラメーターはコードです。 ,/verify このメソッドによってインターセプトおよび処理されたパス。基本的な空でない検証の後、セッションに以前に保存された verifyCode 値と比較します。2 つの文字列が等しくない場合は、「検証コード エラー」プロンプトが返されます。同じ場合は、「検証コード成功」が返されます。プロンプトが返されます。

    7.2 フロントエンド

    静的ディレクトリに新しい verify.html を作成します。このページには検証コードが表示され、ユーザーが検証コードを入力するための入力ボックスと送信ボタンも含まれています。コードは次のとおりです:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证码测试</title>
    </head>
    <body>
    <img  src="/kaptcha" onclick="this.src=&#39;/kaptcha?d=&#39;+new Date()*1" / alt="Springboot 検証コードの生成と検証機能を実装する方法" >
    <br>
    <input type="text" maxlength="5" id="code" placeholder="请输入验证码" />
    <button id="verify">验证</button>
    <br>
    <p id="verifyResult">
    </p>
    </body>
    <!--jqGrid依赖jQuery,因此需要先引入jquery.min.js文件,下方地址为字节跳动提供的cdn地址-->
    <script src="http://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
        //验证按钮的点击事件
            $(&#39;#verify&#39;).click(function () {
                var code = $(&#39;#code&#39;).val();
                $.ajax({
                    type: &#39;GET&#39;,//方法类型
                    url: &#39;/verify?code=&#39;+code,
                    success: function (result) {
                    //将验证结果显示在p标签中
                        $(&#39;#verifyResult&#39;).html(result);
                    },
                    error:function () {
                        alert(&#39;请求失败&#39;);
                    },
                });
            });
        });
    </script>
    </html>
    ログイン後にコピー

    在用户识别并呈现在页面上的验证码之后,他们可以在输入框中输入验证码并点击“验证”按钮。在JS代码中已经定义了“验证”按钮的点击事件,一旦点击,就会获取用户在输入框中输入的内容,并将其作为请求参数向后端发送请求,验证用户输入的验证码是否正确,后端在处理完成后会返回处理结果,拿到处理结果就显示在id为verifyResult的p标签中。

    Springboot 検証コードの生成と検証機能を実装する方法

    以上がSpringboot 検証コードの生成と検証機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル:
    ソース:yisu.com
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート