【Astro】SSGFromで設定したフォームにreCAPTCHAを設置する
reCAPTCHAとは
reCaptchaは、Googleが提供するセキュリティシステムで、ウェブサイトへの自動アクセスやスパムを防ぐために使用されます。ユーザーに画像や文字を識別させることで、人間とボットを区別します。最新バージョンでは、ユーザーの行動パターンを分析し、クリックするだけで認証が完了します。ウェブサイト運営者は、reCaptchaを導入することで、不正アクセスを防ぎ、セキュリティを強化できます。また、reCaptchaで収集されたデータは、機械学習の改善にも役立てられています。
SSGFormとは
SSGFormは、静的サイト生成（Static Site Generation、SSG）フレームワークであるNext.jsやGatsbyなどで使用できるフォームライブラリです。SSGFormを使用することで、静的サイトにフォーム機能を簡単に追加することができます。
主な特徴は以下の通りです：
1. シンプルなAPI: SSGFormは、フォームの作成や送信処理を簡単に行うためのシンプルなAPIを提供しています。
2. バリデーション: フォームの入力値に対してバリデーションルールを設定し、エラーメッセージを表示することができます。
3. サーバーレス: SSGFormは、サーバーレス環境でのフォーム送信に対応しています。AWS LambdaやNetlifyのようなサーバーレスプラットフォームと統合できます。
4. カスタマイズ可能: フォームのスタイルやレイアウトをカスタマイズすることができます。また、フォーム送信後の動作もカスタマイズ可能です。
5. リアルタイムバリデーション: ユーザーがフォームに入力する際に、リアルタイムでバリデーションを行い、即座にフィードバックを提供できます。
6. 複数のフレームワークに対応: SSGFormは、Next.jsやGatsbyなどの主要な静的サイト生成フレームワークに対応しています。
SSGFormを使用することで、静的サイトにフォーム機能を追加する際の開発工数を削減し、シンプルかつ効率的にフォームを実装することができます。
reCaptchaの設定方法は簡単！
AstroでSSGFormを使用してサイトを構築し、reCaptchaを設定する方法：
- reCaptchaのサイトキーとシークレットキーを取得します。
- Google reCaptchaのウェブサイト（https://www.google.com/recaptcha/admin）にアクセスします。
- 新しいreCaptchaを登録し、サイトキーとシークレットキーを取得します。
2. SSGFormでシークレットキーを設定します。
- reCAPTCHA設定をオンにし、シークレットキーを入力します。
- その他の項目は未入力で大丈夫です。
- フォームのHTMLにreCaptchaを追加します。
- reCaptchaを表示したいフォームのHTMLファイルを開きます。
- 送信ボタンに以下のように
g-recaptchaクラスとデータ属性を追加します：
<button class="g-recaptcha"
data-sitekey="あなたのサイトキー"
data-callback='onSubmit'
data-action='submit'>送信</button>- reCaptchaのスクリプトを読み込みます。
- フォームのHTMLファイルの
<head>タグ内または適切な場所に以下のスクリプトを追加します：
<script src="https://www.google.com/recaptcha/api.js" async defer></script>- onSubmit関数を定義します。
- フォームの近くに以下のようなスクリプトを追加します：
- Astroで構築する場合は、is:inlineを入れてください。
<script is:inline>
function onSubmit(token) {
document.getElementById("form").submit();
}
</script>- サイトをビルドして確認します。
npm run buildコマンドを実行してサイトをビルドします。- ビルドされたサイトをブラウザで開き、フォームにreCaptchaが正しく機能していることを確認します。
注意点：
- reCaptchaを使用するには、サイトがHTTPSで提供されている必要があります。
- ローカル環境では正しく動作しない場合があります。
- reCaptchaのバージョンによって設定方法が異なる場合があるため、公式ドキュメントも参照してください。
この方法で、AstroとSSGFormを使用したサイトにreCaptchaを正しく設定できます。
グリームハブ合同会社は、AIメンバーで価値創出に挑戦する会社です。人材不足が加速する中、AI活用で最前線を走ります。
記事を書いた人
