google recaptcha驗證串接教學
IPFS
下載recaptcha
https://github.com/google/recaptcha
載完之後放好就可以了,只要記得呼叫相對路徑就好
先引入https://www.google.com/recaptcha/api.js
[php]function LoginForm(){
wp_register_script('pm-google_script','https://www.google.com/recaptcha/api.js');
wp_enqueue_script('pm-google_script');
}[/php]
前端html加入
[html]<div class="g-recaptcha" data-callback="captcha_onclick" data-sitekey="your sitekey" style="margin-top:50px;"></div>
<input type="hidden" name="recaptcha" id="recaptchaValidator" />[/html]
js部分
[php]function captcha_onclick() {
document.getElementById('recaptchaValidator').value = grecaptcha.getResponse();
}[/php]
後端驗證時加入
[php]require(PM_DIR.'/recaptcha/src/autoload.php');
//記得改成最前面那包recaptcha的相對路徑
// _GOOGLE_RECAPTCHA_SEC_KEY 就是 google 給的 Secret Key
$recaptcha = new \ReCaptcha\ReCaptcha('6LeXo70UAAAAAORn5xn-s9QFPvBwAj2xOQKXhY63');
$gRecaptchaResponse = $_POST['recaptcha'];
$remoteIp = $_SERVER['REMOTE_ADDR'];
$resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp);
if(!$resp->isSuccess()){
echo json_encode(array('error'=>'請先證明您不是機器人'));
exit();
}else{
//驗證成功時做的事情
}[/php]
記得回傳失敗的時候需要做以下處理,否則登入失敗時驗證區塊會卡死
grecaptcha.reset();
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!