Zenn Dev Ryo Kawamata Articles 2cc787af09ebce
Astro + Vercel Serverless FunctionsでのreCAPTCHA v3の導入例
- URL: https://zenn.dev/ryo_kawamata/articles/2cc787af09ebce
- 日付: 2026-06-26
- Tier: Tier 3
- 要旨: AstroとVercel Serverless Functionsを使ったWebサイトにreCAPTCHA v3を導入する実装例。reCAPTCHA v3はバックグラウンドでユーザーの動きを検証してスコアを返す方式のため、「私はロボットではありません」チェックは不要。Server側はAstroのServer Endpointsとして実装し、シークレットキーとフロントエンドから受け取ったトークンでスコアを取得する。Vercelへのデプロイ時はhybrid出力モードと@astrojs/vercelアダプターを使い、reCAPTCHA APIエンドポイントのみサーバーサイドレンダリングとする設定が必要。
詳細
reCAPTCHA v3の概要
- バックグラウンドでユーザーの行動を解析してスコア（0.0〜1.0）を返す
- チェックボックスや画像選択操作が不要
実装構成（Astro + Vercel Serverless Functions）
- reCAPTCHAコンソールでサイト登録
- サイトキーとシークレットキーを取得
- ドメインを登録
- Server側（Astro Server Endpoints）
- src/pages/api/recaptcha.ts を作成
- シークレットキー＋フロントエンドから受け取ったトークンをGoogleのAPIに送信してスコア取得
- ファイル先頭に
export const prerender = false;を追加（hybridモードでSSRを有効化）
- Client側
- サイトキーをクエリパラメーターに含めてreCAPTCHAライブラリを読み込み
- 送信ボタン押下時に
grecaptcha.ready→grecaptcha.executeでトークン取得 - トークンをAPIに送信してスコアを取得
- AstroコンポーネントとReactコンポーネント両方の実装例を提供
- Vercelデプロイの設定
npx astro add @astrojs/vercelでアダプターを追加- astro.config.mjs で
output: "hybrid"とadapter: vercel()を設定 - hybrid モード: デフォルトはプリレンダリング、
export const prerender = falseのファイルのみSSR