🚀

「私はロボットではありません」を実装する。

2022/11/13に公開

reCAPTCHA

tech

Googleが提供するreCAPTHAというAPIサービスを利用する。

#サイトを登録する。

以下にアクセスして対象のサイトを登録する。
getStartedボタンから入る。

reCAPTCHA

#コードの実装方法
以下が詳細に書かれているので参照。

Google reCHAPCHAの使い方

#ポイント
公開鍵と秘密鍵を使用する。
秘密鍵は公開ディレクトリに置かずに、環境変数とかにして非公開ディレクトリから読み込む。

##コードの編集箇所（フロントHTML側）
<head>の中に以下を埋め込む
私はロボットではありませんに入れたチェックは時間切れするとコールバック関数を呼び出すので、エラーメッセージを出したり、ボタンの有効化、非活性化などを行っている。
ID名やメッセージは自分のサイトに合わせて書き換える。

  <!-- *** google reCAPTHA *** -->
  <script>
  //.g-recaptcha タグの data-callback 属性で指定したコールバック関数の定義
  var myAlert = function(response) {
    alert("チェックボックスがチェックされました！");
  };

  var verifyCallback = function(response) { //コールバック関数の定義
    //#warning の p 要素のテキストを空にf
    document.getElementById("warning").textContent = '';
    //#send の button 要素の disabled 属性を解除
    document.getElementById("send").disabled = false;
  };
  var expiredCallback = function() { //コールバック関数の定義
    //#warning の p 要素のテキストに文字列を設定
    document.getElementById("warning").textContent = '送信するにはチェックを入れてください。';
    //#send の button 要素に disabled 属性を設定
    document.getElementById("send").disabled = true;
  };
  </script>

<form>タグ内に以下を埋め込む
「上で取得してきた公開鍵」の部分を差し替える。
このコードを記述したところに「私はロボットではありません」のチェック欄が出現する。

	<!-- google reCAPTHA -->
<div class="g-recaptcha" data-sitekey="上で取得してきた公開鍵" data-callback="myAlert"></div>   
<p id="warning"></p>
<?php if ($error['re_captha'] === 'failed'):?>※認証に失敗しました。<?php endif; ?>
<div class="wrap_btn">
  <button id="send" class="btn_st arrow bg_yellow">確認する</button>
</div>

</body>タグの直前あたりに以下のコードを埋め込む

	    <!-- google reCAPTHA -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script><!-- API の読み込み -->

##コードの編集箇所（バックエンド側PHP）
以下の関数を定義して、バリデーションの処理あたりで呼び出す。
本番環境では秘密鍵は非公開ディレクトリにおいてロードするようにする。

認証に成功するとtrue、失敗するとfalseを返すので

if(checkRechaptha()) { 次のページにいく処理} else {同じページに差し戻す処理}
のようにする。

	function checkRechaptha() {

// reCAPTCHA サイトキー
$siteKey = 取得した公開鍵;
// reCAPTCHA シークレットキー
$secretKey = 取得した秘密鍵;
 
$result_status = '';  // 結果を表示する文字列を初期化
// トークンが送信されたら
if ( isset( $_POST[ 'g-recaptcha-response' ] ) ) {
 
  //API Request URL（リクエストを送る API の URL）
  $url = 'https://www.google.com/recaptcha/api/siteverify';
  //パラメータを指定
  $data = array(
    'secret' => $secretKey, //シークレットキー
    'response' =>  $_POST[ 'g-recaptcha-response' ]
  );
  //POST メソッドを使用
  $context = array(
    'http' => array(
      'method'  => 'POST',
      'header'  => implode("\r\n", array('Content-Type: application/x-www-form-urlencoded',)),
      'content' => http_build_query($data)
    )
  );
  //上記パラメータを指定して file_get_contents で API Response を取得
  $api_response = file_get_contents($url, false, stream_context_create($context));
  
  // JSON をデコード
  $result = json_decode( $api_response );
  // トークンが有効な場合
  if ( $result->success ) {
    return true;
    // 成功した場合の処理（メールの送信など）を実行（または結果を変数に入れて、その変数を使って処理を分岐するなど）
  } else { // トークンが無効な場合
    return false;
  }
}

Discussion