Googleが文字入力不要のreCAPTCHAシステムを発表で紹介したreCAPTCHAを実装してみる。

やることとしてはreCAPTCHAに登録して発行されたKEYで実装していけばいいだけです。
ではやってみます。

登録

reCAPTCHAのサイトで登録します。
トップバナーの”GET reCAPTCHA”をクリック。
reCAPTCHA取得

サイト登録

Googleにサインインしていない場合は先にサインインを促されます。

サインイン後、画面下部に行くと”Register a new site”があるのでそこで自分のドメインとラベル(識別できる名前ならなんでもOK)を登録します。
サイト登録

登録完了

サイトキーとシークレットキーが発行されます。
シークレットキーは公開しないようにしてください。
登録完了

ライブラリの読み込み

reCAPTCHAのjavascriptを読み込みます。
自分のキーの下に”client-side integration”があるのでそのコードをコピーでOK。

<script src='https://www.google.com/recaptcha/api.js'></script>

reCAPTCHAの設置

reCAPTCHAの実体コードを記述します。
こちらも自分のキーの下に”client-side integration”があるのでそのコードをコピーでOK。

<div class="g-recaptcha" data-sitekey="発行されたサイトキー"></div>

応用編

これだけだと実用に耐えないので、ちょこっと応用。
reCAPTCHAが認証したタイミングで処理をしてみます。

画面読み込み時

onloadでreCAPTCHAを描画します。
認証後のcallbackを指定できるのでverifyCallbackで認証後の処理を行います。
“theme”はlightdarkで指定できます。

<script type="text/javascript">
      widget01 = var onloadCallback = function() {
      grecaptcha.render('example', {
          'sitekey' : '発行されたサイトキー',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
</script>

認証後のコールバック処理

認証後の処理を書きます。
今回はアラートを出してみます。

<script type="text/javascript">
      var verifyCallback = function(response) {
        if(response != "") { 
            alert("認証されたよ!");
        } else {
            alert("認証されなかったよ・・・。");
        }
      };
</script>

reCAPTCHA本体の実装

id=”example”で上記のonloadCallbackに紐付けます。
action内のjavascript:grecaptcha.reset(widget01)でreCAPTCHAをリセットしています。

<div class="g-recaptcha" data-sitekey="発行されたサイトキー"></div>
<form action="javascript:grecaptcha.reset(widget01);" method="POST">
  <div id="example"></div>
  <br>
  <input type="submit" value="Reset">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&" async defer></script>

実行



編集後記

まだ全部は分かってないのでまた新しいことがわかれば追記します。

いつもシェアありがとうございます!気に入ったらシェアしていただけたら幸いです。