整合 reCAPTCHA for WAF 與 Cloudflare

本文說明如何將 reCAPTCHA for WAF 與 Cloudflare 整合。

如要完成整合,您必須導入一或多項 reCAPTCHA for WAF 功能、建立 reCAPTCHA 防火牆政策,並部署及設定 Cloudflare Worker 無伺服器應用程式,與 Cloudflare 整合。

事前準備

  1. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

    請記下專案 ID,以供日後使用。 Google Cloud

  2. Make sure that billing is enabled for your Google Cloud project.

  3. Enable the reCAPTCHA Enterprise API.

    Enable the API

  4. 建立用於驗證的 API 金鑰:

    1. 前往 Google Cloud 控制台的「憑證」頁面。

      前往「憑證」

    2. 按一下「建立憑證」,然後選取「API 金鑰」
    3. 請記下 API 金鑰,稍後會用到。

  5. 規劃如何導入 reCAPTCHA for WAF 的功能,以保護您的網站。

    1. 選擇一或多項最符合您用途的 WAF 功能
    2. 找出要保護的頁面。
    3. 選擇要在已識別的網頁上導入的 WAF 功能類型。
    4. 找出管理使用者存取權的條件。
    5. 瞭解 reCAPTCHA 防火牆政策元件及其屬性,有助於建立 reCAPTCHA 防火牆政策。如需範例,請參閱「reCAPTCHA 防火牆政策範例」。
  6. 建立或選擇具備 Cloudflare Worker 功能的 Cloudflare 帳戶

  7. 建立或選擇 Cloudflare 網站

  8. 下載 Cloudflare 適用的 reCAPTCHA 套件 recaptcha_cloudflare_client_0.0.2.tar.gz

導入 reCAPTCHA for WAF 的功能

您可以根據需求,在單一應用程式中使用一或多項 reCAPTCHA for WAF 功能。

如要使用多項功能,請為每項功能建立 reCAPTCHA 金鑰,並在應用程式中使用。舉例來說,如果您想使用 reCAPTCHA 動作符記和 reCAPTCHA 驗證頁面,就必須建立動作符記金鑰和驗證頁面金鑰,並在應用程式中使用這些金鑰。

動作符記

您必須在網頁上執行 reCAPTCHA,才能產生動作符記。 reCAPTCHA 產生動作權杖後,您可以在需要保護任何使用者動作 (例如 checkout) 的位置,將動作權杖附加至預先定義的要求標頭。根據預設,動作權杖的效期為 30 分鐘,但可能會因流量而異。 您必須在權杖到期前,將動作權杖附加至預先定義的要求標頭,Cloudflare 才能評估權杖屬性。

