laravel 使用谷歌的 reCAPTCHA 验证码系统 google/recaptcha 教程
資深大佬 : hongzhulei 0
写在开篇前
-
reCAPTCHA 是 Google 拥有的人工验证系统。
-
reCAPTCHA 目前下载量是 12 105 196，php 开发网站验证码使用量第一的位置，作为行为验证，免费开源无疑是最大的亮点
-
但是国内一般使用不了。但是本教程已解决此问题
-
本教程基于 laravel5.8 完成的开发和使用，php 版本为 7.0，具体环境要求参考
- laravel 环境要求
- 组件依赖
-
需要理性上网，具体教程参考
开始
- 组件安装：
composer require google/recaptcha - google/recaptcha 平台注册相关网站
- 此处需要欢（ fan ）强(qiang)，必须的必，相关欢（ fan ）强(qiang)教程在文后给出
- 登录到管理台后点击右上角的+号
- 进入注册网站的页面，这里你可以选择第 3 版或者第 2 版，不同在于 v2 是让你校验图形通过，v3 不需要校验图形，而是记录用户的行为，根据用户行为给出用户行为得分。这里先讲 v2
- 注册完毕，保存下来网站密钥（用于前端页面）和密钥（用于后台校验）
- 网站整合
- 添加路由
site/routes/web.php //前端路由 Route::group(['prefix' => 'front'], function ($router) { Route::get('captcha', "Front[email protected]");//发送谷歌验证 Route::get('checkCaptcha', "Front[email protected]");//发送谷歌验证 }); site/app/Http/Controllers/Front/SourceController.php //控制器代码 /** * Notes:测试谷歌验证码 * Created by PhpStorm. * User: guofu * Date: 2020/5/14 * Time: 下午 5:06 */ public function captcha(Request $request) { return view('front/captcha'); } site/resources/views/front/captcha.blade.php //前台页面代码 <!DOCTYPE html> <html> <head> <title>google 验证码 V2</title> <meta charset="UTF-8"> </head> <body> <div id="google-reCaptcha"></div> <button>验证后提交</button> </body> {{--注意此处的 js 换成国内地址--}} <script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script> <script type="text/javascript"> var verifyCallback = function(token) { document.querySelector('button').addEventListener('click', () => { console.log('客户端 token:' + token); fetch('/front/checkCaptcha?code=' + token, { method: 'GET' }).then(response => { if (response.ok){ response.json().then(message => { console.log('服务端验证'); console.log(message); alert(message); }); } }); }); }; var onloadCallback = function() { grecaptcha.render('google-reCaptcha', { 'sitekey' : '你的网站密钥', 'callback' : verifyCallback, 'theme' : 'light' }); }; </script> </html> - 访问地址 http://www.imitao1.tech/front/captcha 就会出现验证页面，根据你的用户行为会直接校验通过或者显示图片验证
- 后台验证逻辑
/** * Notes:检查验证码 * Created by PhpStorm. * User: guofu * Date: 2020/5/18 * Time: 上午 11:29 * @param Request $request */ public function checkCaptcha(Request $request) { $url='https://www.recaptcha.net/recaptcha/api/siteverify';//国内的 js $code=$request->get("code"); $data=[ 'secret' =>'你的密钥，注意：和网站密钥不一样' , 'response' => $code, ]; $query = http_build_query($data); $options['http'] = array( 'timeout'=>60, 'method' => 'POST', 'header' => 'Content-type:application/x-www-form-urlencoded', 'content' => $query ); $context = stream_context_create($options); $result = file_get_contents($url, false, $context); echo $result; } - 返回结果如下（ true 代表验证成功）：
{ "success": true, "challenge_ts": "2020-05-19T08:21:06Z", "hostname": "www.imitao1.tech" } # 附相关错误码 Error code Description missing-input-secret The secret parameter is missing. invalid-input-secret The secret parameter is invalid or malformed. missing-input-response The response parameter is missing. invalid-input-response The response parameter is invalid or malformed. bad-request The request is invalid or malformed. timeout-or-duplicate The response is no longer valid: either is too old or has been used previously. - v2 验证完毕，在后台的校验参数里面也可以加入请求 ip，请求方式一样，相关参数说明
POST Parameter Description secret Required. The shared key between your site and reCAPTCHA. response Required. The user response token provided by the reCAPTCHA client-side integration on your site. remoteip Optional. The user's IP address v3 版本的使用，这里只改一下 html 页面，其他是一样的，但是 v3 的网站密钥和密钥记得换掉，v3/v2 都是独立的密钥
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <button onclick="sent()">点击验证</button> </head> <body> </body> </html> <script src="/common/js/jquery.js"></script> <!-- 你必须先引入 jQuery1.8 或以上版本 --> <script src="https://www.google.com/recaptcha/api.js?render=6Le85PgUAAAAADGSMnwBg0pzm1efnsWanOnJt8DI"></script> <script> function sent(){ grecaptcha.ready(function() { grecaptcha.execute('网站密钥', {action: 'homepage'}).then(function(token) { $.get("/front/checkCaptcha?code="+token, function(result){ }); console.log(token); }); }); } </script> - 页面展示，只在页面右下角有一个标识，不需要手动验证图片，后台会根据用户行为给出得分
- 点击验证，查看返回值如下
{ "success": true, "challenge_ts": "2020-05-19T08:35:22Z", "hostname": "www.imitao1.tech", "score": 0.9, "action": "homepage" } - 你根据返回的 score 的值作为参考该请求是否是非法请求。如 score<0.5;return false;
相关文章参考
google/recaptcha 组件下载地址
google/recaptcha 平台注册相关网站
如何实现理性上网
大佬有話說 (0)