プラグインを使わないreCAPTCHA導入方法：初心者向けガイド

ウェブサイトのセキュリティ強化は、今日のインターネット環境において不可欠な要素です。

不正なボットアクセスやスパム行為からウェブサイトを保護する効果的な手段の一つが、Googleが提供するreCAPTCHAです。

この記事では、プラグインを使用せずにreCAPTCHAをウェブサイトに導入する方法を、初心者の方にもわかりやすく丁寧に解説します。

自己紹介

私は何者？と言うことで少しだけ自己紹介をさせてください。

ブログを始めて4年2ヶ月（2025/05/01現在）のアラフィフブロガーです。

下記の情報をブログで発信しています。

アナタのお役に立てる情報が「ここにある」そのようなブログを目指しています。

1. reCAPTCHAの目的とウェブサイトセキュリティにおける役割

reCAPTCHAは、ウェブサイトをスパム、悪用、不正行為から保護するために開発された強力なボット対策技術です。

その主な目的は、ウェブサイトへのアクセスが人間によるものなのか、それとも自動化されたボットによるものなのかを判別することです。

これは、人間にとっては容易に判別できるものの、ボットなどの悪意のあるソフトウェアにとっては困難なテスト（画像認証や選択）を通じて実現されます。

ウェブサイトのセキュリティにおいて、reCAPTCHAは多岐にわたる重要な役割を果たします。

例えば

コメントスパムの防止
不正なアカウント登録の阻止
チケットの不正転売対策
ブルートフォースアタックからの保護
コンテンツの不正なスクレイピング防止

などが挙げられます。

reCAPTCHAを導入することで、ウェブサイトの信頼性を高め、ユーザーエクスペリエンスを向上させることが期待できます。

また、高度なリスク分析技術と機械学習を活用することで、reCAPTCHAは進化し続けるボットの脅威に対抗し、常に最新のセキュリティを提供しています。

2. Google reCAPTCHA管理コンソールでのAPIキー取得

reCAPTCHAをウェブサイトに導入するためには、まずGoogle reCAPTCHAの管理コンソールにアクセスし、新しいサイトを登録してAPIキーを取得する必要があります。

以下の手順に従って操作してください。

Google reCAPTCHAのウェブサイト（https://www.google.com/recaptcha/about/）にアクセスします。
「Admin console」ボタンをクリックし、Googleアカウントでログインします。
「新しいサイトを登録」または「＋」アイコンをクリックします。
ラベル（サイト名など、管理しやすい名前）を入力します。
reCAPTCHAのタイプを選択します。
この記事ではv2のチェックボックスタイプを解説します。
ドメインセクションに、reCAPTCHAを導入するウェブサイトのドメイン名を入力します。
（例：example.com）複数のドメインやサブドメインで利用する場合は、それぞれ追加できます。
reCAPTCHA利用規約に同意するチェックボックスをオンにします。
必要に応じて、オーナーを追加します。
「送信」ボタンをクリックします。

登録が完了すると、「サイトキー」と「シークレットキー」が表示されます。

これらのキーは、reCAPTCHAをウェブサイトに実装し、サーバー側で認証を行う際に必要となる重要な情報です。

サイトキーはウェブサイトのフロントエンドで使用され、シークレットキーはサーバーサイドでのみ使用し、安全に保管する必要があります。

上記の手順は以下の記事でも画像付きで詳しくまとめています。

3. ウェブサイトのHTMLへのJavaScriptコード組み込み

取得したサイトキーを使って、ウェブサイトのHTMLにreCAPTCHAの動作に必要なJavaScriptコードを組み込みます。

このコードは、<head>タグ内、またはフォームの直前に記述することが推奨されます。

<head>タグ内に記述する場合：

HTML

<head>
  <title>あなたのウェブサイト</title>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

フォームの直前に記述する場合：

HTML

<body>
  <form action="/submit" method="post">
    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
    <button type="submit">送信</button>
  </form>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>

YOUR_SITE_KEYの部分は、先ほど管理コンソールで取得したあなたのサイトキーに置き換えてください。

asyncとdefer属性を使用することで、ウェブページの読み込みを妨げることなくreCAPTCHAのスクリプトを非同期で読み込むことができます。

4. フォームへのreCAPTCHAウィジェット表示用HTMLコード

reCAPTCHAのウィジェット（「私はロボットではありません」のチェックボックス）をフォームに表示させるためには、適切なHTMLコードをフォーム内に記述する必要があります。

一般的には、<div>要素を使用し、class属性にg-recaptchaを指定し、data-sitekey属性にあなたのサイトキーを設定します。

HTML

<form action="/submit" method="post">
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
  <button type="submit">送信</button>
</form>

このコードをフォーム内の適切な位置に追加することで、reCAPTCHAのチェックボックスが表示されます。

