タイトル: v3の使い方
SEOタイトル: reCAPTCHA v3 使い方（サンプル付き）
この本文には実行可能なタグ等が含まれるため、安全のため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>reCAPTCHA v3 の<strong>使い方</strong>（v2 と異なり<strong>チェックボックス UI が出ない</strong>）</li>
<li>前提: <strong>キー登録</strong>（<code>https://g.co/recaptcha/v3</code>）が必要</li>
<li>クライアント: <strong><code><script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></code></strong> を head に追加</li>
<li>サーバ: <code>g-recaptcha-response</code> をサーバ検証 API へ POST し、<strong>スコア (0.0〜1.0)</strong> で bot 判定</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p>本稿は<strong>reCAPTCHA v3 使い方</strong>について説明します。</p>
<p> </p>
<h2>前提</h2>
<p><strong>公式ドキュメント</strong>は以下のURLを参照。</p>
<p><a href="https://developers.google.com/recaptcha/intro">https://developers.google.com/recaptcha/intro</a></p>
<p> </p>
<p>reCAPTCHA v3を使用するには<span style="color:#e74c3c"><strong>キー登録</strong></span>が必要となる。</p>
<p>以下のURLからキー登録ができる。</p>
<p><a href="https://g.co/recaptcha/v3">https://g.co/recaptcha/v3</a></p>
<p> </p>
<h2>headタグ</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?render=</span><u><em><span style="color:#f1c40f">Site Key</span></em></u><span style="color:#ffffff">'></script></span></p>
</td>
</tr>
</tbody>
</table>
<p><span style="color:#e74c3c"><strong>Site key</strong></span>は自身のものを入力する。</p>
<p> </p>
<h2>formの作成</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><br />
<span style="color:#ffffff"><form id="test_form" method="POST" action="testAction"><br />
<br />
<!-- 適当な入力値 --><br />
<input id="user_name" type="text" name="user_name" /></span></p>
<p><span style="color:#ffffff"> <!-- 送信ボタン --><br />
<input type="button" value="送信" onclick="</span><span style="color:#3498db">commentSubmitFunc()</span><span style="color:#ffffff">"/></span></p>
<p><span style="color:#ffffff"></form></span></p>
<p><span style="color:#ffffff"><!-- reCAPCTHA --></span></p>
<p><span style="color:#ffffff"><script></span></p>
<p><span style="color:#ffffff">function </span><span style="color:#3498db">commentSubmitFunc()</span><span style="color:#ffffff"> {</span></p>
<p><span style="color:#ffffff"> grecaptcha.ready(function() {</span></p>
<p><span style="color:#ffffff"> </span><span style="color:#e74c3c">grecaptcha.execute</span><span style="color:#ffffff">('</span><u><em><span style="color:#f1c40f">Site Key</span></em></u><span style="color:#ffffff">', {action: '</span><span style="color:#2ecc71"><em>Action Name</em></span><span style="color:#ffffff">'})</span></p>
<p><span style="color:#ffffff"> .then(function(</span><span style="color:#9b59b6">token</span><span style="color:#ffffff">) {</span></p>
<p><span style="color:#ffffff"> $('#test_form').prepend('<input type="hidden" name="</span><span style="color:#9b59b6">g-recaptcha-response</span><span style="color:#ffffff">" value="' + </span><span style="color:#9b59b6">token </span><span style="color:#ffffff">+ '">');</span></p>
<p><span style="color:#ffffff"> $('#test_form').submit();</span></p>
<p><span style="color:#ffffff"> });</span></p>
<p><span style="color:#ffffff"> });</span></p>
<p><span style="color:#ffffff">}</script></span></p>
</td>
</tr>
</tbody>
</table>
<p>formの送信ボタンを押したら<strong><span style="color:#e74c3c">grecaptcha.execute</span></strong>を呼び出すようにする。</p>
<p>その際に<strong><span style="color:#9b59b6">token</span></strong>をサーバーサイドに渡してやる必要がある。</p>
<p><strong><span style="color:#2ecc71"><em>Action Name</em></span></strong>には以下のものが指定できる。（公式サイトより抜粋）</p>
<blockquote>
<table cellspacing="0" style="border-collapse:collapse; border:none; width:701pt">
<tbody>
<tr>
<td style="background-color:rgba(255, 255, 255, 0.95); height:18.0pt; vertical-align:bottom; white-space:normal; width:118pt"><strong><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">homepage</span></span></span></strong></td>
<td style="height:18.0pt; vertical-align:bottom; white-space:nowrap; width:583pt"><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">See a cohesive view of your traffic on the admin console while filtering scrapers.</span></span></span></td>
</tr>
<tr>
<td style="height:18.0pt; vertical-align:bottom; white-space:normal; width:118pt"><strong><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">login</span></span></span></strong></td>
<td style="height:18.0pt; vertical-align:bottom; white-space:nowrap"><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">With low scores, require 2-factor-authentication or email verification to prevent credential stuffing attacks.</span></span></span></td>
</tr>
<tr>
<td style="height:18.0pt; vertical-align:bottom; white-space:normal; width:118pt"><strong><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">social</span></span></span></strong></td>
<td style="height:18.0pt; vertical-align:bottom; white-space:nowrap"><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">Limit unanswered friend requests from abusive users and send risky comments to moderation.</span></span></span></td>
</tr>
<tr>
<td style="height:18.0pt; vertical-align:bottom; white-space:normal; width:118pt"><strong><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">e-commerce</span></span></span></strong></td>
<td style="height:18.0pt; vertical-align:bottom; white-space:nowrap"><span style="font-size:11pt"><span style="color:black"><span style="font-family:"Yu Gothic",monospace">Put your real sales ahead of bots and identify risky transactions.</span></span></span></td>
</tr>
</tbody>
</table>
</blockquote>
<p><span style="color:#e74c3c">※どなたか適切な日本語訳をお願いします。</span></p>
<p>本稿のサンプルでは<strong>homepage</strong>を指定する<strong>。</strong></p>
<p> </p>
<h2>サーバサイドの実装</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#9b59b6">$gRecaptchaResponse</span><span style="color:#ffffff"> = $_POST["</span><span style="color:#9b59b6">g-recaptcha-response</span><span style="color:#ffffff">"];</span></p>
<p><span style="color:#ffffff">$reCaptchaUrl = "https://www.google.com/recaptcha/api/siteverify?secret=</span><span style="color:#3498db"><em>Secret key</em></span><span style="color:#ffffff">&response=" . </span><span style="color:#9b59b6">$gRecaptchaResponse</span><span style="color:#ffffff">;</span></p>
<p><span style="color:#ffffff">$response = @file_get_contents($reCaptchaUrl);</span></p>
<p><span style="color:#ffffff">$response = json_decode($response,true);</span></p>
<p><span style="color:#ffffff">if ($response['</span><span style="color:#e74c3c"><strong>success</strong></span><span style="color:#ffffff">'] != true or $response['</span><span style="color:#e74c3c"><strong>score</strong></span><span style="color:#ffffff">'] < 0.5 ){</span></p>
<p><span style="color:#ffffff"> //エラー処理</span></p>
<p><span style="color:#ffffff">}</span></p>
</td>
</tr>
</tbody>
</table>
<p><strong><span style="color:#3498db"><em>Secret key</em></span></strong>は自身のものを入力する。</p>
<p>APIに<strong><span style="color:#3498db"><em>Secret key</em></span></strong>と<strong><span style="color:#9b59b6">token</span></strong>を渡すことでレスポンスを取得できる。</p>
<p>以下、レスポンスの内容。（公式サイトより抜粋）</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">{</span></p>
<p><span style="color:#ffffff"> "<strong>success</strong>": true|false, </span><span style="color:#f1c40f">// whether this request was a valid reCAPTCHA token for your site</span></p>
<p><span style="color:#ffffff"> "<strong>score</strong>": number </span><span style="color:#f1c40f">// the score for this request (0.0 - 1.0)</span></p>
<p><span style="color:#ffffff"> "action": string </span><span style="color:#f1c40f">// the action name for this request (important to verify)</span></p>
<p><span style="color:#ffffff"> "challenge_ts": timestamp, </span><span style="color:#f1c40f">// timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)</span></p>
<p><span style="color:#ffffff"> "hostname": string, </span><span style="color:#f1c40f">// the hostname of the site where the reCAPTCHA was solved</span></p>
<p><span style="color:#ffffff"> "error-codes": [...] </span><span style="color:#f1c40f">// optional</span></p>
<p><span style="color:#ffffff">}</span></p>
</td>
</tr>
</tbody>
</table>
<p>ポイントは<span style="color:#e74c3c"><strong>success</strong></span><span style="color:null">と</span><span style="color:#e74c3c"><strong>score</strong></span><span style="color:null">の値。</span></p>
<p><span style="color:null"><strong>score</strong></span>の幅は1.0～0.0で低いほどbotである可能性が高くなる。</p>
<p><span style="color:#e74c3c"><strong>この値を見てbotかどうかを判断する必要がある。</strong></span></p>
<p><span style="color:#e74c3c"><strong>※どの程度の値を設定することがベストなのか情報求む。人が操作するとだいたい0.9になることが多いらしい。</strong></span></p>
<p> </p>