reCAPTCHAが表示されない・認証できないときの確認点

reCAPTCHAの仕組みとドメイン制約

reCAPTCHAは、フォーム送信などが人間によるものか自動化されたものかを判定するボット対策の仕組みです。利用には管理コンソールで「サイトキー」を発行し、HTMLに組み込んで使います。

重要なのは、サイトキー発行時に「このキーを使うドメイン」を登録する点です。reCAPTCHAは、実際に読み込まれたページのドメインが登録ドメインと一致するかを検証します。

一致しないと、表示されなかったりエラーになったりします。つまり、同じHTMLでもどのドメインで開くかによって動いたり動かなかったりするのです。

表示されない・認証できない典型パターン

最も多いのは、サイトキーに登録したドメインと、ページを表示しているドメインが違うケースです。ローカルや別の共有環境で開くと、登録ドメインと食い違って動かないことがあります。

サイトキーの記述ミス(コピー漏れや別環境のキーの流用)、reCAPTCHAのスクリプト読み込み失敗も原因になります。コンソールにキー不正やドメイン不一致のエラーが出ていないか確認するのが近道です。

CSPで reCAPTCHA の配信元スクリプトやフレームの読み込みを許可していないと、ブロックされて表示されないこともあります。

症状別チェック表

reCAPTCHAが表示されない・認証できないときの確認点は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因を切り分ける手順

ドメイン一致・キー・読み込みの三点を順に確認すると、原因にたどり着けます。

1. 開発者ツールのConsoleで、ドメイン不一致やキー不正のエラーが出ていないか確認する
2. 現在表示しているページのドメインを正確に把握する
3. reCAPTCHA管理コンソールで、そのドメインがサイトキーに登録されているか確認する
4. HTMLに埋め込んだサイトキーが正しい環境のものか確認する
5. Networkタブで reCAPTCHA のスクリプトとフレームが読み込めているか確認する
6. CSPで配信元のスクリプト・フレームが許可されているか確認する

共有URLのドメイン不一致という落とし穴

確認用にHTMLを別のドメインで共有すると、本番ドメイン向けに発行したサイトキーでは検証が通らないことがあります。これはreCAPTCHAの仕様どおりの挙動で、不具合ではありません。

対処としては、確認に使うドメインもサイトキーの登録ドメインに加える、または確認環境用に別のサイトキーを用意する方法があります。本番とは別のキーを使えば、本番設定を触らずに検証できます。

サブドメインの扱いは登録設定に依存するため、共有先のサブドメインが登録範囲に含まれるかを必ず確認します。

確認共有の場面での進め方

ギガサイト便の公開URLは 〇〇.giga-site.com 形式のサブドメインになります。reCAPTCHAを含むフォームを確認共有する場合は、このドメインをサイトキーの登録ドメインに加えるか、確認用の別キーを使うと検証が通りやすくなります。本番ドメイン専用のキーのままだと、共有先で認証が通らない点に注意してください。

ギガサイト便は同じURLのままHTMLを差し替えられるので、サイトキーやCSPを直した版をすぐ反映して再確認できます。アクセスログで誰が確認したかも追えるため、フォーム動作の検証を依頼しやすくなります。