ユーザーがこのチェックボックスをクリックすると、reCAPTCHAの認証プロセスが開始されます。

5. フォーム送信時のトークンをサーバーへ送信する方法

ユーザーがreCAPTCHAを完了すると、トークンと呼ばれる文字列が生成されます。

このトークンは、フォーム送信時にサーバーへ送信する必要があります。

JavaScriptを使用して、フォームの送信イベントを監視し、トークンをフォームデータに追加する方法が一般的です。

JavaScript

function onSubmit(token) {
  document.getElementById("demo-form").submit();
}

そして、フォームの<form>タグにid属性を追加し、reCAPTCHAの<div>要素にdata-callback属性を追加します。

HTML

<form action="/submit" method="post" id="demo-form">
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="onSubmit"></div>
  <button type="submit">送信</button>
</form>

または、より現代的な方法として、フォームのsubmitイベントリスナー内でトークンを取得し、フォームデータに追加する方法もあります。

JavaScript

document.getElementById('demo-form').addEventListener('submit', function(event) {
  event.preventDefault(); // デフォルトの送信処理を停止
  grecaptcha.ready(function() {
    grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
      // トークンをフォームに追加
      var tokenInput = document.createElement('input');
      tokenInput.type = 'hidden';
      tokenInput.name = 'g-recaptcha-response';
      tokenInput.value = token;
      document.getElementById('demo-form').appendChild(tokenInput);
      // フォームを送信
      document.getElementById('demo-form').submit();
    });
  });
});

この例では、フォームの送信時にgrecaptcha.execute関数を呼び出し、トークンを取得しています。

取得したトークンは、<input type="hidden" name="g-recaptcha-response" value="...">としてフォームに追加され、サーバーへ送信されます。

6. サーバー側でのトークン検証と認証結果の確認

サーバー側では、フォームから送信されたトークンと、取得したシークレットキーを使って、GoogleのAPIエンドポイントに検証リクエストを送信し、reCAPTCHAの認証結果を確認する必要があります。

以下にPHPとPythonでの簡単なコード例を示します。

PHPの例：

PHP

<?php
$secretKey = 'YOUR_SECRET_KEY';
$responseKey = $_POST['g-recaptcha-response'];
$url = 'https://www.google.com/recaptcha/api/siteverify?secret='. urlencode($secretKey). '&response='. urlencode($responseKey);
$response = file_get_contents($url);
$responseData = json_decode($response);

if ($responseData->success) {
    // reCAPTCHA認証成功時の処理
    echo 'reCAPTCHA verification successful!';
} else {
    // reCAPTCHA認証失敗時の処理
    echo 'reCAPTCHA verification failed.';
}
?>

Pythonの例：

Python

import requests

secret_key = 'YOUR_SECRET_KEY'
response_key = request.form['g-recaptcha-response']
url = 'https://www.google.com/recaptcha/api/siteverify'
params = {
    'secret': secret_key,
    'response': response_key
}
response = requests.post(url, params=params)
response_data = response.json()

if response_data.get('success'):
    # reCAPTCHA認証成功時の処理
    print('reCAPTCHA verification successful!')
else:
    # reCAPTCHA認証失敗時の処理
    print('reCAPTCHA verification failed.')

これらのコード例では、送信されたトークン（g-recaptcha-response）とあなたのシークレットキーを使って、GoogleのAPIエンドポイント（https://www.google.com/recaptcha/api/siteverify）にPOSTリクエストを送信しています。

レスポンスとしてJSON形式のデータが返され、その中のsuccessフィールドがtrueであれば認証成功、falseであれば認証失敗となります。

サーバーサイドでの検証は、reCAPTCHAのセキュリティを確保する上で最も重要な部分です。

フロントエンドのトークンだけでは不十分であり、必ずGoogleのAPIを通じて検証する必要があります。

シークレットキーの漏洩は、セキュリティ上の重大なリスクとなります。

フロントエンドで生成されたトークンは、改ざんされる可能性があります。

したがって、サーバーがGoogleのAPIに直接問い合わせてトークンの正当性を検証するプロセスは、セキュリティ侵害を防ぐための不可欠なステップです。

シークレットキーは、この検証プロセスにおける信頼性の根拠となるため、厳重に管理する必要があります。

7. reCAPTCHAの認証に失敗した場合の処理

サーバー側での検証の結果、successフィールドがfalseであった場合、reCAPTCHAの認証は失敗したことになります。

このような場合には、適切な処理を行うことで、ユーザーエクスペリエンスを損なわないようにする必要があります。

ユーザーにエラーメッセージを表示する：
認証に失敗したことをユーザーに明確に伝えるメッセージを表示します。
例えば、「ロボット認証に失敗しました。もう一度お試しください。」のようなメッセージが考えられます。
フォームの送信をブロックする：
認証が成功するまで、フォームのデータを処理したり、送信したりするのを防ぎます。
必要に応じて、再試行を促す：
タイムアウトや一時的なエラーが原因である可能性もあるため、ユーザーに再試行を促すことが有効です。

