Google reCAPTCHA v3を通常のHTMLに埋め込みます
ワードプレスであれば reCAPTCHA を設置するのは難しくありません。Contact7、WPForms等使えば簡単に設置することができますが通常のHTML構文に埋め込もうとすると簡単ではありません。 中には挫折された方もいらっしゃるのではないでしょうか？
メールフォームにreCAPTCHA v3を設置する
以下の手順でreCAPTCHA v3を設置します。 ここではメールフォームと一緒に設置します。
- reCAPTCHA v3の設定をするために、Google reCAPTCHA管理コンソールにアクセスします。
- Googleアカウントでログインし、新しいサイトを登録します。ウェブサイトのドメイン情報を提供してください。
- 登録が完了すると、reCAPTCHAサイトキーとシークレットキーが生成されます。これらのキーは、reCAPTCHAを導入する際に使用しますので、安全な場所に保管してください。
- ウェブサイトのコードに以下の手順に従って変更を加えます。
HTML
HTMLのheadセクション内に、reCAPTCHAのスクリプトを追加します。
<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>
サイトキーの箇所に取得したサイトキーを入力（コピペ）します。
formタグは以下のようになります。 action(飛び先）のphpファイルは任意の（ディレクトリ/）名前に変更可です。
サンプルです。
<form action="process_form.php" method="POST" onsubmit="event.preventDefault(); submitForm();">
<label for="name">名前:</label>
<input type="text" name="name" required><br>
<label for="email">メールアドレス:</label>
<input type="email" name="email" required><br>
<label for="message">メッセージ:</label><br>
<textarea name="message" rows="5" required></textarea><br>
<input type="hidden" name="recaptchaToken" id="recaptchaToken">
<input type="submit" value="送信"> </form>
さらに</body>の直前に下記のスクリプトをコピペします。
<script>
function submitForm() {
grecaptcha.ready(function() {
grecaptcha.execute('サイトキー', {action: 'submit'}).then(function(token) {
var form = document.querySelector('form');
var tokenInput = document.createElement('input');
tokenInput.type = 'hidden';
tokenInput.name = 'recaptcha_token';
tokenInput.value = token;
form.appendChild(tokenInput);
form.submit();
});
});
}
</script>
サイトキーの箇所に取得したサイトキーを入れます
PHP process_form.php
<?php
// reCAPTCHAのシークレットキー
$recaptcha_secret = 'シークレットキー';
// フォームデータの受け取り フォームの要素
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$recaptcha_token = $_POST['recaptcha_token'];
// reCAPTCHAの検証
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_data = array(
'secret' => $recaptcha_secret,
'response' => $recaptcha_token
);
$recaptcha_options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($recaptcha_data)
)
);
$recaptcha_context = stream_context_create($recaptcha_options);
$recaptcha_result = file_get_contents($recaptcha_url, false, $recaptcha_context);
$recaptcha_json = json_decode($recaptcha_result);
if ($recaptcha_json->success)
// reCAPTCHAが成功した場合の処理
// ここにフォームデータの処理やメール送信などのコードを記述します
// 例: フォームデータをメールで送信する
$to = 'your_email@example.com';
$subject = 'お問い合わせ';
$message = "名前: $name\nメールアドレス: $email\nメッセージ: $message";
$headers = 'From: your_email@example.com' . "\r\n" .
'Reply-To: your_email@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
if (mail($to, $subject, $message, $headers)) {
echo 'お問い合わせが送信されました。ありがとうございます！';
} else {
echo 'お問い合わせの送信中にエラーが発生しました。';
}
} else {
// reCAPTCHAが失敗した場合の処理
echo 'reCAPTCHAの検証に失敗しました。スパムでないことを確認してください。';
}
?>
シークレットキーの箇所に入手したシークレットキーを入れます。
your_email@example.comに送信先のメールアドレスを入れます。
これでreCAPTCHA v3を設置したメールフォームができました。
これ実はChat GPTに出してもらいました。 私のフォームは少し複雑でしたが、少し手を加えて設置が無事おわりました。
上のコードをはコピペするだけ実装できるはずですがまだ検証していません。 後日コピペして検証したいと思います。 もし動作しない場合は ３０行目の ($recaptcha_json->success)のあとに { を入れてください。 30行目は以下のようになります。
if ($recaptcha_json->success){
Chat GPTは上のように出しましたが、私のフォームでは作動しませんでした。 { を削除したら作動しました。
コメント