このページは 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 のレスポンスを確認する際は、 action name は想定どおりの名前です。

サイト確認レスポンス

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、api.js を grecaptcha を呼び出すか、引き続き v2 API で定義された onload コールバック。
次のような興味深いアクションやデリケートなアクションへの execute 呼び出しをフックしてみてください登録、パスワードの再設定、購入、またはプレイ。
https://www.google.com/recaptcha/api.js?trustedtypes=true の用途 Trusted Types と互換性のあるロードコード。