Springboot 検証コードの生成と検証機能を実装する方法-＆＃＆チュートリアル-php.cn

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 検証コードの生成と検証機能を実装する方法