reCAPTCHA V3の設置と使い方
reCAPTCHA V3からは画像の認識は無くチェックできるようになった。セキュリティレベルが低い場合は、再度Submitする際に画像などの認証が必要になる。
reCAPTCHA V3をjsでHTMLに設置していく。
以下からreCAPTCHAの設定を行い、公式の説明を確認しながら、jsをHTMLに設置していく。 reCAPTCHA の設定はここでは省略する。
reCAPTCHA 管理画面（Googleログイン必須）実装する上での注意点
指定のAPI jsを読み込む。
読み込みが2分以内でないとタイムアウトエラーになる。
phpのfile_get_contentsで、外部URLへの接続が許可
php.iniの設定でallow_url_fopen=onに変更・再起動する必要がある。
公式サイトの説明formへのreCAPTCHA V3設置
HTML
<!-- //HTMLでformに以下のinputを追加する。jsでIDを取得しているのでrecaptchaResponseを統一する。-->$_COOKIE
<input type="hidden" name="recaptchaResponse" id="recaptchaResponse" />
Java Script
<!-- reCAPTCHA V3 -->
<script src="https://www.google.com/recaptcha/api.js?render=（管理画面のreCAPTCHA_sitekey）"></script>
<script>
//コールバック時の処理
var onloadCallback = function() {
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo $reCAPTCHA_sitekey; ?>', {action: 'homepage'}).then(function(token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
}//
</script>
formページからaction移行先ページでの処理
Java Script
<!-- reCAPTCHA応答 -->
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script>
PHP
/*
* 応答とPHPのPOSTで受け取る場合
* 以下を<form action="ページ先に設置">
* (単一ウィジェットの場合)
*/
if (isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])) {
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.（管理画面のreCAPTCHA_sitekey）.'&response='.$_POST['recaptchaResponse']);
$reCAPTCHA = json_decode($verifyResponse);
if ($reCAPTCHA->success) {
// たぶん人間
} else {
// ボットかも
return;//何もしないで返す
}
}//
返り値
Java Script
//応答：JSON型で返される。WEBの応答
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
//応答：Android
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"apk_package_name": string, // the package name of the app where the reCAPTCHA was solved
"error-codes": [...] // optional
}
セキュリティレベル
HTML
<!-- //HTMLでformに以下のinputを追加する。jsでIDを取得しているのでrecaptchaResponseを統一する。-->$_COOKIE
<input type="hidden" name="recaptchaResponse" id="recaptchaResponse" />
Java Script
<!-- reCAPTCHA V3 -->
<script src="https://www.google.com/recaptcha/api.js?render=（管理画面のreCAPTCHA_sitekey）"></script>
<script>
//コールバック時の処理
var onloadCallback = function() {
grecaptcha.ready(function() {
grecaptcha.execute('<?php echo $reCAPTCHA_sitekey; ?>', {action: 'homepage'}).then(function(token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});
});
}//
</script>
Java Script
<!-- reCAPTCHA応答 -->
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script>
PHP
/*
* 応答とPHPのPOSTで受け取る場合
* 以下を<form action="ページ先に設置">
* (単一ウィジェットの場合)
*/
if (isset($_POST['recaptchaResponse']) && !empty($_POST['recaptchaResponse'])) {
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.（管理画面のreCAPTCHA_sitekey）.'&response='.$_POST['recaptchaResponse']);
$reCAPTCHA = json_decode($verifyResponse);
if ($reCAPTCHA->success) {
// たぶん人間
} else {
// ボットかも
return;//何もしないで返す
}
}//
返り値
Java Script
//応答：JSON型で返される。WEBの応答
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
//応答：Android
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"apk_package_name": string, // the package name of the app where the reCAPTCHA was solved
"error-codes": [...] // optional
}
セキュリティレベル
success：trueであれば成功
セキュリティレベルの数値が1は安全、0.5から危険要素が高いと判断する。
success：trueでも0.5以下は再度チェックするなりの手段が必要。
reCAPTCHAを１ページ内の複数のFORMへの実装する
（処理方法を変えた複数のウィジェットにする場合）
１つのページ内に複数のinputタグがある、又は、複数のSubmitボタンがある場合のreCAPTCHAの設置はウィジェット化する。
HTML
<html>
<script>
// reCAPTCHAコールバック時の処理
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
//レンダリングDIVエリアのid
widgetId1 = grecaptcha.render('reCAPTCHA_set01', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('reCAPTCHA_set02'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('reCAPTCHA_set03', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<!-- 送信時にg-recaptcha-response文字列がアラートメッセージに表示されます。 -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="reCAPTCHA_set01"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<!-- 送信時にreCAPTCHAウィジェットID2をリセットします。 -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="reCAPTCHA_set02"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<!-- g-recaptcha-response POSTパラメータを使用して、送信時にページのURLにPOSTします。 -->
<form action="?" method="POST">
<div id="reCAPTCHA_set03"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</body>
</html>
実装のまとめ
formページ、移行先ページ、エラー若しくはセキュリティレベルが低いときの処理ページ、最低３つで設置が出来る。
