Google reCAPTCHA v3
コメント入力の際に、bot を排除したいと思い、Google の reCAPYCHA v3 を利用します。
サイトキーとシークレットキーの取得
こちらのサイトに詳しい説明があります。https://www.webdesignleaves.com/pr/plugins/google_recaptcha.php
利用するには Google アカウントが必要です。アカウントがあれば、手続きは簡単です。まず、ブラウザで Google アカウントでログインしている状態で、reCAPTCHA のサイトを開き、「v3 Admin Console」をクリックします。初めて開くと、登録画面になるのでドメインを登録します。利用したいバージョンや、利用条件への同意などを入力し、送信をクリックします。
問題がなければ、サイトキーとシークレットキーが表示されますので、メモしておきます。設定のリンクがありますが、reCAPTCHA v3 の場合は、特に設定の必要は無いと思います。
reCAPTCHA のサイトの「v3 Admin Console」は登録後に開けば、分析画面になります。このページの歯車のアイコンから設定画面に移動できます。設定からドメインの追加もできるようです。
WordPress での設定
WordPress での設定は、テーマとして、Luxeritas を使っているので、ダッシュボードの Luxeritas のカスタマイズから設定していきます。
カスタマイズの「画像認証」タブに切り替えると、画像認証の設定で何を使うかを選択できます。今回は「Google reCAPTCHA v3 による画像認証を使用する」を使います。
次に、「Google reCAPTCHA の設定」でサイトキーとシークレットキーを入力します。また、「reCAPTCHA v3 バッジと Page Top ボタンの位置関係」では、「Page Topボタンを上にずらす」を選択します。
自分で作ったフォームで利用する(PHP)
https://qiita.com/yuya00/items/7bcedca927260b8cef38 を参考に問い合わせフォームに reCAPTCHA v3 を追加しました。
javascript を書く
実際にメールを送信するページを呼び出すページのヘッダ部にjavascript を書きます。
<script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute("サイトキー", {action: "sent"}).then(function(token) {
document.getElementById("recaptchaResponse").value = token;
});
});
</script>
そして、 form 内に隠しで input を書きます。
<input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
PHP でチェックする
実際に送信する PHP でチェックします。
if (isset($_POST["recaptchaResponse"]) && !empty($_POST["recaptchaResponse"])) {
$secret = "シークレットキー";
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST["recaptchaResponse"]);
$reCAPTCHA = json_decode($verifyResponse);
if ($reCAPTCHA->success && $reCAPTCHA->score >= 0.5) {
// メール送信処理
} else {
// 失敗したときの処理
}
} else {
// reCAPTCHA エラー
}
これでチェックできるようになりました。