在此演示中，我將在基于 Next.js 構(gòu)建的 React 應(yīng)用程序中使用 Google ReCAPTCHA v3 憑據(jù)。 ReCAPTCHA 令牌將在客戶端生成并在服務(wù)器端驗(yàn)證。

鏈接

• 演示

• 代碼庫

第 1 步：生成您的 ReCAPTCHA 憑證

前往 Google ReCaptcha V3 并生成您的憑據(jù)。

第2步：導(dǎo)入ReCaptcha庫

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

注意：您可以使用一些包，但實(shí)現(xiàn)很簡單。

第 3 步：在點(diǎn)擊處理程序中調(diào)用執(zhí)行方法

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 是導(dǎo)入腳本注入的對象。

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

當(dāng)用戶單擊登錄時，應(yīng)用程序會通過調(diào)用 grecaptcha 對象中的兩個方法自動為其生成驗(yàn)證碼：

• window.grecaptcha.enterprise.ready：這確保 Google reCAPTCHA 對象已準(zhǔn)備就緒。
• window.grecaptcha.enterprise.execute：這會生成驗(yàn)證碼令牌。

最后，數(shù)據(jù)連同生成的驗(yàn)證碼令牌一起發(fā)送到后端（在我的例子中，我使用 Lambda 函數(shù)）。

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

注意：如果您使用表單，您還需要包含其他字段值，例如用戶名、名稱或表單收集的任何其他數(shù)據(jù)。

第四步：在后端驗(yàn)證驗(yàn)證碼

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 是一個調(diào)用 Google API 端點(diǎn)的后端方法，傳遞 SECRET_KEY（存儲為環(huán)境變量）和客戶端生成的驗(yàn)證碼令牌。

如果驗(yàn)證碼有效，API 響應(yīng)將如下所示：

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

結(jié)論

ReCaptcha 對于保護(hù)表單至關(guān)重要，尤其是當(dāng)您希望阻止機(jī)器人提交表單時。 Google 提供免費(fèi)套餐，每月最多可提供 10,000 次評估（截至撰寫本文時），這使其成為許多應(yīng)用程序的可靠選擇。谷歌提供的庫使集成變得更加容易。您只需要傳遞您的憑據(jù)：客戶端上的 SITE_KEY 和服務(wù)器端上的 SECRET_KEY。

要記住的一個關(guān)鍵點(diǎn)是 SECRET_KEY 永遠(yuǎn)不應(yīng)該在客戶端公開，因?yàn)檫@可能會損害應(yīng)用程序的安全性。只有 SITE_KEY 是供客戶端使用的。

以上是React：ReCAPTCHA vlient 和服務(wù)器演示的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！