このページは Cloud Translation API によって翻訳されました。

reCAPTCHA v3

reCAPTCHA v3 は、ユーザーに負担をかけることなくリクエストごとにスコアを返します。このスコアはサイトでの操作に基づいて算出されるため、サイトに対して適切な対応を取ることができます。reCAPTCHA 管理コンソールで reCAPTCHA v3 キーを登録します。

このページでは、ウェブページで reCAPTCHA v3 を有効にしてカスタマイズする方法について説明します。

ウェブサイトへの配置

reCAPTCHA v3 はユーザーの操作を妨げることがないため、コンバージョンに影響を与えることなくいつでも実行できます。reCAPTCHA は、正当な動作と不正行為の両方から得た、サイトとのやり取りに関するコンテキストを最も得られる場合に最も効果を発揮します。このため、reCAPTCHA による確認をフォームやアクションのほか、分析のためにページの背景に含めることをおすすめします。

reCAPTCHA は、同じページで必要な数のアクションに対して実行できます。

チャレンジを自動的にボタンにバインドする

ページで reCAPTCHA v3 を使用する最も簡単な方法は、必要な JavaScript リソースを追加し、html ボタンにいくつかの属性を追加することです。

JavaScript API を読み込みます。

 <script src="https://www.google.com/recaptcha/api.js"></script>

トークンを処理するコールバック関数を追加します。

 <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

html ボタンに属性を追加します。

<button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

プログラムでチャレンジを呼び出す

reCAPTCHA を実行するタイミングをより細かく制御するには、grecaptcha オブジェクトの execute メソッドを使用します。これを行うには、reCAPTCHA スクリプトの読み込みに render パラメータを追加する必要があります。

サイトキーを使用して JavaScript API を読み込みます。

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

保護するアクションごとに grecaptcha.execute を呼び出します。

   <script>
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
  </script>

検証リクエストを含むトークンを直ちにバックエンドに送信します。

スコアの解釈

reCAPTCHA v3 はスコアを返します（1.0 は適切なインタラクション、0.0 は bot の可能性が非常に高い）。スコアに基づいて、サイトの状況に応じてさまざまなアクションを実行できます。サイトによって異なりますが、サイトによるスコアの使用例を次に示します。サイトの保護を強化するために、以下の例に示すように、トラフィックをブロックするのではなく、バックグラウンドで対応を行います。

ユースケース	推奨
homepage	スクレイパーをフィルタしながら、トラフィックの全体像を管理コンソールで確認できます。
ログイン	スコアが低い場合は、2 要素認証またはメールの確認を必須にして、クレデンシャルスタッフィング攻撃を防ぎます。
ソーシャル	嫌がらせ行為者からの未回答の友達リクエストを制限し、危険性のあるコメントをモデレーションに送る。
e コマース	実際の販売を bot に先だって実施し、危険性のあるトランザクションを特定します。

reCAPTCHA は、サイト上の実際のトラフィックを見て学習します。このため、ステージング環境または実装直後のスコアは、本番環境とは異なる場合があります。reCAPTCHA v3 はユーザーフローを中断しないため、最初にアクションを行わずに reCAPTCHA を実行し、次に管理コンソールでトラフィックを確認してしきい値を決定できます。デフォルトのしきい値は 0.5 です。

アクション

reCAPTCHA v3 では、「アクション」という新しいコンセプトが導入されています。reCAPTCHA を実行する各場所にアクション名を指定すると、次の新機能が有効になります。

管理コンソールに表示される上位 10 件のアクションのデータの詳細な内訳
不正行為は変化する可能性があるため、アクションのコンテキストに基づく適応型リスク分析。

重要な点として、reCAPTCHA のレスポンスを確認するときは、アクション名が想定どおりの名前であることを確認する必要があります。

サイト確認レスポンス

reCAPTCHA v2 や Invisible reCAPTCHA の場合と同様に、レスポンストークンを検証するリクエストを行います。

レスポンスは JSON オブジェクトです。

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

ヒント

grecaptcha.ready() は、reCAPTCHA ライブラリの読み込み時に関数を実行します。api.js との競合状態を回避するには、grecaptcha を呼び出すスクリプトの前に api.js を含めるか、v2 API で定義された onload コールバックを引き続き使用します。
登録、パスワードの再設定、購入、プレイなど、興味深いアクションや機密性の高いアクションへの execute 呼び出しをフックしてみてください。
Trusted Types と互換性のあるコードを読み込むには、https://www.google.com/recaptcha/api.js?trustedtypes=true を使用します。