このシリーズの目的
体系的なwebコーディングの訓練ができるようになるために、PHPの初学のきっかけかつ、PHPでログインフォームやフォームを実装することができるようになるために
上記のチュートリアルを進めているのでその備忘録。
内容
今回のチュートリアル
PHP Tutorial For Beginners: Google reCAPTCHA v2
まえがき
チュートリアル中ではv2の導入を解説しているが、現在はv3の方が適切だと感じたのでこの記事では自力で調べたv3の導入方法に置き換えることとする。
基本的にはチュートリアルの流れと一緒だが、コードに違いがあるのでどちらを導入するにしても、初めてであればまずチュートリアルを視聴し、流れを確認してからその差異を自分で理解してから始めることをおすすめしたい。
成果物
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptchaResponse'])) {
// $username = $_POST["username"];
$secret = "シークレットキーの値";
$response = $_POST['recaptchaResponse'];
$userIP= $_SERVER["REMOTE_ADDR"];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$response);
$reCAPTCHA = json_decode($verifyResponse);
if($reCAPTCHA->success) {
// OK
} else {
//NG
echo "ERROR";
}
echo $verifyResponse;
// スコアの確認やエラーの有無を確認するために記載、本番ではコメントアウトする。
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Google reCAPTCHA Tutorial</title>
</head>
<body>
<form action="index.php" method="post">
<input type="text" name="username" placeholder="What is your name?">
<input type="submit" value="Save">
<input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
</form>
<script src="https://www.google.com/recaptcha/api.js?render=サイトキーの値"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('サイトキーの値', {action: 'homepage'}).then(function(token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
</script>
</body>
</html>
reCAPTCHAのキーの取得方法について
必要なもの
・Googleアカウント
・導入したいドメイン
1.下記URLへ飛ぶ
Google reCAPTCHA
2.右上の青いボタンをクリック
3.設定を行う
→ローカルで使用する場合はlocalhost、または127.0.01などをドメインの欄に追加する
4.キーについて
→3で送信ボタンをクリックすると、サイトキーとシークレットキーという2つの文字列が発行される。これを用いてreCAPTCHAを導入していく。
そもそもreCAPTCHAv3とは何か？
reCAPTCHAはbotやスパムによるフォームにおける送信・トラフィックにおいての不正を防止するために、Googleが提供しているサービスである。
v3ということで現在は第3世代となっていて、過去にはbotには判別しづらいアルファベットを打ち込ませたり、単純にCheckBoxをクリックさせたりするなどの形式があったが、第3世代ではユーザーが特に操作することなく、ユーザーの挙動をスコア化してそれに応じて人なのかロボットなのかを判別する形式となっている。
今回のコードの注釈
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptchaResponse'])) {
}
/*$_SERVERはPHPが稼働しているウェブサーバーが生成するヘッダやパス、スクリプトなどの情報の位置を示す変数であり、キーを引数にして呼び出す。
今回は['REQUEST_METHOD']が引数なので、ページにアクセスする際に使用されたメソッドの名前を表していることになる。
つまり、ページにアクセスする際に使用されたメソッドがPOSTであり、かつPOST変数の引数にrecaptchaResponseが使用されている場合、中に書かれたコードの処理が実行されるということになる。
*/
?>
$secret = "シークレットキーの値";
$response = $_POST['recaptchaResponse'];
$userIP= $_SERVER["REMOTE_ADDR"];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$response);
/*file_get_contentsは指定したURLの情報やファイルを取得する関数である。今回はreCAPTCHAのAPIを取得しなければならないので公式のガイドに記載されているURLにシークレットキーの値とpostメソッドの値を付け加えた形で指定する。特にシークレットキーは上記のように変数に代入しておくとよい。*/
$reCAPTCHA = json_decode($verifyResponse);
jsonエンコードされた文字列を受け取って、これをPHPの変数に変換するコード。
つまり、引数にしてしてある$verifyResponseをPHPの変数に変換して代入するということになる。
if($reCAPTCHA->success) {
// OK
} else {
//NG
echo "ERROR";
}
echo $verifyResponse;
}
/*引数はおなじみアロー演算子。
successの部分をscore>=任意の値のように変更して、判定条件を変えることもできる。
今回の形は単純にユーザーの挙動がreCAPTCHAにbotとして判断されたか否かで成功判定が行われる形となる。
最後にechoでfile_get_contentsを代入した変数を書き出す形にすると、スコアや成功判定の結果を返してくれる。
本番環境ではコメントアウトするか、コードを削除することが望ましい。*/
注意すること
・初導入の際は必ず、動作テストのためにechoでfile_get_contentsを書き出すようにする
→私は、最初失念していたのででうまく動作してるのかわからず沼にハマりかけました。
。v2とv3では導入のやり方がやや異なるので、公式のガイドや下記参考ページを見ながら落ち着いて行うこと。
・Googleが提供しているシステムなので導入するだけなら、コピペでも問題はないが、PHP部分はもちろん、HTML部分のgrecaptchメソッド等は実際に導入する際には環境や実装要件、実装するサイトなどに応じて、書き手が処理を付け加える必要があることがあること。
参考
file_get_contents
[PHP $_SERVER（サーバー変数）のすべて！【初心者向け基本】]
(https://wepicks.net/phpref-server/#2-2)
json_decode
[お問い合わせフォームにreCAPTCHA v3を導入してみました！]
(https://knowledge.moshimore.jp/entry/recaptcha_introduction)
GoogleのreCAPTCHA v3をPHPで使う
[reCAPTCHA V3導入の問題点]
(https://qiita.com/dozo/items/77abc7b211c6214d9dc3)
Google reCAPTCHA v3 を動かしてみる
￥