このページは 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>

verify リクエストとともに、すぐにトークンをバックエンドに送信します。

スコアの解釈

reCAPTCHA v3 はスコアを返します（1.0 は安全なインタラクションである可能性が非常に高く、0.0 は bot である可能性が非常に高いです）。スコアに基づいて、サイトに応じてさまざまな対応を取ることができます。サイトはそれぞれ異なりますが、以下にスコアの使用方法の例を示します。下記の例のように、トラフィックをブロックする代わりに舞台裏で対応することで、サイト保護を強化できます。

ユースケース	推奨
ホームページ	管理コンソールでスクレイピングフィルタを使用して、トラフィック全体を一目で確認できます。
login	スコアが低い場合は、クレデンシャルスタッフィング攻撃を防ぐために 2 要素認証またはメール確認を要求します。
ソーシャル	嫌がらせ行為者からの未返信の友達リクエストを制限し、危険なコメントを管理用に送信。
e コマース	実際の販売を bot に先だって実施し、危険性のあるトランザクションを特定します。

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

Actions

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 の呼び出しを、登録、パスワードのリセット、購入、Play などの興味深いアクションや機密性の高いアクションにフックするようにします。
https://www.google.com/recaptcha/api.js?trustedtypes=true を使用して、信頼できる型と互換性のあるコードを読み込みます。