jQueryフォームにGoogle reCAPTCHAを導入する方法

はじめに

Google reCAPTCHAを利用してスパム対策を行うことは、フォームのセキュリティを向上させるための効果的な方法です。本記事では、以前作成した「jQueryで簡易ルーティングを使った問い合わせフォームの作成方法」にreCAPTCHAを導入する手順を解説します。

必要な準備

  1. Google reCAPTCHAの登録
  • Google reCAPTCHA管理画面 にアクセスし、サイトを登録します。
  • reCAPTCHA v3を選択し、サイトキーとシークレットキーを取得します。

使用技術とバージョン情報

  • jQuery: 3.6.4
  • Tailwind CSS: 3.x (CDN経由で最新バージョンを使用 ※テストは 3.4.15)
  • PHP: 8.2.22
  • サーバー環境: エックスサーバー

コードの改修

フロントエンド（jQuery + reCAPTCHA）

以下はreCAPTCHAを導入したフォームのHTMLとJavaScriptコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery お問い合わせフォーム</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div id="form-wrapper" class="container mx-auto p-4 max-w-screen-md">
    <!-- 入力画面 -->
    <div id="input-screen" class="page bg-white shadow-md rounded p-6 w-full max-w-md mx-auto">
      <h1 class="text-2xl font-bold mb-4">お問い合わせフォーム</h1>
      <form id="contact-form">
        <div class="mb-4">
          <label for="name" class="block text-sm font-medium text-gray-700">名前:</label>
          <input type="text" id="name" name="name" required
            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700">メールアドレス:</label>
          <input type="email" id="email" name="email" required
            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        <div class="mb-4">
          <label for="message" class="block text-sm font-medium text-gray-700">お問い合わせ内容:</label>
          <textarea id="message" name="message" required
            class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"></textarea>
        </div>
        <button type="button" id="to-confirm" class="w-full bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">
          確認画面へ
        </button>
      </form>
    </div>

    <!-- 確認画面 -->
    <div id="confirm-screen" class="page hidden bg-white shadow-md rounded p-6 w-full max-w-md mx-auto">
      <h1 class="text-2xl font-bold mb-4">内容の確認</h1>
      <p class="mb-2"><strong>名前:</strong> <span id="confirm-name"></span></p>
      <p class="mb-2"><strong>メールアドレス:</strong> <span id="confirm-email"></span></p>
      <p class="mb-4"><strong>お問い合わせ内容:</strong> <span id="confirm-message"></span></p>
      <div class="flex space-x-4">
        <button id="back-to-input" class="w-1/2 bg-gray-600 text-white py-2 px-4 rounded hover:bg-gray-700">
          戻る
        </button>
        <button id="submit-form" class="w-1/2 bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">
          送信する
        </button>
      </div>
    </div>

    <!-- 完了画面 -->
    <div id="complete-screen" class="page hidden bg-white shadow-md rounded p-6 w-full max-w-md mx-auto">
      <h1 class="text-2xl font-bold mb-4">送信が完了しました</h1>
      <p>お問い合わせいただきありがとうございます。</p>
      <button id="reset-form" class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">
        フォームに戻る
      </button>
    </div>
  </div>

  <script>
    $(document).ready(function () {
      const routes = {
        "/": "#input-screen",
        "/confirm": "#confirm-screen",
        "/complete": "#complete-screen",
      };

      // ページの表示切り替え
      function navigate(path) {
        $(".page").addClass("hidden"); // 全画面を非表示
        const target = routes[path] || "#input-screen"; // 表示対象画面を取得
        $(target).removeClass("hidden"); // 対象画面を表示
        history.pushState({}, "", path); // URL を変更
      }

      // 初期ロード時の表示切り替え
      navigate(window.location.pathname);

      // 入力画面 → 確認画面
      $("#to-confirm").click(function () {
        const name = $("#name").val().trim();
        const email = $("#email").val().trim();
        const message = $("#message").val().trim();

        // 入力チェック
        if (!name || !email || !message) {
          alert("全ての項目を入力してください。");
          return;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
          alert("有効なメールアドレスを入力してください。");
          return;
        }

        // 確認画面に値を反映
        $("#confirm-name").text(name);
        $("#confirm-email").text(email);
        $("#confirm-message").text(message);

        // URLと画面を変更
        navigate("/confirm");
      });

      // 確認画面 → 入力画面
      $("#back-to-input").click(function () {
        navigate("/");
      });

      // 確認画面 → 完了画面（フォーム送信）
      $("#submit-form").click(function () {
        grecaptcha.ready(() => {
          grecaptcha.execute("YOUR_SITE_KEY", { action: "submit" }).then((token) => {
            const formData = {
              name: $("#name").val(),
              email: $("#email").val(),
              message: $("#message").val(),
              recaptcha_token: token,
            };

            $.ajax({
              url: "backend/contact.php",
              type: "POST",
              contentType: "application/json",
              data: JSON.stringify(formData),
              success: function (response) {
                if (response.success) {
                  navigate("/complete");
                } else {
                  alert("送信に失敗しました: " + (response.error || "不明なエラー"));
                }
              },
              error: function () {
                alert("エラーが発生しました。");
              },
            });
          });
        });
      });

      // 完了画面 → 入力画面（フォームリセット）
      $("#reset-form").click(function () {
        $("#name").val("");
        $("#email").val("");
        $("#message").val("");
        navigate("/");
      });
    });
  </script>
</body>
</html>

バックエンド（PHP + reCAPTCHA検証）

<?php
header('Content-Type: application/json');

// リクエストデータの取得
$data = json_decode(file_get_contents('php://input'), true);

// reCAPTCHA 検証
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY';
$recaptcha_response = $data['recaptcha_token'];

$response = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($response, true);

if (!$recaptcha['success']) {
    echo json_encode(['success' => false, 'error' => 'reCAPTCHA 検証に失敗しました。']);
    exit;
}

// 管理者への通知メール
$toAdmin = 'admin@example.com';
$subjectAdmin = 'お問い合わせフォームからのメッセージ';
$messageAdmin = "名前: {$data['name']}\nメールアドレス: {$data['email']}\nメッセージ: {$data['message']}";
$headersAdmin = 'From: webmaster@example.com';

$mailToAdmin = mail($toAdmin, $subjectAdmin, $messageAdmin, $headersAdmin);

// 問い合わせ者への自動返信メール
$toUser = $data['email'];
$subjectUser = 'お問い合わせありがとうございます';
$messageUser = "{$data['name']} 様\n\nお問い合わせありがとうございます。\n以下の内容で受け付けました。\n\n----------------------\nお名前: {$data['name']}\nメールアドレス: {$data['email']}\nお問い合わせ内容:\n{$data['message']}\n----------------------\n\n担当者より折り返しご連絡いたします。\n\nよろしくお願いいたします。\n";
$headersAdmin = 'From: webmaster@example.com';

$mailToUser = mail($toUser, $subjectUser, $messageUser, $headersUser);

if ($mailToAdmin && $mailToUser) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false, 'error' => 'メール送信に失敗しました。']);
}

まとめ

この方法でreCAPTCHAを組み込むことで、スパム対策を施した安全なフォームを構築できます。サイトキーとシークレットキーは必ず環境に応じて設定してください。

スポンサーリンク

コメント

タイトルとURLをコピーしました