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 オブジェクトから 2 つのメソッドを呼び出してキャプチャを自動的に生成します。

• 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 }),
  });
};

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

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

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

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

結論

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

覚えておくべき重要な点は、アプリケーションのセキュリティが危険にさらされる可能性があるため、SECRET_KEY をクライアント側で決して公開しないことです。 SITE_KEY のみがクライアントを対象としています。

以上がReact: ReCAPTCHA vlient とサーバーのデモの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。