如要實作 reCAPTCHA 動作權杖,請按照下列步驟操作:

  1. 為網站建立動作符記金鑰。

    gcloud

    如要建立 reCAPTCHA 金鑰,請使用 gcloud recaptcha keys create 指令。

    使用下方的任何指令資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • INTEGRATION_TYPE:整合類型。 指定 scorecheckbox
    • DOMAIN_NAME:允許使用金鑰的網站網域或子網域。

      以逗號分隔清單的形式指定多個網域。 選用:指定 --allow-all-domains 停用網域驗證。

      停用網域驗證會造成安全風險,因為網站沒有任何限制,任何人都能存取及使用 reCAPTCHA 金鑰。

    • WAF_FEATURE:網路應用程式防火牆功能的名稱。 指定 action-token
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    執行 gcloud recaptcha keys create 指令:

    Linux、macOS 或 Cloud Shell

    gcloud recaptcha keys create \
    --web \
    --display-name=DISPLAY_NAME  \
    --integration-type=INTEGRATION_TYPE \
    --domains=DOMAIN_NAME \
    --waf-feature=WAF_FEATURE \
    --waf-service=WAF_SERVICE

    Windows (PowerShell)

    gcloud recaptcha keys create `
    --web `
    --display-name=DISPLAY_NAME  `
    --integration-type=INTEGRATION_TYPE `
    --domains=DOMAIN_NAME `
    --waf-feature=WAF_FEATURE `
    --waf-service=WAF_SERVICE

    Windows (cmd.exe)

    gcloud recaptcha keys create ^
    --web ^
    --display-name=DISPLAY_NAME  ^
    --integration-type=INTEGRATION_TYPE ^
    --domains=DOMAIN_NAME ^
    --waf-feature=WAF_FEATURE ^
    --waf-service=WAF_SERVICE

    回應包含新建立的 reCAPTCHA 金鑰。

    REST

    如要查看金鑰類型和整合類型的 API 參考資訊,請參閱「金鑰」和「整合類型」。

    使用任何要求資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • INTEGRATION_TYPE:整合類型。 指定 scorecheckbox
    • DOMAIN_NAME:允許使用金鑰的網站網域或子網域。

      以逗號分隔清單的形式指定多個網域。 選用:指定 --allow-all-domains 停用網域驗證。

      停用網域驗證會造成安全風險,因為網站沒有任何限制,任何人都能存取及使用 reCAPTCHA 金鑰。

    • WAF_FEATURE:網路應用程式防火牆功能的名稱。 指定 action-token
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    HTTP 方法和網址:

    POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

    JSON 要求主體:

    
    {
      "displayName": "DISPLAY_NAME",
       'wafSettings': "  {
           "wafService": "WAF_SERVICE",
      
    "wafFeature": "WAF_FEATURE"
      }
      "webSettings": {
        "allowedDomains": "DOMAINS",
        "integrationType": "TYPE_OF_INTEGRATION"
       }
       
    }
    

    如要傳送要求,請選擇以下其中一個選項:

    curl

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json; charset=utf-8" \
    -d @request.json \
    "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

    PowerShell

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    $cred = gcloud auth print-access-token
    $headers = @{ "Authorization" = "Bearer $cred" }

    Invoke-WebRequest `
    -Method POST `
    -Headers $headers `
    -ContentType: "application/json; charset=utf-8" `
    -InFile request.json `
    -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

    您應該會收到如下的 JSON 回應:

    
    {
      "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
    "displayName": "DISPLAY_NAME,
    
    "webSettings": {
      "allowAllDomains": true,
      "allowedDomains": [
        "localhost"
      ],
    
     "integrationType": "SCORE",
    
    
    },
    "wafSettings": {
      "wafService": "cloudflare",
    
      "wafFeature": "ACTION_TOKEN"
      
    
    }
    }
    
    

    請記下動作權杖金鑰,稍後會用到。

  2. 在網頁中整合 reCAPTCHA JavaScript,並使用您建立的動作權杖金鑰。如需操作說明,請參閱與動作權杖金鑰整合類型相符的文件。
  3. 從 reCAPTCHA 收到權杖後,請將權杖附加至預先定義的要求標頭,格式如下:
     X-Recaptcha-Token: value-of-your-action-token
    

    您可以使用 XHR、Ajax 或 Fetch API 等語言,將權杖附加至預先定義的要求標頭。

    下列範例指令碼說明如何保護 execute 動作,並使用 JavaScript + XHR 將權杖附加至預先定義的要求標頭:

      
      <script>
        src="https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_KEY"></script>
    
        <script>
        function onSuccess(action_token) {
             const xhr = new XMLHttpRequest();
             xhr.open('GET','YOUR_URL', false);
             // Attach the action-token to the predefined request header
             xhr.setRequestHeader("X-Recaptcha-Token", action_token);
             xhr.send(null);
           }
           function onError(reason) {
             alert('Response promise rejected: ' + reason);
           grecaptcha.enterprise.ready(function () {
             document.getElementById("execute-button").onclick = () => {
               grecaptcha.enterprise.execute('ACTION_TOKEN_KEY', {
               }).then(onSuccess, onError);
             };
           });
          }
        </script>
      
      

session-token

評估完成後,reCAPTCHA JavaScript 會在使用者瀏覽器上,將 reCAPTCHA 工作階段權杖設為 Cookie。只要 reCAPTCHA JavaScript 保持啟用狀態,使用者瀏覽器就會附加 Cookie 並重新整理 Cookie。

如要以 Cookie 形式提供工作階段權杖,請在至少一個網頁上安裝工作階段權杖金鑰,使用者必須先瀏覽這些網頁,才能存取需要保護的網頁。舉例來說,如要保護結帳頁面,請在首頁或產品頁面安裝工作階段權杖金鑰。

您可以在網頁中加入 reCAPTCHA JavaScript,方法是在為 Cloudflare 安裝 reCAPTCHA 套件時設定 wrangler.toml 檔案,也可以在網頁中安裝工作階段金鑰。從 Cloudflare 納入 reCAPTCHA JavaScript,即可使用工作階段符記金鑰整合 reCAPTCHA,不必在網頁上手動安裝金鑰。

您可以使用這個 Cookie,保護特定網域中後續的使用者要求和網頁載入作業。工作階段符記的預設效期為 30 分鐘。不過,如果使用者停留在您導入工作階段符記的網頁,reCAPTCHA 會定期重新整理工作階段符記,避免符記過期。

在需要 reCAPTCHA 保護的每個網頁上安裝工作階段符記。 建議您使用 reCAPTCHA 保護每個網頁,並使用 Google Cloud Armor 規則,在使用者瀏覽的第一個網頁以外的所有網頁上強制執行存取權。

以下是 reCAPTCHA 工作階段權杖範例:
   recaptcha-ca-t=value-of-your-session-token;domain=domain;expires=expiration_time

如要實作 reCAPTCHA 工作階段權杖,請按照下列步驟操作:

  1. 為網站建立工作階段符記金鑰。 <0x

    gcloud

    如要建立 reCAPTCHA 金鑰,請使用 gcloud recaptcha keys create 指令。

    使用下方的任何指令資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • INTEGRATION_TYPE:整合類型。 指定 score
    • DOMAIN_NAME:允許使用金鑰的網站網域或子網域。

      以逗號分隔清單的形式指定多個網域。 選用:指定 --allow-all-domains 停用網域驗證。

      停用網域驗證會造成安全風險,因為網站沒有任何限制,任何人都能存取及使用 reCAPTCHA 金鑰。

    • WAF_FEATURE:網路應用程式防火牆功能的名稱。 指定 session-token
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    執行 gcloud recaptcha keys create 指令:

    Linux、macOS 或 Cloud Shell

    gcloud recaptcha keys create \
    --web \
    --display-name=DISPLAY_NAME  \
    --integration-type=INTEGRATION_TYPE \
    --domains=DOMAIN_NAME \
    --waf-feature=WAF_FEATURE \
    --waf-service=WAF_SERVICE

    Windows (PowerShell)

    gcloud recaptcha keys create `
    --web `
    --display-name=DISPLAY_NAME  `
    --integration-type=INTEGRATION_TYPE `
    --domains=DOMAIN_NAME `
    --waf-feature=WAF_FEATURE `
    --waf-service=WAF_SERVICE

    Windows (cmd.exe)

    gcloud recaptcha keys create ^
    --web ^
    --display-name=DISPLAY_NAME  ^
    --integration-type=INTEGRATION_TYPE ^
    --domains=DOMAIN_NAME ^
    --waf-feature=WAF_FEATURE ^
    --waf-service=WAF_SERVICE

    回應包含新建立的 reCAPTCHA 金鑰。

    REST

    如要查看金鑰類型和整合類型的 API 參考資訊,請參閱「金鑰」和「整合類型」。

    使用任何要求資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • INTEGRATION_TYPE:整合類型。 指定 score
    • DOMAIN_NAME:允許使用金鑰的網站網域或子網域。

      以逗號分隔清單的形式指定多個網域。 選用:指定 --allow-all-domains 停用網域驗證。

      停用網域驗證會造成安全風險,因為網站沒有任何限制,任何人都能存取及使用 reCAPTCHA 金鑰。

    • WAF_FEATURE:網路應用程式防火牆功能的名稱。 指定 session-token
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    HTTP 方法和網址:

    POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

    JSON 要求主體:

    
    {
      "displayName": "DISPLAY_NAME",
       'wafSettings': "  {
           "wafService": "WAF_SERVICE",
      
    "wafFeature": "WAF_FEATURE"
      }
      "webSettings": {
        "allowedDomains": "DOMAINS",
        "integrationType": "TYPE_OF_INTEGRATION"
       }
       
    }
    

    如要傳送要求,請選擇以下其中一個選項:

    curl

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json; charset=utf-8" \
    -d @request.json \
    "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

    PowerShell

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    $cred = gcloud auth print-access-token
    $headers = @{ "Authorization" = "Bearer $cred" }

    Invoke-WebRequest `
    -Method POST `
    -Headers $headers `
    -ContentType: "application/json; charset=utf-8" `
    -InFile request.json `
    -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

    您應該會收到如下的 JSON 回應:

    
    {
      "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
    "displayName": "DISPLAY_NAME,
    
    "webSettings": {
      "allowAllDomains": true,
      "allowedDomains": [
        "localhost"
      ],
    
     "integrationType": "SCORE",
    
    
    },
    "wafSettings": {
      "wafService": "cloudflare",
    
      "wafFeature": "SESSION_TOKEN"
    
    
    }
    }
    
    

    請記下工作階段權杖金鑰,稍後會用到。

    如要從 Cloudflare 插入 reCAPTCHA JavaScript,請略過下一個步驟,並設定 wranger.toml

  2. 將 session-token 金鑰和 waf=session 新增至 reCAPTCHA JavaScript。

    下列範例指令碼說明如何在網頁上實作工作階段權杖:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>reCAPTCHA WAF Session Token</title>
     <script src="https://www.google.com/recaptcha/enterprise.js?render=SESSION_TOKEN_KEY&waf=session" async defer></script>
     <body></body>
    </head>
    </html>

