自作フォームのスパム対策!reCAPTCHA(リキャプチャ)を独自実装フォームに設置する方法

Webサイトに問い合わせフォームやユーザー登録機能を独自に実装した際、必ずと言っていいほど直面するのが大量の迷惑メールやスパム投稿(Botによる自動送信)の山です。

これらの不正アクセスからフォームを守り、サイトのセキュリティを強固にするための決定版が、Googleが提供する無料の認証システム「reCAPTCHA(リキャプチャ)」です。

本記事では、reCAPTCHAの概要から、独自フォームへ導入するための事前準備・APIキーの取得手順までを分かりやすく解説します。

reCAPTCHA(リキャプチャ)とは?

reCAPTCHA(リキャプチャ)とは、Webサイト上のフォームにアクセスしているのが「本物の人間」か、それとも「悪意のあるプログラム(Bot)」かを判定するGoogleの無料セキュリティサービスです。

フォームにreCAPTCHAを導入することで、以下のようなリスクを未然に防ぐことができます。

  • スパムメールの大量送信(フォームを経由した爆破行為)
  • ・ブルートフォースアタック(総当たり攻撃による不正ログイン)
  • ・偽アカウントの大量自動作成

主要なバージョン:v2とv3の違い

現在、主に使われているreCAPTCHAには「v2」「v3」の2つのバージョンがあります。

バージョン特徴ユーザーの操作
reCAPTCHA v2「私はロボットではありません」というチェックボックスを表示するタイプ。怪しいと判定された場合のみ、画像選択クイズが出題されます。チェックを入れる、または画像を選ぶ
reCAPTCHA v3現在の主流。ユーザーのページ内での挙動をAIが分析し、バックグラウンドで自動的に人間かどうかをスコア判定(0.0〜1.0)します。なし(完全にサイレント)

どちらを選ぶべき?

ユーザーに一切の手間(画像選択など)をかけさせず、コンバージョン率を落としたくない場合は、特別な理由がない限り「reCAPTCHA v3」の導入がおすすめです。本記事でもv3をベースに解説します。

reCAPTCHAの導入手順(APIキーの取得)

独自実装のフォームにreCAPTCHAを組み込むには、まずGoogleの管理画面で対象のWebサイトを登録し、「サイトキー」「シークレットキー」という2つのAPIキーを取得する必要があります。

手順は以下の3ステップです。

ステップ1:Google reCAPTCHAの管理画面へアクセス

  • Google reCAPTCHA 公式サイト にアクセスします。
  • 画面右上にある 「Admin Console(管理コンソール)」 をクリックします。 (※Googleアカウントへのログインが必要です)

ステップ2:サイト情報の登録

新しくサイトを登録するため、右上の「+(作成)」ボタン、または登録画面にて以下の項目を入力します。

  • ラベル: 管理しやすい名前を入力します(例: 自社サイト問い合わせフォーム
  • reCAPTCHA タイプ: 使用したいバージョンを選択します。おすすめは 「v3」 です。
  • ドメイン: フォームを設置するWebサイトのドメイン(例: example.com)を入力します。 https:// や末尾の / は含めず、ドメイン名のみを入力してください。 ※ローカル環境でテストする場合は localhost も追加しておくと便利です。

ステップ3:APIキー(サイトキー・シークレットキー)のコピー

利用規約に同意して「送信」をクリックすると、画面に2つのキーが表示されます。これらは後のコード実装で必ず使用するため、メモ帳などにコピーしておきましょう。

  • サイトキー(Site Key): フロントエンド(HTML/JavaScript)側に記述し、ユーザー側にreCAPTCHAを表示・実行するためのキーです。
  • シークレットキー(Secret Key): バックエンド(PHPやNode.jsなど)側で、Googleのサーバーと通信して判定結果を検証するための絶対に公開してはいけないキーです。

【実装編】独自フォームへのコード組み込み

キーの準備が整ったら、いよいよ独自のHTMLフォームとサーバーサイドのプログラムにreCAPTCHAを組み込んでいきましょう!

(1)送信フォームへのコード設置

送信フォームのあるページの<head></head>内に下記記述を追加します。


// 1. フォームから送られてきたトークンを取得
$recaptchaToken = $_POST['g-recaptcha-response'] ?? '';

if (empty($recaptchaToken)) {
  die('不適切なアクセスです。(トークンがありません)');
}

// 2. Googleの検証APIにリクエストを送る
$secretKey = '【シークレットキー】';
$verifyUrl = 'https://www.google.com/recaptcha/api/siteverify';
    
$response = file_get_contents($verifyUrl . '?secret=' . $secretKey . '&response=' . $recaptchaToken);
$responseData = json_decode($response, true);

// 3. 判定結果の確認
// successがtrue、かつ scoreが基準値(一般的には0.5)以上なら人間とみなす
if ($responseData['success'] && $responseData['score'] >= 0.5) {

  // ここに送信処理を記述します。

} else {

  // スコアが低い(Botの可能性が高い)場合の処理
  http_response_code(403);
  die('Botからのアクセスと判定されました。送信をブロックします。');

}

(2)送信プログラム(PHP)へのコード設置


<script src="https://www.google.com/recaptcha/api.js?render=【サイトキー】"></script>
<script>
  // フォーム送信時にトークンを発行して隠しフィールドにセットする
  document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form'); // 実際のフォームのセレクタに合わせてください
    form.addEventListener('submit', function(e) {
      e.preventDefault(); // 一時的に送信を止める
      
      grecaptcha.ready(function() {
        grecaptcha.execute('【サイトキー】', {action: 'submit'}).then(function(token) {
          // 2. トークンを格納する隠しインプットを動的に作成してフォームに追加
          const input = document.createElement('input');
          input.type = 'hidden';
          input.name = 'g-recaptcha-response';
          input.value = token;
          form.appendChild(input);
          
          // 3. フォームを実際に送信
          form.submit();
        });
      });
    });
  });
</script>

投稿者プロフィール

たーさん代表者
東海大学工学部を卒業後、東芝情報システム株式会社(旧グループ会社含む)に入社。半導体(SRAM)の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。

その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。

開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。

現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。

見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。