対象者
顧客や上司からgoogle reCAPTCHA を導入したいと言われたが
その顧客のサイトはPHPのバージョンが古くて
「reCAPTCHA Enterprise クライアント ライブラリ」なるものを導入できず
レンタルサーバーでSSHも使えず途方にくれている方。
前提条件
・Google Cloud Platform のアカウントを持っている
・プロジェクト作成済み
まぁ検索すればそれぐらいは出来るはず。
必要な情報
下記３点のみ Google Cloud Platform より取得してください。
- API キー
- そのプロジェクトに関連付けられたAPIキー
- reCAPTCHA Enterpriseキー
- 取得方法は検索すれば詳しく説明されたのが出てくる
注意点は「チェックボックスによる本人確認を使用する」にすること。
これを選択しない場合は自動的に危険なアクセスかどうかを判別する方法になってしまうので
「私はロボットではありません」が表示されなくなります。
見える物しか信用できない人は導入されているかどうかも分からない。 - プロジェクトID
- 作ったプロジェクトのID、プロジェクト選択画面で出てきます。
導入例
3ファイルあります。
・config.php → 設定ファイル
・index.html → 「私はロボットではありません」を表示するフォーム
・rest-api.php → フォームの送信先、危険なアクセスかどうかを評価します。
//APIキー
define( '_API_KEY',"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
//reCAPTCHA Enterpriseキー
define( '_RECAPTCHA_KEY',"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
//Google Cloud Platformのプロジェクト名
define( '_PROJECT_ID',"xxxxxx");
<!DOCTYPE html>
<html>
<head>
<script src='https://www.google.com/recaptcha/enterprise.js' data-callback="clearcall" data-sitekey="<?=_RECAPTCHA_KEY ?>"></script>
<style>
/* ↓これでrecapthaのサイズ変更が可能になります */
.g-recaptcha {
transform-origin: 0% 0%;
transform: scale(170%) translate(-15%, 0%);
margin-bottom: 18px;
}
</style>
</head>
<body>
<form method="post" action="rest-api.php" enctype="multipart/form-data">
<!--ここがrecaptcha の箇所-->
<div style="text-align:center;display: flex;justify-content: center;">
<div id="recaptcha" class="g-recaptcha" data-sitekey="<?=_RECAPTCHA_KEY ?>" data-callback="clearCall" data-action="action"></div>
</div>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
//評価の取得だけにします
//recaptha tokenを取得
$recaptcha_token = htmlspecialchars($_POST["g-recaptcha-response"],ENT_QUOTES,'UTF-8');
//googleaAPIに問い合わせます
$postUrl = "https://recaptchaenterprise.googleapis.com/v1beta1/projects/"._PROJECT_ID."/assessments?key="._API_KEY;
$jsonData = '{"event":{"token": "'.$recaptcha_token .'","siteKey": "'._RECAPTCHA_KEY.'"}}';
$headerData = array(
"Content-length: ".strlen($jsonData),
"Content-Type: application/json; charset=UTF-8",
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTPHEADER, $headerData);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$postUrl);
$result=curl_exec($ch);
curl_close($ch);
//問合せ結果をデコード
$resultData = json_decode($result,true);
//結果を評価、ここは好みにカスタマイズしてください。
if( $resultData["tokenProperties"]["valid"] == false ){
echo "err";
exit;
}
if($resultData["riskAnalysis"]["score"]=="0.0"){
echo "err";
exit;
}
echo "ok";
デバック用
googleレスポンスのエラーコードがね、本当にわかりにくかった。
のでアドバイス
//curl_execの前に
curl_setopt($ch,CURLINFO_HEADER_OUT,true);
//curl_execの後に
echo curl_getinfo($ch,CURLINFO_HEADER_OUT);
//を入れると自分が送信したヘッダーが見れます。
注意
googleドキュメントには
「注: 可能であれば v1 エンドポイントを使用することをおすすめします。」
とあるので本当にどうしようもなかった人だけ使ってください。
これはv1beta1エンドポイントを使用する方法です。
参考サイト
https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages-with-checkbox?hl=ja
https://cloud.google.com/recaptcha-enterprise/docs/create-assessment?hl=ja
https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment?hl=ja
以上！！