谷歌人机验证步骤
1. 安装插件 header Editor
<https://chrome.google.com/webstore/detail/header-editor/eningockdidmgiojffjmkdblpjocbhgh/related>
2. 配置 header Editor 规则, 扩展程序中打开header Editor, 选择导出导入, 填下载url, 点击右边下载
<https://azurezeng.github.io/static/HE-GoogleRedirect.json>
下方导入出现文件后, 点击保存
规则列表中展示如下, 为导入成功
3. 注册人机验证密钥, 翻墙进入谷歌人机验证注册域名,选择v2属于图片验证, v3属于无感验证,v3会通过后台对用户行为进行监测,然后返回一个分数(0-1)之间,v3会返回token, 我们通过自定义区间阀值来判断用户是否需要被验证。v2版本需要用户通过图片选择进行验证,
<https://www.google.com/recaptcha/admin/create>
注册成功后出现两个密钥, 上面的是我们客户端用的, 下面的用于服务端请求作为参数调用
4. 进行人机验证开发, 前端代码开发, 注册v2,sitekey为第一个网站密钥,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>谷歌ReCaptcha</title>
</head>
<body>
<div>
<div id="robot"></div>
<button onclick="getResponseFromRecaptcha()">验证是否通过</button>
</div>
<script src="https://www.recaptcha.net/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=en" async defer></script>
<script type="text/javascript">
var callback = function (args) {
console.log(args)
console.log('验证成功');
};
var expiredCallback = function (args) {
console.log(args)
console.log('验证过期');
};
var errorCallback = function (args) {
console.log(args)
console.log('验证失败');
};
var widgetId;
var onloadCallback = function () {
// 得到组件id
//
widgetId = grecaptcha.render('robot', {
'sitekey': '6LePgZwlAAAAAJZXTd_TfvNVGQfolk52XVcSXUnD',
'theme': 'light',
'size': 'compact',
'callback': callback,
'expired-callback': expiredCallback,
'error-callback': errorCallback
});
};
function getResponseFromRecaptcha() {
var responseToken = grecaptcha.getResponse(widgetId);
if (responseToken.length == 0) {
alert("验证失败");
} else {
alert("验证通过");
}
};
</script>
<style>
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
input{
width: 200px;
margin-bottom: 20px;
}
</style>
</body>
</html>
进行测试, 首先翻墙进入github官网, 登陆, 选择 your repositories 然后点击new 创建项目
项目名称输入注册域名名称 , 如 hejiyun.github.io, 然后创建项目
创建项目后, 点击uploading an existing file,上传文件, 把刚才创建的文件拖进来, 注意要有index.html,如果是单文件就命名index.html
然后点击上方settings.进入操作设置页面, 选择pages, 选择build and deployment --> main ---> root, 设置部署信息
custom domain 可以设置别称, 但可能别称dns检测会很麻烦。需要修改很多次
然后 点击上面的deployed字符, 进入 github pages构建页面, re-run all jobs可以重构项目页面,更新完记得重构,这样更快
hejiyun.github.io/ 然后可以通过这个访问测试的pages, 上面项目名称填写域名就是为了直接方便, 可以不用重设别称什么的。
5. 测试一下, 完成人机验证功能后, 会返回token, 拿到这段token后, 请求后端接口, 发送token给后端。
- 功能测试结束