このデモでは、Next.js 上に構(gòu)築された React アプリケーション內(nèi)で Google ReCAPTCHA v3 認(rèn)証情報を使用します。 ReCAPTCHA トークンはクライアント側(cè)で生成され、サーバー側(cè)で検証されます。

リンク

• デモ

• コードベース

ステップ 1: ReCAPTCHA 資格情報を生成する

Google ReCaptcha V3 に移動し、認(rèn)証情報を生成します。

ステップ 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 を使用する場合は、ブラウザーで公開されるすべての環(huán)境変數(shù)に接頭辭 NEXT_PUBLIC が付いていることを確認(rèn)してください。

ユーザーがログインをクリックすると、アプリは grecaptcha オブジェクトから 2 つのメソッドを呼び出してキャプチャを自動的に生成します。

• window.grecaptcha.enterprise.ready: これにより、Google reCAPTCHA オブジェクトの準(zhǔn)備が整ったことを確認(rèn)します。
• window.grecaptcha.enterprise.execute: これにより、キャプチャ トークンが生成されます。

最後に、データは生成されたキャプチャ トークンとともにバックエンド (私の場合は 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 }),
  });
};

注: フォームを使用している場合は、ユーザー名、名前、フォームが収集する追加データなどの他のフィールド値も含めることになります。

ステップ 4: バックエンドでキャプチャを検証する

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 (環(huán)境変數(shù)として保存) とクライアントで生成された Captcha トークンを渡すバックエンド メソッドです。

キャプチャが有効な場合、API 応答は次のようになります:

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

結(jié)論

ReCaptcha は、特にボットによるフォームの送信を防止する場合、フォームを保護(hù)するために重要です。 Google は、月あたり最大 10,000 件の評価を提供する無料枠を提供しており (この記事の執(zhí)筆時點)、多くのアプリケーションにとって確実な選択肢となっています。 Google が提供するライブラリを使用すると、統(tǒng)合が簡単になります。資格情報を渡すだけです: クライアント側(cè)では SITE_KEY、サーバー側(cè)では SECRET_KEY を渡します。

覚えておくべき重要な點は、アプリケーションのセキュリティが危険にさらされる可能性があるため、SECRET_KEY をクライアント側(cè)で決して公開しないことです。 SITE_KEY のみがクライアントを?qū)澫螭趣筏皮い蓼埂?/p>

以上がReact: ReCAPTCHA vlient とサーバーのデモの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。