はじめに
Google reCAPTCHA v3 を付けたお問い合わせフォームを PHP で作っていきます。
メール送信ライブラリは Swift Mailer を使用します。
reCAPTCHA v3 については こちら 。
Google reCAPTCHA v3 とは
巷でよく見かける 私はロボットではありません と書かれたチェックボックスの新しいバージョンです。
ですが、 チェックを付けたり、写真を選んだりする必要がなくなりました。
その代わりに、ユーザの行動から 0.0～1.0 のスコアが算出され、 0 に近いほどロボットによる操作の疑いが強く、 1 に近いほど人間による自然な操作の可能性が高いということみたいです。
前提条件
- PHP 7.3 (これより低くても可)
- Composer をインストールしておく
事前準備
reCAPTCHA v3 のキーを取得する
まず、 こちら から reCAPTCHA v3 の Admin console にアクセスします。
はじめて Admin console を開いた場合、「新しいサイトを登録する」という画面がされるので、ラベル・reCAPTCHA タイプ(reCAPTCHA v3)・ドメインを入力します。
ラベルは任意の名前で構いません。ドメインは使用するサイトのドメイン、またはローカル開発環境であれば localhost 等を入力してください。
最後に「reCAPTCHA 利用条件に同意する」にチェックを入れて「送信」を押します。
サイトキー と シークレット キー が表示されたらコピーしておきます。
Composer で使用するパッケージをインストールする
使用するパッケージは以下の2つです。
composer require でパッケージをダウンロードします。
composer require google/recaptcha && composer require swiftmailer/swiftmailer
パッケージのダウンロードが終わったらひとまず準備は完了です。
ここから実際にコードを書いていきます。
導入手順
- HTML でフォームを作る
まずは HTML でシンプルなお問い合わせフォームを作っていきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<form action="send.php" method="POST" name="inquiry">
<p>
<label for="name">お名前</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">メールアドレス</label>
<input type="email" name="email">
</p>
<p>
<label for="contents">お問い合わせ内容</label>
<textarea name="contents" id="contents" cols="30" rows="10"></textarea>
</p>
<button type="submit">送信する</button>
</form>
</body>
</html>
- reCAPTCHA トークンの生成
ここで事前準備の際に取得した サイトキー が必要になります。
JavaScript でトークンの生成とトークンをフォームに hidden で配置するコードを </body> の直前に書いていきます。
<サイトキー> のところは取得したサイトキーを入れてください。
{action: 'inquiry'} の inquiry は任意のもので構いません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<form action="send.php" method="POST" name="inquiry">
<p>
<label for="name">お名前</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">メールアドレス</label>
<input type="email" name="email">
</p>
<p>
<label for="contents">お問い合わせ内容</label>
<textarea name="contents" id="contents" cols="30" rows="10"></textarea>
</p>
<button type="submit">送信する</button>
</form>
<script src="https://www.google.com/recaptcha/api.js?render=<サイトキー>"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('<サイトキー>', {action: 'inquiry'}).then(function(token) {
var rcpt = document.createElement('input');
rcpt.type = 'hidden';
rcpt.name = 'token';
rcpt.value = token;
document.inquiry.appendChild(rcpt);
});
});
</script>
</body>
</html>
- reCAPTCHA v3 のスコアを算出して処理を分岐する
フォームからの POST を受け取って、PHPで処理していきます。
ここで事前準備で取得した シークレット キー を <シークレット キー> に入れます。
setExpectedAction('inquiry') の inquiry は、先ほどトークン犯行の際に指定した {action: 'inquiry'} と同じ名前にします。
ここからが一番重要です。 setScoreThreshold(0.5) の 0.5 は、人間とロボットを分ける閾値です。
ここの数値が 1 に近いほど厳しい判定になり、 0 に近いほど緩い判定になります。
<?php
require_once __DIR__ . '/vendor/autoload.php';
use ReCaptcha\ReCaptcha as ReCaptcha;
if ($_POST['token']) {
$response = (new ReCaptcha('<シークレット キー>'))
->setExpectedHostname($_SERVER['SERVER_NAME'])
->setExpectedAction('inquiry')
->setScoreThreshold(0.5)
->verify($_POST['token'], $_SERVER['REMOTE_ADDR']);
$result = $response->toArray();
if ($result['success']) {
echo 'あなたはロボットではありません。';
} else {
echo 'あなたはロボットです。';
}
}
ここまでが reCAPTCHA v3 の基本的な使い方です。