認証失敗時の適切な処理は、ユーザーエクスペリエンスを維持するために重要です。

単にフォーム送信を拒否するだけでなく、エラーの原因をユーザーに伝え、再試行を促すなどの工夫が必要です。

認証失敗の原因がユーザー側の操作ミス（例えば、タイムアウト）である場合、単にエラーを表示するだけでなく、具体的な状況を伝えることで、ユーザーは適切な対応を取りやすくなります。

8. reCAPTCHAの種類と今回の手順について

reCAPTCHAにはいくつかの種類があり、それぞれ特徴が異なります。

種類	特徴	ユーザーインタラクション	セキュリティレベル	初心者向け度
v2 チェックボックス	「私はロボットではありません」のチェックボックス、追加の画像認証あり	あり	中	高
v2 Invisible	バックグラウンドで動作、リスクが高い場合のみチャレンジ表示	ほぼなし	中～高	中
v3	ユーザー操作不要、ウェブサイトのインタラクションに基づいてスコアを返す	なし	高	低

reCAPTCHA v2 チェックボックス：
これは、ユーザーが「私はロボットではありません」のチェックボックスをクリックするタイプです。
チェックボックスをクリックするだけで認証が完了する場合と、追加の画像認証などが表示される場合があります。
この方法は、比較的実装が容易で、多くのウェブサイトで採用されています。
セキュリティレベルは中程度と評価されています。
reCAPTCHA v2 Invisible：
このタイプは、ユーザーには見えない形で動作し、ウェブサイトの操作状況などからリスクが高いと判断された場合にのみ、追加の認証チャレンジが表示されます。
チェックボックスがなく、バックグラウンドでリスク分析が行われます。
ユーザー体験を向上させる一方で、仕組みの理解にはやや専門知識が必要です。
reCAPTCHA v3：
これは、ユーザーの操作を一切必要とせず、ウェブサイトとのインタラクションに基づいて0.0から1.0のスコアを返すタイプです。
スコアに基づいて、管理者はアクセスを許可したり、追加の認証を求めたりといったアクションを柔軟に設定できます。
最もスムーズなユーザーエクスペリエンスを提供しますが、スコアの解釈や適切なアクションの設定にはある程度の知識が必要です。

今回の手順では、初心者の方にも理解しやすく、実装が比較的容易なreCAPTCHA v2 チェックボックスに対応しています。

ユーザーが明示的に操作する必要があるため、初心者にとっては動作原理を理解しやすいと考えられます。

一方、v3 はバックグラウンドで動作するため、初心者が仕組みを理解するには抽象度が高く、Invisible v2 も同様の理由で初期学習には適していません。

まとめ

reCAPTCHAは、ウェブサイトを不正なアクセスから守るための非常に重要なツールであり、その導入はウェブサイトのセキュリティレベルを大きく向上させます。

今回は、プラグインを使用せずにreCAPTCHAを導入するための基本的な手順を解説しました。

プラグインを使用せずにreCAPTCHAを導入する手順を簡単におさらいしておきましょう。

記事のまとめ

reCAPTCHAの目的とウェブサイトセキュリティにおける役割
Google reCAPTCHA管理コンソールでのAPIキー取得
ウェブサイトのHTMLへのJavaScriptコード組み込み
フォームへのreCAPTCHAウィジェット表示用HTMLコード
フォーム送信時のトークンをサーバーへ送信する方法
サーバー側でのトークン検証と認証結果の確認
reCAPTCHAの認証に失敗した場合の処理
reCAPTCHAの種類と今回の手順について

これらの手順に従うことで、初心者の方でも比較的容易にreCAPTCHAをウェブサイトに組み込むことができるでしょう。

今後、さらにウェブサイトのセキュリティを強化するためには、他の種類のreCAPTCHA（v2 Invisible、v3）の導入や、サーバーサイドでのより高度なセキュリティ対策についても学習していくことをお勧めします。

プラグインを使わないreCAPTCHA導入方法：初心者向けガイド

1. reCAPTCHAの目的とウェブサイトセキュリティにおける役割

2. Google reCAPTCHA管理コンソールでのAPIキー取得

3. ウェブサイトのHTMLへのJavaScriptコード組み込み

4. フォームへのreCAPTCHAウィジェット表示用HTMLコード

5. フォーム送信時のトークンをサーバーへ送信する方法

6. サーバー側でのトークン検証と認証結果の確認

7. reCAPTCHAの認証に失敗した場合の処理

8. reCAPTCHAの種類と今回の手順について

まとめ

おすすめ記事

inoffer-nao