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 エラー }

 これでチェックできるようになりました。

web サイト,WordPress

Posted by sirius