引入google recaptcha 谷歌人机身份验证
首页 > >    作者:lininn   2021年1月21日 14:36 星期四   热度:222°   百度已收录  
时间:2021-1-21 14:36   热度:222° 

官方文档
https://developers.google.com/recaptcha/intro 

管理后台

https://www.google.com/recaptcha/admin/site/350006937 

填写资料

https://www.google.com/recaptcha/admin/create 

前端

官方的demo

 
<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>
<script>
	grecaptcha.ready(function() {
		grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
		
		});
	});
</script>

_reCAPTCHA_site_key_ 就是客户的的密钥

核心代码就是通过执行 grecaptcha.execute(...) 方法,在回调中获取到 token值。

action 参数 可以理解为 验证场景。可以自己定义名称。作用就是可以在后台,对于不同的场景进行特别的设置。例如专门为登录设计一个场景: login

国内的用户需要替换js文件的地址和服务端验证接口的地址(Fuck GFW)

替换客户端js地址

https://www.google.com/recaptcha/api.js 替换为

https://www.recaptcha.net/recaptcha/api.js 

替换服务端接口地址

https://www.google.com/recaptcha/api/siteverify 替换为 https://www.recaptcha.net/recaptcha/api/siteverify

完整的一个例子客户端

<!DOCTYPE html>
<html>
<head>
    <title>google验证码V2</title>
    <meta charset="UTF-8">
</head>
<body>
    <div id="google-reCaptcha"></div>
    <button>验证后提交</button>
</body>
<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('/validate?token=' + 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' : '6LdctdwUAAAAAORpZqPoqPta7PUKjU4Wl24JIGRs',
            'callback' : verifyCallback,
            'theme' : 'light'
        });
    };
</script>
</html>

或者
<div id="robotLogin"></div>
    onloadCallback(
            "robotLogin",
            function(res) {
              if (res) {
                let params = {
                  email: _that.formInline.email,
                  password: _that.setSha(_that.formInline.password),
                  personType: "GOOGLE",
                  personCode: res,
                  domainCode: "APIFINY",
                  deviceType: "WEB",
                  language: "EN"
                };
                _that.loginFunc(params);
              }
            },
            function(err) {
              _that.robotModalflag = false;
              _that.loaded = true;
            },
            function(netError) {
              _that.robotModalflag = false;
              _that.loaded = true;
            }
          );
前后端集成:
https://www.cnblogs.com/echolun/p/12436226.html 




二维码加载中...
本文作者:lininn      文章标题: 引入google recaptcha 谷歌人机身份验证
本文地址:?post=495
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn