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

連結(jié)

• 示範(fàn)

• 程式碼庫(kù)

步驟 1：產(chǎn)生您的 ReCAPTCHA 憑證

前往 Google ReCaptcha V3 並產(chǎn)生您的憑證。

步驟2：導(dǎo)入ReCaptcha庫(kù)

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

注意：您可以使用一些包，但實(shí)作很簡(jiǎn)單。

第 3 步：在點(diǎn)擊處理程序中呼叫執(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 時(shí)，請(qǐng)確保瀏覽器中公開(kāi)的所有環(huán)境變數(shù)都以 NEXT_PUBLIC 為前綴。

當(dāng)使用者按一下登入時(shí)，應(yīng)用程式會(huì)透過(guò)呼叫 grecaptcha 物件中的兩個(gè)方法自動(dòng)為其產(chǎn)生驗(yàn)證碼：

• window.grecaptcha.enterprise.ready：這可確保 Google reCAPTCHA 物件已準(zhǔn)備就緒。
• window.grecaptcha.enterprise.execute：這會(huì)產(chǎn)生驗(yàn)證碼令牌。

最後，資料連同產(chǎn)生的驗(yàn)證碼令牌一起傳送到後端（在我的例子中，我使用 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 }),
  });
};

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

第四步：在後端驗(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 是呼叫 Google API 端點(diǎn)的後端方法，傳遞 SECRET_KEY（儲(chǔ)存為環(huán)境變數(shù)）和用戶端產(chǎn)生的驗(yàn)證碼令牌。

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

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

結(jié)論

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

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

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