laravel使用谷歌的reCAPTCHA验证码系统 google/recaptcha教程-博客_易查网-资源共享平台-IDEA激活码-语言基础教程-视频教程

laravel使用谷歌的reCAPTCHA验证码系统 google/recaptcha教程

2020-05-19 17:22:29 1740 技术小虫有点萌

写在开篇前

reCAPTCHA是Google拥有的人工验证系统。
reCAPTCHA目前下载量是12 105 196，php开发网站验证码使用量第一的位置，作为行为验证，免费开源无疑是最大的亮点
但是国内一般使用不了。但是本教程已解决此问题
本教程基于laravel5.8 完成的开发和使用，php版本为7.0，具体环境要求参考
- laravel环境要求
- 组件依赖
需要科学上网，具体教程参考

开始

组件安装： composer require google/recaptcha
google/recaptcha平台注册相关网站
- 此处需要翻墙，必须的必，相关翻墙教程在文后给出
- 登录到管理台后点击右上角的+号

进入注册网站的页面，这里你可以选择第3版或者第2版，不同在于v2是让你校验图形通过，v3不需要校验图形，而是记录用户的行为，根据用户行为给出用户行为得分。这里先讲v2

注册完毕，保存下来网站密钥（用于前端页面）和密钥（用于后台校验）

网站整合
- 添加路由

site/routes/web.php
    //前端路由
Route::group(['prefix' => 'front'], function ($router) {
    Route::get('captcha', "Front\SourceController@captcha");//发送谷歌验证
    Route::get('checkCaptcha', "Front\SourceController@checkCaptcha");//发送谷歌验证
});

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;

laravel使用谷歌的reCAPTCHA验证码系统 google/recaptcha教程

写在开篇前

开始

v3版本的使用，这里只改一下html页面，其他是一样的，但是v3的网站密钥和密钥记得换掉，v3/v2都是独立的密钥

相关文章参考

相关推荐

phpstorm添加swoole语法提示

大佬们都说tcp有黏包的问题，tcp却说：我冤枉！

视频直播技术真的很难吗？手把手带你实现直播技术(一)

同步与异步、阻塞与非阻塞傻傻分不清楚？你得从linux中的5种IO模型看起

快速学习正则表达式，不用死记硬背，这里有份中文资源和互动学习网站

php安全之道的大略讲解和总结

不到40行代码教你如何利用php高效快速的爬取10w+网页数据

明明白白的聊一下什么是服务发现

面试官又双叒叕问你TCP的三次握手和四次挥手？看这里！有图有真相！！

ChatGPT为什么这么火爆？这是一篇从入门到玩坏的教程

go集成nacos配置中心并读取配置信息

聊一聊进程、线程和协程以及线程的那些“锁“事

https你很熟？灵魂三连问之https安全在哪里？客户端如何验证https证书的合法性？ssl是如何加密数据的？

让你的工作更高效！快来看看如何使用内网穿透

php怎么实现类的自动注册

golang 单元测试和性能测试

基于docker实现Redis集群（3主3从）

超详细的RabbitMQ快速入门!!你不拿走吗？

MySQL的内部XA的二阶段提交

PHP孤儿进程、僵尸进程的代码演示和方法处理

和我交流

友情链接

关注公众号获取验证码

laravel使用谷歌的reCAPTCHA验证码系统 google/recaptcha教程

写在开篇前

开始

v3版本的使用，这里只改一下html页面，其他是一样的，但是v3的网站密钥和密钥记得换掉，v3/v2都是独立的密钥

相关文章参考

相关推荐

和我交流

友情链接

关注公众号 获取验证码

关注公众号获取验证码