コンテンツ
reCAPTCHA とは
Webサイトのお問い合わせフォームや、コメントフォームなどにおいて、通常のユーザーではなくプログラムなどで不正に投稿を行われることを防ぐサービスです。
不正な投稿・送信を放置するとどうなるか
reCAPTCHAなどをもちいて不正なプログラム(bot等)からの攻撃に対応しない場合、
- 無駄な問い合わせデータが増加し、正規のデータを見失う
- メールアドレスへの返信が含まれる場合、不正なメールを送信してしまう
特に上記2のような、問い合わせに対し自動返信などを行う場合は、サイトが不正なメールを多数送信しているとみなされ、悪意のあるサイトと認識される危険性もあります。

reCAPTCHA導入手順
- GoogleからreCAPTCHAを取得
- ブラウザ(クライアント)側にreCAPTCHAのウィジェットを設置
- サーバ側でreCAPTCHAが送信したトークンをチェック
Google reCaptchaにアクセス
Google reCaptcha にアクセスし、Admin Console をクリックします。

reCaptchaを設置するサイトを登録

- ラベル:設置するサイトのURLを入力します。
- reCaptchaタイプ:「v3」はサイトアクセス時に自動で判定する機能、「v2」はユーザーの操作(「私はロボットではありませんチェック等」)で判定する機能になっています。
- ドメイン:設置するサイトのURLを入力します。
- オーナー:自身のメールアドレスを入力します。
サイトキーを取得します。

reCaptcha V2の実装方法
クライアント側実装

お問い合わせフォームなど、ブラウザ側の実装方法です。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>reCAPTCHA</title> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <div class="g-recaptcha" data-sitekey="6Ldtc9MZAAAAAF0dGFqmfeLTyzQLIKbUGy2rR_rp" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div> <p id="warning">送信する際はチェックを入れてください。</p> <input type="text" class="email" value="" name="email" placeholder="email" /> <input type="submit" id="btn-submit" class="button-submit" value="送信する" /> <script> window.onload = function() { //初期状態はdisabled document.getElementById("btn-submit").disabled = true; document.getElementById("btn-submit").style.background = "#bfbfbf"; } var verifyCallback = function(response) { //チェック時のコールバック関数 document.getElementById("warning").textContent = ""; document.getElementById("btn-submit").disabled = false; document.getElementById("btn-submit").style.background = "#06bda6"; }; var expiredCallback = function() { document.getElementById("warning").textContent = "送信する際はチェックを入れてください。"; document.getElementById("btn-submit").disabled = true; }; </script> </body> </html>
サーバー側実装(PHP)
<?php function reCaptchaV2Check(){ $site_key = [サイトキー]; $secret_key = [シークレットキー]; //reCAPTCHA トークン $token = ""; if (!empty($_POST[ 'g-recaptcha-response' ])) { $token = $_POST[ 'g-recaptcha-response' ]; } if ( !empty($token) ) { //cURLでrecaptchaにアクセス $ch = curl_init(); curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify"); curl_setopt($ch, CURLOPT_POST, true ); //POSTパラメタ curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array( 'secret' => $secret_key, 'response' => $token ))); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // curl_exec() 経由で応答データを直接取得(文字列)できるようにする //結果取得 $res = curl_exec($ch); curl_close($ch); //レスポンスのjsonをデコードし取得 $result = json_decode( $res ); if ( $result->success ) { //成功 return true; } else { //失敗(不正検知) return false; } } } $result_data = ""; if(reCaptchaV2Check()){ $result_data = "成功しました:".$_POST["text"]; }else{ $result_data = "失敗しました:".$_POST["text"]; } ?> <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>reCAPTCHA</title> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <?php echo $result_data; ?> <br> <br> <a href="https://choppydays.com/static/recaptcha/">戻る</a> </body> </html>
実装デモ