React：ReCAPTCHA vlient 和伺服器演示

在此示範中，我將在基於 Next.js 建立的 React 應用程式中使用 Google ReCAPTCHA v3 憑證。 ReCAPTCHA 令牌將在客戶端產生並在伺服器端驗證。

連結

• 示範

• 程式碼庫

步驟 1：產生您的 ReCAPTCHA 憑證

前往 Google ReCaptcha V3 並產生您的憑證。

步驟2：導入ReCaptcha庫

<Script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY}`} />

注意：您可以使用一些包，但實作很簡單。

第 3 步：在點擊處理程序中呼叫執行方法

const loginClickHandler = (event) => {
  event.preventDefault();

  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute(
      process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY,
      { action: "LOGIN" }
    );

    await submit(token);
  });
};

grecaptcha 是導入腳本注入的物件。

注意：使用 Next.js 時，請確保瀏覽器中公開的所有環境變數都以 NEXT_PUBLIC 為前綴。

當使用者按一下登入時，應用程式會透過呼叫 grecaptcha 物件中的兩個方法自動為其產生驗證碼：

• window.grecaptcha.enterprise.ready：這可確保 Google reCAPTCHA 物件已準備就緒。
• window.grecaptcha.enterprise.execute：這會產生驗證碼令牌。

最後，資料連同產生的驗證碼令牌一起傳送到後端（在我的例子中，我使用 Lambda 函數）。

const submit = async (code) => {
  await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ code }),
  });
};

注意：如果您使用表單，您還需要包含其他欄位值，例如使用者名稱、名稱或表單收集的任何其他資料。

第四步：在後端驗證驗證碼

const validateReCaptcha = async (captcha) => {
  const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RE_CAPTCHA_SECRET_KEY}&response=${captcha}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ captcha }),
  });

  return response.json();
};

validateReCaptcha 是呼叫 Google API 端點的後端方法，傳遞 SECRET_KEY（儲存為環境變數）和用戶端產生的驗證碼令牌。

如果驗證碼有效，API 回應將如下所示：

{
  "success": true,
  "challenge_ts": "2024-11-24T03:04:34Z",
  "hostname": "localhost",
  "score": 0.9
}

結論

ReCaptcha 對於保護表單至關重要，尤其是當您希望阻止機器人提交表單時。 Google 提供免費套餐，每月最多可提供 10,000 次評估（截至撰寫本文時），這使其成為許多應用程式的可靠選擇。谷歌提供的庫使整合變得更加容易。您只需要傳遞您的憑證：客戶端上的 SITE_KEY 和伺服器端上的 SECRET_KEY。

要記住的一個關鍵點是 SECRET_KEY 永遠不應該在客戶端公開，因為這可能會損害應用程式的安全性。只有 SITE_KEY 是供客戶端使用的。

以上是React：ReCAPTCHA vlient 和伺服器演示的詳細內容。更多資訊請關注PHP中文網其他相關文章！