kaptcha プラグインに基づく認証コード機能の実現 (超シンプル、超使いやすい)

kaptcha の依存関係をプロジェクトにインポートする

Maven プロジェクトフォーム: Kaptcha の依存関係をインポートする

<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>

通常の瓶の形:

web.xml で関連する構成を構成します (KaptchaServlet は本質的にサーブセットです)。

    <servlet> 
        <servlet-name>KaptchaServlet</servlet-name> 
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> 
<!-- 確認コードのサイズを設定 --> 
<! -- <init-param>--> 
<!-- <param-name>kaptcha.textproducer.font.size</param-name>--> 
<!-- <param-value>28</param-value >--> 
<!-- </init-param>--> 
<!-- 干渉線なしで検証コードを設定 --> 
        <init-param> 
            <param-name>kaptcha.noise.impl</param-name > 
            <param-value>com.google.code.kaptcha.impl.NoNoise</param-value> 
        </init-param> 
    </servlet> 
    <servlet-mapping> 
        <servlet-name>KaptchaServlet</servlet-name>
<!-- /kaptcha これはフロントエンド アクセスのパスを表します。このパスにアクセスすると、画像の形で確認コードに応答します --> <url-pattern>/
        <url-pattern>/kaptcha</url-pattern> 
    </servlet-mapping>

プラグインを使用して登録機能を完了します

フロントエンドコードを書く
確認コードの画像を取得する
フロントエンドユーザーによって書き込まれた検証コードとバックエンド検証コードを比較して検証します。

フロントエンド登録インターフェイスを記述します (コードの下):

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>タイトル</title> 
</head> 
<body> 
<form action="http:// localhost:8080/ssm_book/kaptcha" method="post"style="border: 1px solid cornflowerblue;width: 500px"> 
    <div class="form-item"> 
        <div> 
            <label>用户名称:</label> 
            <input type="text" placeholder="请输入用户名" id="username" name="uname" > </div> </div> 

        < 
    div 
    class="form-item"> 
        <div>
            <label>ユーザーパスワード:</label> 
            <input type="password" placeholder="パスワードを入力してください" name="pwd" id="pwdTxt"> 
        </div> 
    </div>
    <div class="form-item"> 
        <div> 
            <label>パスワードの確認:</label> 
            <input type="password" placeholder="パスワードの確認を入力してください" id="pwdTxt2"> 
        </div> 
    </ div> 
    <div class="form-item"> 
        <div> 
            <label>ユーザーのメール:</label> 
            <input type="text" placeholder="メールを入力してください" name="email" id="emailTxt"> 
        </div> 
    </div> 
    <div class="form-item"> 
        <div> 

            <div class="verify">
                検証コード: <input type="
                text" placeholder="確認コードを入力してください" name="code"> <img src="http://localhost:8080/ssm_book/kaptcha" alt="" style="width: 90px ;height: 35px" id = "vetifyImg">
            </div> 
        </div>  
    </div> 
    <button class="btn">登録</button>
</form> 

</body> 
</html>

効果画像: この時点で、生成された検証コードを取得できます

次のステップは、バックエンドサーバーの kaptcha クラスによってセッションドメインに保存された確認コードを受け取ることです。

説明: kaptcha プラグインが検証コードの画像を生成すると、検証コード情報もセッションドメインに保存されます。

バックエンドで検証します。
比較すると、確認コードは同じです。クライアントには、セッションドメインに保存されている kaptcha と同じものが表示されます

こうして認証コード機能が実現！! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

最後に: わからない場合は、メッセージを残してください。お答えします。カプチャの瓶が必要な場合は、私のホームページで入手できます。

キャプチャ属性の概要

kaptcha.producer.impl 画像実装クラス com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl テキスト実装クラス com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string テキストコレクション、キャプチャ値はこのコレクションから取得されます abcde2345678gfynmnpwx
kaptcha.textproducer.char.length キャプチャの長さ 5
kaptcha.textproducer.font.names フォント Arial, Courier
kaptcha.textproducer.font.size フォントサイズ 40px.
kaptcha.textproducer.font.color フォントの色 ,有効な値: r、g、b または white、black、blue.black
kaptcha.textproducer.char.space テキストスペース 2
kaptcha.noise.impl 干渉実装クラス com.google.code.kaptcha.impl.DefaultNoise
kaptcha.noise.color干渉色、有効な値: r、g、b または白、黒、青. 黒
kaptcha.obscurificator.impl 画像スタイル:
waterripple com.google.code.kaptcha.impl.WaterRipple
フィッシュアイ com.google.code.kaptcha.impl.FishEyeGimpy
シャドウ com.google.code.kaptcha.impl.ShadowGimpy com.google.code.kaptcha.impl.WaterRipple
kaptcha .background .impl 背景実装クラス com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from 背景色グラデーション、開始色ライトグレー
kaptcha.background.clear.to 背景色グラデーション、終了色白
kaptcha.word .implテキストレンダラー com.google.code.kaptcha.text.impl.DefaultWordRenderer
kaptcha.session.key セッションキー KAPTCHA_SESSION_KEY
kaptcha.session.da`te セッション日付 KAPTCHA_SESSION_DATE
元のリンク: https://blog.csdn.net /qq_42308456/記事/詳細/109766092

kaptcha プラグインに基づく認証コード機能の実現 (超シンプル、超使いやすい)

kaptcha の依存関係をプロジェクトにインポートする

web.xml で関連する構成を構成します (KaptchaServlet は本質的にサーブセットです)。

プラグインを使用して登録機能を完了します

おすすめ