Google reCAPTCHA v2 の導入

API キーの取得#

まず、https://www.google.com/recaptcha/admin/create にアクセスし、ウェブサイトに「人間との確認を行う」チェックボックスの第 2 版を作成します。作成が完了すると、2 つのキーが取得できます。

ウェブサイトキーは、クライアント側での検証に使用されます。一方、下記の通信キーは、ユーザーの応答の検証に使用されます。

クライアント#

コントロールの構造とシンプルなスタイル#

<div id="robot"></div>

#robot {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 270px;
}

@media screen and (max-width: 768px) {
  #robot {
    bottom: 200px;
  }
}

スタイルは、必要に応じて自由に調整してください。

スクリプト#

JavaScript を書く前に、リソースをロードする必要があります。

<script
  src="https://www.google.com/recaptcha/api.js?render=explicit"
  async
  defer
></script>

その後、コードを書くことができます。

export const googleVerify = () => {
  if (!grecaptcha.render) return;

  grecaptcha.render("robot", {
    sitekey: "ウェブサイトキー",
    callback: function (token) {
      // 検証が成功した場合
    },
  });
};

googleVerifyメソッドが呼び出されると、renderメソッドを使用してコントロールがページにレンダリングされます。検証が成功すると、callbackが実行され、トークンが渡されます。セキュリティを確保するために、トークンをバックエンドに渡して最終的な検証を行う必要があります。

サーバー#

https://developers.google.com/recaptcha/docs/verify?hl=en#api_request を参照すると、サーバー側で行う必要があるのは、Google reCAPTCHA の API を使用して検証リクエストを送信することです。Express のミドルウェアを例にすると、具体的な処理は次のようになります：

const verifyGoogleToken: RequestHandler = async (req, res, next) => {
  const { token } = req.body;

  const { data } = await axios({
    url: "https://www.google.com/recaptcha/api/siteverify",
    method: "post",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    data: `secret=${通信キー}&response=${token}`,
  });

  if (data && data.success) {
    next();
  } else {
    res.send("google verify failed");
  }
};

これで完全な検証プロセスが完了しました。