過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<h2>エラー内容</h2>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff">ERROR for site owner: Invalid site key</span></p>
			</td>
		</tr>
	</tbody>
</table>

<p>reCAPTCHA を画面に表示しようとしたとき、reCAPTCHA ウィジェットの代わりに赤いエラーメッセージが表示されるケースです。サイトオーナー宛のメッセージで、利用者には表示されないようサーバー側で対処する必要があります。</p>

<h2>発生条件 / 原因</h2>

<ul>
	<li><strong>site_key（サイトキー）が誤っている</strong> &mdash; キー文字列が間違っている／別のサイトのキーを貼り付けている</li>
	<li><strong>reCAPTCHA管理画面の Domains 一覧に、現在表示しているドメインが登録されていない</strong></li>
	<li><strong>reCAPTCHA v2 / v3 / Invisible のバージョンが混在</strong> &mdash; v2用キーで v3 のスクリプトを読み込んでいる等</li>
	<li><strong>Enterprise版のキー</strong>を無料版のスクリプトで使っている（またはその逆）</li>
	<li><strong>secret_key（サーバー側で使う方）を site_key 側に貼ってしまった</strong></li>
</ul>

<h2>対処法</h2>

<h3>1. site_key の値を確認</h3>

<p><a href="https://www.google.com/recaptcha/admin">reCAPTCHA 管理画面</a>を開き、対象サイトの設定から <strong>サイトキー（site_key）</strong>と <strong>シークレットキー（secret_key）</strong>を確認します。</p>

<ul>
	<li><strong>site_key</strong>: フロントエンドの <code>data-sitekey</code> や <code>grecaptcha.render</code> で使う</li>
	<li><strong>secret_key</strong>: サーバー側で検証APIを叩くときに使う</li>
</ul>

<p>両者を取り違えていないか必ず確認します。</p>

<h3>2. Domains 一覧に現在のドメインが含まれているか</h3>

<p>管理画面の対象サイト &rarr; 設定 &rarr; <strong>Domains</strong> に、HTMLが配信されているドメインが登録されているかを確認します。サブドメインで配信している場合は、そのサブドメインも追加する必要があります。</p>

<ul>
	<li><strong>localhost</strong>: 開発用にlocalhostを追加することも可能</li>
	<li><strong>サブドメイン</strong>: <code>example.com</code> を登録すれば <code>www.example.com</code> 等も対象（一部例外あり）</li>
	<li><strong>IP直接</strong>: 数値IPは登録不可</li>
</ul>

<h3>3. reCAPTCHA のバージョンを合わせる</h3>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<thead>
		<tr><th>バージョン</th><th>スクリプト読み込み</th><th>HTML</th></tr>
	</thead>
	<tbody>
		<tr><td>v2 チェックボックス</td><td><code>https://www.google.com/recaptcha/api.js</code></td><td><code><div class="g-recaptcha" data-sitekey="..."></div></code></td></tr>
		<tr><td>v2 Invisible</td><td><code>https://www.google.com/recaptcha/api.js</code></td><td>同上 + <code>data-size="invisible"</code></td></tr>
		<tr><td>v3</td><td><code>https://www.google.com/recaptcha/api.js?render=サイトキー</code></td><td>不要（JSで <code>grecaptcha.execute</code>）</td></tr>
	</tbody>
</table>

<p>管理画面で発行されたバージョンに合うHTML/JSを使います。</p>

<h3>4. 実装の確認例（v2）</h3>

<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
	<tbody>
		<tr>
			<td style="background-color:#000000">
			<p><span style="color:#ffffff"><script src="https://www.google.com/recaptcha/api.js" async defer></script><br />
			<form action="/submit" method="POST"><br />
			&nbsp; &nbsp; <div class="g-recaptcha" data-sitekey="ここにsite_key"></div><br />
			&nbsp; &nbsp; <button type="submit">送信</button><br />
			</form></span></p>
			</td>
		</tr>
	</tbody>
</table>

<h2>注意点</h2>

<ul>
	<li><strong>site_key は公開情報</strong>で漏れても問題ない。<strong>secret_key</strong> はサーバー専用、絶対にHTMLに出さない</li>
	<li>ドメイン変更時は管理画面の Domains を必ず更新する</li>
	<li>本番ドメインと開発ドメインで別のキーを使い分けると安全（誤って本番キーが開発に出回るのを防げる）</li>
	<li>Cloudflare等のCDN経由で複数ドメインから配信している場合、全ドメインを登録する</li>
</ul>