在網站上安裝分數制金鑰

本頁說明如何在網站上安裝不含驗證問題的評分式金鑰。使用分數型金鑰，您可以在整個網站中加入 reCAPTCHA，不必要求使用者解決人機驗證挑戰。

安裝以分數為準的金鑰後，當使用者觸發互動時，reCAPTCHA 會傳送加密的回應，也就是 reCAPTCHA 回應權杖 (又稱權杖)。權杖產生後，您必須在兩分鐘內建立評估作業，才能取得每項要求的評分。根據分數，您可以瞭解使用者互動帶來的風險等級，並設定適當的回應。此外，以分數為準的密鑰可以收集機器人活動遙測資料，針對新攻擊或目標發出預警。

為改善 reCAPTCHA 的風險模型，建議您在網站的每個網頁中加入 reCAPTCHA，因為這有助於瞭解真實使用者和機器人在不同網頁和動作之間的轉換情形。

事前準備

  1. 準備 reCAPTCHA 環境。

  2. 建立以分數為依據的金鑰。

    或者，您也可以執行下列任一步驟，複製現有評分式金鑰的 ID：

    • 如要從 Google Cloud 控制台複製現有金鑰的 ID，請按照下列步驟操作：

      1. 前往 reCAPTCHA 頁面。

        前往 reCAPTCHA

      2. 在 reCAPTCHA 金鑰清單中，將指標懸停在要複製的金鑰上，然後按一下 。
    • 如要使用 REST API 複製現有金鑰的 ID，請使用 projects.keys.list 方法。
    • 如要使用 gcloud CLI 複製現有金鑰的 ID，請使用 gcloud recaptcha keys list 指令。

在網站上放置金鑰

reCAPTCHA 掌握的網站互動情境越多，效果就越好。reCAPTCHA 會監控合法和濫用行為，瞭解網站上的互動。

為獲得最佳成效，請在網站的下列位置安裝計分金鑰：

  • 表單
  • 動作 (使用者互動)
  • 所有網頁的背景

以分數為準的鍵不會中斷使用者流程，因此您可以在需要時隨時執行 reCAPTCHA，而且完全不會影響轉換成效。

將金鑰與前端整合

建議您在需要驗證的使用者互動中加入 reCAPTCHA 驗證。舉例來說，如要驗證表單的提交動作，則必須在提交動作中加入 reCAPTCHA 驗證。

視要新增 reCAPTCHA 驗證的位置而定，選擇適當的選項：

如需各個選項的範例，請參閱示範網站的原始碼。

在使用者互動中新增驗證

  1. 如要在網頁上載入 reCAPTCHA，請在網頁的 <head></head> 元素中，加入含有計分型金鑰的 JavaScript API。

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    reCAPTCHA 預設會使用瀏覽器的語言。如要指定其他語言，請在指令碼中使用 hl=LANG 屬性。舉例來說，如要使用法文，請指定以下項目： <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>。 如要瞭解支援的語言，請參閱 reCAPTCHA 的語言代碼。

    如要指定徽章位置，請在指令碼標記中使用 badge=LOCATION 做為查詢參數。例如：www.google.com/recaptcha/enterprise.js?sitekey=KEY_ID&badge=bottomleft。預設位置為 bottomright。 其他可能的值為 inline 和 bottomleft。

  2. 如要在使用者互動中加入 reCAPTCHA 驗證，請按照下列步驟操作：

    1. 為確保 grecaptcha.enterprise.execute() 在 reCAPTCHA 程式庫載入後執行，請使用 grecaptcha.enterprise.ready()。

    2. 針對要使用評分型金鑰保護的每次互動，呼叫 grecaptcha.enterprise.execute()。在 action 參數中，為使用者互動指定有意義的名稱。如需更多指引，請參閱「動作」。

      以下範例說明如何對登入動作呼叫 grecaptcha.enterprise.execute()：

      <script>
