google recaptcha使用
2020-12-17 本文已影响0人
杨依_1
-
申请google账号
访问google首页
注册账号 -
申请google recaptcha秘钥
2.1. 在浏览器中登录google账号
2.2 访问https://www.google.com/recaptcha/admin/create
2.3 填写表单如下。填写完成并提交 【这里用web端的recaptcha V2做演示】
更正下：填写域名不要加端口号和协议
image.png
2.4 提交成功后生成sitekey，该sitekey可以setting里查看
image.png
-
在实践中应用
两种方式：
3.1. 页面上自动渲染验证码：
- 加载recaptcha api脚本
- 展示recaptcha的dom元素使用“g-recaptcha” class
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<!-->直接使用google的api，需要翻墙<-->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-->不能翻墙使用下面的地址<-->
<script src="https://www.recaptcha.net/recaptcha/api.js?oncallback=renderRecaptcha" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
3.2. 如果你是在模块化的的项目中使用。可以按需动态加载recaptcha 脚本。并手动渲染验证码
// 这里需要注意的是：
// 使用动态加载的方式recaptcha脚本。因为脚本加载是异步，所以在脚本加载完成前，是无法使用recaptcha的api
// 简单的解决方法就是使用setInterval监听recaptcha的是否需加载完成
function listenLoadRecaptcha (onloadcallback) {
const intervalId = setInterval(() => {
try {
console.log('listen recaptcha load');
const grender = grecaptcha && grecaptcha.render;
if (grender && typeof onloadcallback === 'function') {
onloadcallback();
clearInterval(intervalId);
}
} catch (e) {
console.log('grecaptcha not loaded');
}
}, 500);
}
function loadRecaptcha() {
let script: any = document.querySelector('script[src*="/recaptcha/api.js"]');
if (!script) {
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
document.body.appendChild(script);
}
listenLoadRecaptcha(function() {
// 脚本加载完成 渲染验证码。
// 页面上需要有渲染验证码的dom元素。可以预先在html文档里加上要渲染的dom元素。如果没有可以通过脚本添加
const $recaptcha = document.createElement('div');
const recaptchaId = 'recaptcha_test';
$recaptcha.id = recaptchaId; // 该id在render方法中使用
document.body.appendChild($recaptcha)
// render方法参数请参考官方文档:https://developers.google.com/recaptcha/docs/display#render_param
// 第一个参数可以是：dom的id属性值；或者dom元素本身：$recaptcha
grecaptcha.render(recaptchaId, {
sitekey: 'your_site_key', //必填
hl: 'zh-CN', //配置验证码显示的文本语言。默认是英文
callback: function() {
// 验证码验证通过的回调
},
... //其它参数根据需要自行配置
})
})
}
运行结果
image.png
验证通过
image.png
遗留了一个问题：
这个验证通过客户端完全可以做了。但是我们用验证码的目的是为了防止api攻击。这里只是介绍了客户端使用google recaptcha展示验证码的功能，具体服务端提供的api如何校验，需要客户端和服务端再协商。
比如：验证码校验通过后,把验证通过的g-recaptcha-token传给服务端并保存，然后在调用api的地方把该token带上，给服务端做校验。这才能体现出验证码的作用来。【这只是我个人的建议方案。有更好的解决方案欢迎在留言里分享。感谢】
