Written by elevenlab employee

Google reCAPTCHA v3を設置する方法

概要

別の記事で設置方法を書いた「私はロボットではありません」の Google reCAPTCHA v2、
新しいバージョンにGoogle reCAPTCHA v3がある

こちらは設置してもサイトの右下にアイコンが出るだけ

enter image description here
enter image description here
(マウスカーソルを合わせると少し伸びる)

v2 のように画像を選択しなくても自動的に閲覧者のページ内での行動をスコアとして算出してロボットかどうか判別してくれるらしい

それではその設置方法について

サイトキー、シークレットキーの取得

Google reCAPTCHAのサイトから利用登録してサイトキーをシークレットキーを取得する
※ 予めGoogleアカウントは取得してあるものとする

      1. Google reCAPTCHA の新規作成ページにアクセスする
        https://www.google.com/recaptcha/admin/create
      2. 必要な情報を入力する
        • ラベル:管理用のわかりやすい適当な名前をつける
        • reCAPTCHAタイプreCAPTCHA v3 を選択する
        • ドメイン:設置先のドメインを入力する、ローカル環境で試す場合は localhost と入力する

    enter image description here

    enter image description here

    1. reCAPTCHA 利用条件に同意する」にチェックして「送信
    2. サイトキーとシークレットキーが発行されるので控えておく
      (後から設定画面かもら確認可能)

enter image description here

サイトに設置

次のようなHTMLコードで設置できる

コード

<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>

<script>
grecaptcha.ready(function() {
    grecaptcha.execute('サイトキー', {action: 'homepage'}).then(function(token) {
        var recaptchaResponse = document.getElementById('g-recaptcha-response');
        recaptchaResponse.value = token;
    });
});
</script>

<form action="./verify.php" method="POST">
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
    <input type="submit" value="Submit">
</form>
  • {サイトキー} には事前に取得したサイトキーを設定する(2箇所)
  • 自動の判別が実行されると grecaptcha.execute が呼ばれる
  • ここで判別結果を取得するためのトークン token が取得できるので
    フォーム内の隠しフィールドに埋め込んで一緒にsubmitするようにする

説明

  • サイトキー の部分には事前に取得したサイトキーを設定する
  • g-recaptchaクラスのdivの位置に「私はロボットではありません」が表示される
  • g-recaptchaクラスのdivはフォーム(form)の中に書く必要がある

判別結果の確認

Submit先で判別結果を確認する必要がある
判別結果を取得するためにはGoogleのAPIを利用する必要がある
フォームのデータの受信とHTTPリクエストができればプログラム言語は問わないので今回はPHPで実装してみる

コード

verify.php

$secretKey =  'シークレットキー';
$captchaResponse = $_POST['g-recaptcha-response'];

// APIリクエスト
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$captchaResponse}");

// APIレスポンス確認
$responseData = json_decode($verifyResponse);
if ($responseData->success) {
    echo 'success'; // 成功(ロボットではない)
} else {
    echo 'fail'; // 失敗
}

説明

  • シークレットキー の部分には事前に取得したシークレットキーを設定する
  • POSTデータの g-recaptcha-response はHTMLの方で隠しフィールドに設定したキー名
  • APIにシークレットキーとトークンを送信することで判別結果を取得できる

あとは判定結果に応じてエラーを表示したりすればよい

この記事を書いた人

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です