SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc

GoogleのreCAPTCHA V2をでロボットによる投稿を防ぐ STS3 +Spring Boot +thymeleaf

今回は、Googleの「reCAPTCHA」を使います。 

なお、STS3(3.9.6)+SpringBoot2.0+tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

 

Captcha

 

Captchaは、WEBサイトのコメントシステムや問い合わせフォームに対して、ロボットを利用したスパム投稿を防ぐ手段です。 

従来は難読文字・数字を表示した画像を読み取って人間が入力する方法でしたが、それをより洗練したインタフェースに改良されたのが、Googleの「reCAPTCHA」です。


動作イメージを確認

 

初期表示時のイメージです。この時点では「実行」ボタンはdhisabledになっているため、押せません。上の「私はロボットではありません」と表示している部分が「reCAPTCHA」です。

f:id:arakan_no_boku:20170408213011j:plain

ここで、「reCAPTCHA」の左側のチェックボックスをクリックします。そうすると、認証が行われ、「私はロボットではありません」と表示されて、実行ボタンが押せるようになります。

f:id:arakan_no_boku:20170408213239j:plain

スマートですね。

 

reCAPTHAを使うための準備

 

Google Developersの「reCAPTHA」のサイトを開きます。

f:id:arakan_no_boku:20170408213911j:plain

そして、「GET STARTED」をクリックします。

 

f:id:arakan_no_boku:20170408214005j:plain

右側の文書の赤枠で囲ったあたりの「 sign up for an API key pair」と書かれている部分をクリックします。 

そうすると、登録画面がでてきます。

f:id:arakan_no_boku:20170408214723j:plain

以下のような感じで入力して認証するためのキーを生成・登録します。

f:id:arakan_no_boku:20170408214904j:plain

 

ポイントです。

  • 「reCAPTCHA V2」を選択する。
  • Domainsには、とりあえず「localhost」を入力する。

localhostを入力しておかないと、ローカルサーバーでの動作確認時にreCAPTCHAが動いてくれません。 

もし、本番運用でも使いたい場合は、本番用のドメインもあわせて入力してくださいね。 

入力できたら、registerボタンを押してください。 

エラーがなければ、以下のようにキーが発番されて表示されます。 

この画面をとりあえず、お気に入りに登録しておきましょう。

f:id:arakan_no_boku:20170408220113j:plain

 

登録ができたら、HTMLに組み込んでいきます

 

今回は、JAVAクラスはさわりません。 

HTMLとJAVASCRIPTだけで実現できます。 

まず、「実行」ボタンを配置します。 

初期表示時はDisabledにしておきます。 

jQueryで使えるように、id="submit"も忘れずつけておきます。

<button id="submit" type="submit" disabled="disabled">実行</button>

次にreCAPTCHAを動作させるために、JAVASCRIPTを追加します。 

まず、チェック認証で成功したときに呼ばれて、実行ボタンのdisabledを解除する処理を書きます。

<script type="text/javascript">
var testCallback = function(code) {
       if(code != ""){
                $('#submit').attr('disabled',false);
       }
};
</script> 

成功すると、codeに2分間のみ有効なコードがセットされて""ではなくなるので、それをチェックして、disabledを解除します。 

reCAPTCHAを動作させるため、以下のコードも追加します。

<script src="https://www.google.com/recaptcha/api.js?hl=ja" async="async" defer="defer"></script>

サンプルで、「async defer>」のように書かれている場合がありますが、必ず「async="async" defer="defer"」のように省略せずに書かないと、thymeleafのパーサーでエラーになります。注意してください。 

reCAPTCHAを組み込む部分です。

<div class="g-recaptcha" data-callback="testCallback" data-sitekey="SITEKEY_XXXXXXXXXOlG7RTm_XXXXXXXXXXX"></div>

data-callback="testCallback"のように、用意したJAVASCRIPTのコールバック関数を指定するのを忘れないようにします。 

これで以上です。 

念のため、関係ある部分だけにした最小限のHTML全体を再掲しておきます。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
      <meta charset="UTF-8"></meta>
      <script src="../static/js/jquery-3.1.1.min.js" th:src="@{/js/jquery-3.1.1.min.js}"></script>
      <title>Insert title here</title>
     <script type="text/javascript">
            var testCallback = function(code) {
                   if(code != ""){
                           $('#submit').attr('disabled',false);
                    }
             };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?hl=ja" async="async" defer="defer"></script>
</head>
<body>
     <div>
            <form role="form" id="hello4Form" action="/outpg01" th:action="@{/outpg01}" th:object="${hello4Form}" method="post">
                  <div class="g-recaptcha" data-callback="testCallback" data-sitekey="SITEKEY_XXXXXXXXXOlG7RTm_XXXXXXXXXXX"></div>
                  <button id="submit" type="submit" disabled="disabled">実行</button>
            </form>
     </div>
</body>
</html>

 

これで動作確認を行えるようになります。 

もちろん、このHTMLを動かすためのコントローラクラス等は用意されている前提です。 

そこが、まだの場合は以下を参考にして、コントローラクラス等を用意してください。

arakan-pgm-ai.hatenablog.com

 

ポート80でないと動かない!

ところが、ここで一つ落とし穴があります。 

STSでは組み込みTomcatで動作確認できるようになっていますが、デフォルトの動作ポートは8080です。 

なので、URLとしては、「http:/localhost:8080/」になるのですが、これだと「reCAPtCHA」は動いてくれません。 

必ず「http://localhost」でないと駄目なのです。 

ということで、組み込みTomcatのポートを80に変更します。 

もし、他にポート80で動いているWEBサーバー等を動かしている場合は止めてくださいね。 

src/main/resources/application.propertiesに以下の記述を追加します。

server.port=80

 これで、内蔵tomcatがポート80で動くので、localhostで画面表示をします。

f:id:arakan_no_boku:20170408225930j:plain

こんな風に、「私はロボットではありません」と表示されれば、動いてます。 


 STS+Spring Boot+thymeleaf 関連記事 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。