個人開発中の日記アプリでお問い合わせフォームにreCAPTCHA v3を導入したので、その記録をまとめました。
フロントエンドは Next.js (App Router)、フォーム送信には Backform を利用しています。
この記事では、Next.js(App Router)でreCAPTCHA v3を導入するための具体的な手順と、つまずきやすいポイントを解説していきます。
v2とv3の違いはこちらの記事を参照。
目次
reCAPTCHA v3 導入手順
1. Google reCAPTCHA 管理画面でキーを発行
Google reCAPTCHAのサイト登録画面にて、サイトを登録。
- v3 を選択
- 対象ドメインを登録（本番・ステージング・localhost）
「送信」すると、以下の2種類のキーが発行されます。
- サイトキー（フロント用）
- シークレットキー（Backform に登録する）
サイトキーはフロント、シークレットキーは Backform で管理します。
2. Backform 側でシークレットキーを登録
Backform の管理画面で該当フォームの設定画面を開く。基本設定＞Google reCAPTCHA v3の設定より下記を設定し、保存する。
- Google reCAPTCHA v3を有効にする にチェック
- 先ほど発行されたシークレットキーを入力
3. Next.js 側でサイトキーを環境変数に設定
Loading code...4. フロントエンドに reCAPTCHA スクリプトを追加
app/layout.tsx などで <head> 内に script タグを追加します
Loading code...5. フォーム送信時にトークンを付与
もともと作成していたフォームのコンポーネントに下記を追記。
Loading code...以上で設定完了しました 🎉
ハマりポイント
ステージングでメール送信がエラーになる問題
- Backform 側の「送信後リダイレクトURL」が本番になっていた
- ステージング用に設定していなかったため
?error=reCAPTCHA verification failedが出ていた
ドメイン登録忘れ
- reCAPTCHA 管理画面で、本番・ステージング・localhost 全て登録しておくこと
v2 と v3 のキーを間違えて使っていた
- v2 用のキーでは v3 の API が使えないので注意
実装後の挙動
- 問い合わせ送信時に reCAPTCHA が自動実行され、スパム送信を防げるようになった（はず）
- ユーザー側は「チェックボックスなし」で自然に送信できるので良い感じ。
