Help us understand the problem. What is going on with this article?

PHP For Beginnersチュートリアル その5 reCAPTCHAv3を導入しよう

More than 1 year has passed since last update.

このシリーズの目的

体系的なwebコーディングの訓練ができるようになるために、PHPの初学のきっかけかつ、PHPでログインフォームやフォームを実装することができるようになるために

PHP For Beginners

上記のチュートリアルを進めているのでその備忘録。

前回

内容

今回のチュートリアル

PHP Tutorial For Beginners: Google reCAPTCHA v2

まえがき

チュートリアル中ではv2の導入を解説しているが、現在はv3の方が適切だと感じたのでこの記事では自力で調べたv3の導入方法に置き換えることとする。
基本的にはチュートリアルの流れと一緒だが、コードに違いがあるのでどちらを導入するにしても、初めてであればまずチュートリアルを視聴し、流れを確認してからその差異を自分で理解してから始めることをおすすめしたい。

成果物

index.php
<?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.右上の青いボタンをクリック
2019-07-25_01h51_44.png

3.設定を行う
→ローカルで使用する場合はlocalhost、または127.0.01などをドメインの欄に追加する
2019-07-25_01h53_53.png

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が使用されている場合、中に書かれたコードの処理が実行されるということになる。
*/
?>
file_get_contentsとは
$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メソッドの値を付け加えた形で指定する。特にシークレットキーは上記のように変数に代入しておくとよい。*/

json_decodeについて
$reCAPTCHA = json_decode($verifyResponse);

jsonエンコードされた文字列を受け取ってこれをPHPの変数に変換するコード
つまり引数にしてしてある$verifyResponseをPHPの変数に変換して代入するということになる

reCAPTCHAの判定について
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(サーバー変数)のすべて!【初心者向け基本】
json_decode
お問い合わせフォームにreCAPTCHA v3を導入してみました!
GoogleのreCAPTCHA v3をPHPで使う
reCAPTCHA V3導入の問題点
Google reCAPTCHA v3 を動かしてみる

shitikakei
ITパスポート取得をきっかけに2019年、0から勉強をスタート。 同年4~7月までHTML・CSS・Javascript。 同年7~10月半ばまでPHP。 同年11月〜2020/1月にLaravelを学びながら成果物を作成。2020/4月よりPython・Djangoの学習を始め、同年5月~6月にチーム開発企画に参加。現在フリーターから就職先を探しています。
https://www.resume.id/shitikamiyako
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away