今回は、Googleの「reCAPTCHA」を使います。
なお、STS3(3.9.6)+SpringBoot2.0+tymeleaf3.0迄動作確認しています。
Captcha
Captchaは、WEBサイトのコメントシステムや問い合わせフォームに対して、ロボットを利用したスパム投稿を防ぐ手段です。
従来は難読文字・数字を表示した画像を読み取って人間が入力する方法でしたが、それをより洗練したインタフェースに改良されたのが、Googleの「reCAPTCHA」です。
動作イメージを確認
初期表示時のイメージです。この時点では「実行」ボタンはdhisabledになっているため、押せません。上の「私はロボットではありません」と表示している部分が「reCAPTCHA」です。
ここで、「reCAPTCHA」の左側のチェックボックスをクリックします。そうすると、認証が行われ、「私はロボットではありません」と表示されて、実行ボタンが押せるようになります。
スマートですね。
reCAPTHAを使うための準備
Google Developersの「reCAPTHA」のサイトを開きます。
そして、「GET STARTED」をクリックします。
右側の文書の赤枠で囲ったあたりの「 sign up for an API key pair」と書かれている部分をクリックします。
そうすると、登録画面がでてきます。
以下のような感じで入力して認証するためのキーを生成・登録します。
ポイントです。
- 「reCAPTCHA V2」を選択する。
- Domainsには、とりあえず「localhost」を入力する。
localhostを入力しておかないと、ローカルサーバーでの動作確認時にreCAPTCHAが動いてくれません。
もし、本番運用でも使いたい場合は、本番用のドメインもあわせて入力してくださいね。
入力できたら、registerボタンを押してください。
エラーがなければ、以下のようにキーが発番されて表示されます。
この画面をとりあえず、お気に入りに登録しておきましょう。
登録ができたら、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を動かすためのコントローラクラス等は用意されている前提です。
そこが、まだの場合は以下を参考にして、コントローラクラス等を用意してください。
ポート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で画面表示をします。
こんな風に、「私はロボットではありません」と表示されれば、動いてます。
STS+Spring Boot+thymeleaf 関連記事
入力画面に関連する記事
参照画面・画面遷移に関連する記事
参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。
入力チェックに関連する記事
入力チェック:@Patternと正規表現で独自チェックする。
入力チェック用アノテーション定義を自分で作る。(独自実装版)
データアクセス・その他に関連する記事