谷歌人机验证步骤

245 阅读2分钟

谷歌人机验证步骤

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>

image.png 下方导入出现文件后, 点击保存

image.png 规则列表中展示如下, 为导入成功

image.png

3. 注册人机验证密钥, 翻墙进入谷歌人机验证注册域名,选择v2属于图片验证, v3属于无感验证,v3会通过后台对用户行为进行监测,然后返回一个分数(0-1)之间,v3会返回token, 我们通过自定义区间阀值来判断用户是否需要被验证。v2版本需要用户通过图片选择进行验证,

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

image.png 注册成功后出现两个密钥, 上面的是我们客户端用的, 下面的用于服务端请求作为参数调用

image.png 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 创建项目

image.png

项目名称输入注册域名名称 , 如 hejiyun.github.io, 然后创建项目

image.png

创建项目后, 点击uploading an existing file,上传文件, 把刚才创建的文件拖进来, 注意要有index.html,如果是单文件就命名index.html

image.png

image.png

然后点击上方settings.进入操作设置页面, 选择pages, 选择build and deployment --> main ---> root, 设置部署信息

image.png

image.png

image.png

custom domain 可以设置别称, 但可能别称dns检测会很麻烦。需要修改很多次

然后 点击上面的deployed字符, 进入 github pages构建页面, re-run all jobs可以重构项目页面,更新完记得重构,这样更快

image.png

image.png

hejiyun.github.io/ 然后可以通过这个访问测试的pages, 上面项目名称填写域名就是为了直接方便, 可以不用重设别称什么的。

5. 测试一下, 完成人机验证功能后, 会返回token, 拿到这段token后, 请求后端接口, 发送token给后端。

image.png

  1. 功能测试结束