タイトル: v2の使い方
SEOタイトル: reCAPTCHA v2の使い方（サンプル付き）
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<thead>
<tr><th style="background-color:#f39c12;color:#ffffff;text-align:left">この記事の要点</th></tr>
</thead>
<tbody>
<tr>
<td style="background-color:#fef9e7">
<ul>
<li><strong>reCAPTCHA v2</strong> の導入方法（チェックボックス UI 版）</li>
<li>前提: Google アカウントでログイン</li>
<li>手順: 公式の <strong>My reCAPTCHA</strong> でサイト登録 → ラベル / v2 / ドメインを設定 → サイトキーとシークレットキー取得</li>
<li>実装: フロントに <code>data-sitekey</code> 付きの <code>div</code> を置き、サーバで <code>g-recaptcha-response</code> を検証</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>本稿は<strong>reCAPTCHA v2の導入方法</strong>に関して説明します。</p>
<p> </p>
<h2>前提</h2>
<p>Googleアカウントを所有していて、ログインしている。</p>
<p> </p>
<h2>サイト情報の登録</h2>
<p><a href="https://www.google.com/recaptcha/intro/v3beta.html">公式サイト</a>にアクセスして「<strong>My reCAPTHA</strong>」を選択します。</p>
<p><img alt="" src="/uploadImage/20180912095029_4953194.png" /></p>
<p> </p>
<p>続いて、ラベル（適当な名前）を入力、「reCAPTHA v2」を選択、「Send alerts to owners」を選択します。</p>
<p>「reCAPTHA v2」を選択すると更にreCAPTHAを導入するドメインの登録と利用規約の同意を促されます。</p>
<p>「Send alerts to owners」にチェックを入れることで何らかの異常があった場合メールが送信されます。</p>
<p><img alt="" src="/uploadImage/20180912095407_8867832.png" /></p>
<h2>サイトにreCAPTHAを導入</h2>
<p>登録が完了したら導入先のサイトの<head>タグに以下のコードを実装します。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><script src='https://www.google.com/recaptcha/api.js'></script></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>以下、実装例となります。</p>
<p>reCAPTAHAの導入箇所である<form>タグ内に以下のコードを実装します。</p>
<p>※「<strong>data-sitekey</strong>」はご自分の<strong>Site Key</strong>を入力してください。</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><form ...></span></p>
<p><span style="color:#ffffff"> </span><span style="color:#f1c40f"><div class="g-recaptcha" data-sitekey="*******************" </span><span style="color:#2ecc71">data-callback="enableBtn"</span><span style="color:#f1c40f">></div></span></p>
<p><span style="color:#ffffff"> <input name="btn" <br />
type="submit" <br />
value="button"<br />
</span><span style="color:#2ecc71">disabled</span><span style="color:#ffffff">/></span></p>
<p><span style="color:#ffffff"></form></span></p>
<p><span style="color:#2ecc71"><script type="text/javascript"><br />
function enableBtn(code) {<br />
if(code !== ""){<br />
$(':submit[name=comment_btn]').removeAttr("disabled");<br />
}<br />
}<br />
</script></span></p>
</td>
</tr>
</tbody>
</table>
<p>reCAPTAHAを押したらsubmitボタンを押せるようにします。</p>
<p> </p>
<p>以下、サーバーサイドの実装例です。（PHP）</p>
<p><span style="color:null">$reCaptchaSecretKeyにはご自分の<strong>Secret Key</strong>を指定してください。</span></p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff"><?php<br />
$gRecaptchaResponse = $_POST["</span><span style="color:#f1c40f">g-recaptcha-response</span><span style="color:#ffffff">"];<br />
$reCaptchaSecretKey = "..."; <br />
$reCaptchaUrl = "</span><span style="color:#f1c40f">https://www.google.com/recaptcha/api/siteverify?secret=</span><span style="color:#ffffff">".$reCaptchaSecretKey."</span><span style="color:#f1c40f">&response=</span><span style="color:#ffffff">" . $gRecaptchaResponse;<br />
$response = @file_get_contents($reCaptchaUrl);<br />
$response = json_decode($response,true);</span></p>
<p><span style="color:#ffffff">//var_dump($response);</span></p>
<p><span style="color:#ffffff">if ($response['success'] == true){<br />
print "成功";<br />
} else {<br />
print "失敗";<br />
}<br />
<br />
?></span></p>
</td>
</tr>
</tbody>
</table>
<p> </p>