challenge-page

導入 reCAPTCHA 驗證頁面時,reCAPTCHA 會重新導向至插頁式廣告,判斷是否需要向使用者顯示人機驗證問題。因此,部分使用者可能不會看到人機驗證問題。

如要導入 reCAPTCHA 驗證頁面,請按照下列步驟操作:

  1. 為網站建立驗證頁面金鑰。 <0x

    gcloud

    如要建立 reCAPTCHA 金鑰,請使用 gcloud recaptcha keys create 指令。

    使用下方的任何指令資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • INTEGRATION_TYPE:整合類型。 指定 invisible
    • DOMAIN_NAME:允許使用金鑰的網站網域或子網域。 指定 --allow-all-domains
    • WAF_FEATURE:網路應用程式防火牆功能的名稱。 指定 challenge-page
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    執行 gcloud recaptcha keys create 指令:

    Linux、macOS 或 Cloud Shell

    gcloud recaptcha keys create \
    --web \
    --display-name=DISPLAY_NAME  \
    --integration-type=INTEGRATION_TYPE \
    --domains=DOMAIN_NAME \
    --waf-feature=WAF_FEATURE \
    --waf-service=WAF_SERVICE

    Windows (PowerShell)

    gcloud recaptcha keys create `
    --web `
    --display-name=DISPLAY_NAME  `
    --integration-type=INTEGRATION_TYPE `
    --domains=DOMAIN_NAME `
    --waf-feature=WAF_FEATURE `
    --waf-service=WAF_SERVICE

    Windows (cmd.exe)

    gcloud recaptcha keys create ^
    --web ^
    --display-name=DISPLAY_NAME  ^
    --integration-type=INTEGRATION_TYPE ^
    --domains=DOMAIN_NAME ^
    --waf-feature=WAF_FEATURE ^
    --waf-service=WAF_SERVICE

    回應包含新建立的 reCAPTCHA 金鑰。

    REST

    如要查看金鑰類型和整合類型的 API 參考資訊,請參閱「金鑰」和「整合類型」。

    使用任何要求資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • INTEGRATION_TYPE:整合類型。 指定 invisible
    • DOMAIN_NAME:允許使用金鑰的網站網域或子網域。 指定 --allow-all-domains
    • WAF_FEATURE:網路應用程式防火牆功能的名稱。 指定 challenge-page
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    HTTP 方法和網址:

    POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

    JSON 要求主體:

    
    {
      "displayName": "DISPLAY_NAME",
       'wafSettings': "  {
           "wafService": "WAF_SERVICE",
      
    "wafFeature": "WAF_FEATURE"
      }
      "webSettings": {
        "allowedDomains": "DOMAINS",
        "integrationType": "TYPE_OF_INTEGRATION"
       }
       
    }
    

    如要傳送要求,請選擇以下其中一個選項:

    curl

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json; charset=utf-8" \
    -d @request.json \
    "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

    PowerShell

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    $cred = gcloud auth print-access-token
    $headers = @{ "Authorization" = "Bearer $cred" }

    Invoke-WebRequest `
    -Method POST `
    -Headers $headers `
    -ContentType: "application/json; charset=utf-8" `
    -InFile request.json `
    -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

    您應該會收到如下的 JSON 回應:

    
    {
      "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
    "displayName": "DISPLAY_NAME,
    
    "webSettings": {
      "allowAllDomains": true,
      "allowedDomains": [
        "localhost"
      ],
    
      "integrationType": "INVISIBLE",
     
    
    },
    "wafSettings": {
      "wafService": "cloudflare",
    
      "wafFeature": "CHALLENGE_PAGE"
      
    
    }
    }
    
    

    請記下驗證頁面金鑰,稍後會用到。

  2. 如要將使用者重新導向至 reCAPTCHA 驗證頁面並接收 reCAPTCHA 權杖,請在受保護的網頁上建立防火牆政策,並設定 redirect 動作。

快速

如要導入 reCAPTCHA Express,請建立 Express 金鑰。

  1. In the Google Cloud console, activate Cloud Shell.

    Activate Cloud Shell

    At the bottom of the Google Cloud console, a Cloud Shell session starts and displays a command-line prompt. Cloud Shell is a shell environment with the Google Cloud CLI already installed and with values already set for your current project. It can take a few seconds for the session to initialize.

  2. gcloud

    如要建立 reCAPTCHA 金鑰,請使用 gcloud recaptcha keys create 指令。

    使用下方的任何指令資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    執行 gcloud recaptcha keys create 指令:

    Linux、macOS 或 Cloud Shell

    gcloud recaptcha keys create \
    --express \
    --display-name=DISPLAY_NAME  \
    --waf-service=WAF_SERVICE

    Windows (PowerShell)

    gcloud recaptcha keys create `
    --express `
    --display-name=DISPLAY_NAME  `
    --waf-service=WAF_SERVICE

    Windows (cmd.exe)

    gcloud recaptcha keys create ^
    --express ^
    --display-name=DISPLAY_NAME  ^
    --waf-service=WAF_SERVICE

    回應包含新建立的 reCAPTCHA 金鑰。

    REST

    如要查看金鑰類型和整合類型的 API 參考資訊,請參閱「金鑰」和「整合類型」。

    使用任何要求資料之前,請先替換以下項目:

    • DISPLAY_NAME:金鑰名稱。通常是網站名稱。
    • WAF_SERVICE:網路應用程式防火牆服務供應商的名稱。請為 Cloudflare 指定 cloudflare

    HTTP 方法和網址:

    POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

    JSON 要求主體:

    
    {
      "displayName": "DISPLAY_NAME",
       'wafSettings': "  {
           "wafService": "WAF_SERVICE",
      
    }
    

    如要傳送要求,請選擇以下其中一個選項:

    curl

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    curl -X POST \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json; charset=utf-8" \
    -d @request.json \
    "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

    PowerShell

    將要求主體儲存在名為 request.json 的檔案中,然後執行下列指令:

    $cred = gcloud auth print-access-token
    $headers = @{ "Authorization" = "Bearer $cred" }

    Invoke-WebRequest `
    -Method POST `
    -Headers $headers `
    -ContentType: "application/json; charset=utf-8" `
    -InFile request.json `
    -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

    您應該會收到如下的 JSON 回應:

    
    {
      "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
    "displayName": "DISPLAY_NAME,
    
    },
    "wafSettings": {
      "wafService": "cloudflare",
    
      
    
    }
    }
    
    

    請記下快速鍵,稍後會用到。

與 Cloudflare 整合

如要使用 reCAPTCHA 防火牆政策,您必須部署及設定 Cloudflare Worker 無伺服器應用程式。

開始整合程序前,請先完成下列步驟:

  1. 建立 CLOUDFLARE_API_TOKEN,然後選擇「Edit Cloudflare Workers」(編輯 Cloudflare Workers) 範本。請記下 API 權杖,稍後會用到。

  2. 取得 Cloudflare API 帳戶 ID,並記下以供日後使用。

安裝 Cloudflare 適用的 reCAPTCHA 套件

  1. 下載並安裝 Cloudflare 適用的 reCAPTCHA 套件:

    1. In the Google Cloud console, activate Cloud Shell.

      Activate Cloud Shell

      At the bottom of the Google Cloud console, a Cloud Shell session starts and displays a command-line prompt. Cloud Shell is a shell environment with the Google Cloud CLI already installed and with values already set for your current project. It can take a few seconds for the session to initialize.

    2. 安裝 wrangler 套件:

       npm install -g wrangler
      
    3. 下載 Cloudflare 適用的 reCAPTCHA 套件:

      wget --load-cookies /tmp/cookies.txt https://dl.google.com/recaptchaenterprise/cloudflare_client/releases/recaptcha_cloudflare_client_0.0.2.tar.gz -O recaptcha_cloudflare_client_0.0.2.tar.gz && rm -rf /tmp/cookies.txt
      
    4. 解壓縮 Cloudflare 的 reCAPTCHA 套件:

      tar -xvzf recaptcha_cloudflare_client_0.0.2.tar.gz
      
  2. wrangler.toml 檔案中,於 vars 區段設定下列變數:

    • API_KEY:您為驗證建立的 Google Cloud API 金鑰。
    • PROJECT_NUMBER:您的 Google Cloud 專案編號。
    • RECAPTCHA_EXPRESS_SITE_KEY:如果您使用 reCAPTCHA Express,請輸入 Express 金鑰。
    • RECAPTCHA_SESSION_SITE_KEY:如果您使用 reCAPTCHA 工作階段權杖,則為工作階段權杖金鑰。
    • RECAPTCHA_ACTION_SITE_KEY:如果您使用 reCAPTCHA 動作權杖,則為動作權杖金鑰。
    • RECAPTCHA_CHALLENGE_SITE_KEY:如果您使用 reCAPTCHA 驗證頁面,請提供驗證頁面金鑰。
    • RECAPTCHA_JS_INSTALL_PATH:您希望 Cloudflare Worker 使用工作階段權杖金鑰安裝 reCAPTCHA JavaScript 的網頁網址。以 glob 模式指定路徑,並使用 ; 做為分隔符號。這個選項僅適用於 reCAPTCHA 工作階段權杖。
  3. 部署應用程式:

    wrangler deploy
    

設定 Cloudflare 路由至 Worker 應用程式

  1. 登入 Cloudflare 資訊主頁,然後選取帳戶。
  2. 在導覽選單中,按一下「Workers & Pages」,然後選取 Worker 應用程式。
  3. 按一下「觸發條件」分頁標籤,然後點選「新增路徑」
  4. 在「Add route」(新增路徑) 對話方塊中,輸入需要 reCAPTCHA 保護的網頁路徑,選取適當的區域,然後按一下「Add route」(新增路徑)。

後續步驟