function onClick(e) {
  e.preventDefault();
  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute('KEY_ID', {action: 'LOGIN'});
    // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
    // reCAPTCHA to the end user's browser.
    // This token must be validated by creating an assessment.
    // See https://cloud.google.com/recaptcha/docs/create-assessment
  });
}
</script>

      grecaptcha.enterprise.execute() 會產生權杖，如以下範例所示： 

      03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF_TxNMrqhyQchk7hmg_ypDctt_F5RTr9zNO9TSDX3Fy0qHQTuaM9E3hrAkA1v1l7D-fCreg7uq8zoudfh1ZRmN49-2iAMAn4E8_ff-nmlLTNGVZmCSyeze-5xM24pM_JhhUVcCMIDKYtDUnr2imxg2ubIqMscCZGUtdXNUO_LRSzuwWDlLyAr3V2nVn29Z48PQa2QzbymEXzO9pCtoGQmY7kiZ8ILfD9DAJSSyUTMwJXVJptUeBmLM341fq_STYZBbPQJ0zYOEDvJoFsIwGMfuphkDet0nK56b0mkzaL8RCRy2oK31Mcx6n3PhGkCnQ6QIhiV5ZVmV1Hz9M3w99zYw6ekc3wPCNMZ6V6x1ApVpIk3reFfByRQ0C0_pRWwbKZHLXQ_oSTI1UI7kyH1VeXngsJAx2l7zcp0hQNipajC4YwL7Jb8X4cCD0NeiaY1YCrI5j87mK5axcMikq460I4niIFeDBlHGF-ndqu3CJstosAur-C_x827f-dPPjA9Vrw8MDb3x4KUb0vbA8xE9mJxPYGY0rPCR27vJ38Voa7DjEBGX9c-iufv5_wfj-yIfIAHy0iijnRLI0CVkWF2-iPdWv7LnkTwL3WKbF_MrEGZXmtyLX9dEZArfxmToeMuSdYkfikkgR2-k4Xzxlz15RbHJuWSAYqEyTTnpUXmOvDuTN92b0kYqbRelcLUI_Shm-8dq9e-L7K6YWQv32gV6NukZKY15dyrJaW10frBgTOGSTTpIyB7MNEL8S27WjWtOb-zWsgimIhoRNfS8BiJWkmK4gTj51m7Wur-qsDbHgV6gXlMvjJs_B7oXX-mKsKhY9ACtwukotBelGYQOvf1RDHjH3Yi1RDfELBY6AkwUK4tq8cACVGpCwa0gKUo-sbORTsGu_r7VTzYo1AaZD5HV4XUm8yoqszel6DmIfkJcI7PfzzvfUJuvMQ1itZSzpzuth3glbKBYsIjbKqG-q8cxtZ7u0l32j46ASo2zlCJWUjwP3W1P7MUenEoIZtjlyTB_tT6Fk8RxGgRv3oLP7NPFJGs9ZGOAl6tBHpZF8Y_FqEOCMKtBl2JYOE5h6_Es3buSdiMm7mtLr64pboGiEColF1vbVvYpyaaqGFPXBM6ekZSXEXLAI0_7rj_fCLgnB21KXfac95vZbM9vyJCASvDcWKwqajQwy5aGMNe9GtbMogYbZfz5UGWAIi24Vd8KSv3qKOOwvzbcw4H0HYdsBXA

  3. 系統產生權杖後，請將 reCAPTCHA 權杖傳送至後端，並在兩分鐘內建立評估。

    如果是 WAF 整合，且您要整合動作權杖金鑰，則必須將權杖附加至預先定義的要求標頭，不需要建立評估。詳情請參閱「實作 reCAPTCHA 動作權杖」。

在 HTML 按鈕上新增 reCAPTCHA

  1. 如要在網頁上載入 reCAPTCHA，請在網頁的 <head></head> 元素中，加入含有計分型金鑰的 JavaScript API。

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    reCAPTCHA 預設會使用瀏覽器的語言。如要指定其他語言，請在指令碼中使用 hl=LANG 屬性。舉例來說，如要使用法文，請指定以下項目： <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>。 如要瞭解支援的語言，請參閱 reCAPTCHA 的語言代碼。

  2. 如要在簡單的 HTML 按鈕上新增 reCAPTCHA，請按照下列步驟操作：

    1. 指定用來處理權杖的回呼函式。

      <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   } // Use `requestSubmit()` for extra features like browser input validation.
</script>

      詳情請參閱 requestSubmit() 方法。

    2. 為 HTML 按鈕新增屬性。

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

      如要指定徽章位置，請在具有 class=g-recaptcha 的元素上使用 data-badge=LOCATION 屬性。預設位置為 bottomright。 其他可能的值為 inline 和 bottomleft。

    3. 如果有人使用這個按鈕在網站上提交表單，g-recaptcha-response POST 參數就會包含回應權杖。

  3. 系統產生權杖後，請將 reCAPTCHA 權杖傳送至後端，並在兩分鐘內建立評估。

    如果是 WAF 整合，且您要整合動作權杖金鑰，則必須將權杖附加至預先定義的要求標頭，不需要建立評估。詳情請參閱「實作 reCAPTCHA 動作權杖」。

後續步驟