本文作者:陈进坚
博客地址:https://jian1098.github.io
CSDN博客:https://blog.csdn.net/c_jian
简书:https://www.jianshu.com/u/8ba9ac5706b6
联系方式:jian1098@qq.com
在谷歌recaptcha申请验证密钥,配置好服务器的域名,在需要验证的表单中嵌入google reCAPTCHA ,提交表单的时候将验证成功生成的响应码传给后台,后台将响应码post到谷歌的服务器验证地址,谷歌服务器将返回验证结果。生成响应码的页面域名必须是在谷歌页面配置的域名才能生成,只有ip也不行。google reCAPTCHA在web端有3种形式的验证
1.reCAPTCHA v3
在网页加载的时候生成响应码,不需要用户进行任何操作。生成响应码的时候会稍有延迟,比网页加载完成会慢一点,确保了他人利用程序获取html代码的方式不会获取响应码。加入reCAPTCHA v3 的页面会有类似下面的图标
2.reCAPTCHA v2 Checkbox 点击复选框
用户点击复选框进行验证成功后生成响应码,图标如下
3.reCAPTCHA v2 Invisible 自定义按钮
开发人员自定义验证的动作,验证成功后调用生成响应码的js代码生成响应码即可。图标与第1种相同。
申请密钥打开网页 https://www.google.com/recaptcha/admin 登录谷歌账号,在Label下面的输入项目名,然后选择reCAPTCHA的类型,点击Register即可注册完成,完成后可以得到Site key和Secret key。
配置域名在上一步注册好之后的页面底下Domains的框中输入需要验证的域名,只有输入的域名网站才有资格生成你的响应码。
插入前端代码在申请密钥完成的页面中按照给出的步骤Step1加入前端代码,比如如果是v3类型的验证码:
在html头部引入js
<script src='https://www.google.com/recaptcha/api.js?render=你的Site key'></script> 1
由于国家防火墙的原因,大陆的网站需要将js替换为国内的js地址(js是在客户端浏览器执行的,服务器能翻墙也不行)
https://www.recaptcha.net/recaptcha/api.js 1
生成响应码
<script> grecaptcha.ready(function() {grecaptcha.execute('你的Site key', {action: 'action_name'}) .then(function(token) { // 将这个生成的token传给后台}); }); </script> 12345678910111213 后台验证
将前端传过来的响应码和你的Secret key发送到谷歌验证地址进行验证,判断返回数据即可
大陆的需要将验证链接 https://www.google.com/recaptcha/api/siteverify 改为 https://www.recaptcha.net/recaptcha/api/siteverify
php示例:
<?php function send_post($url, $post_data) { $postdata = http_build_query($post_data); $options = array( 'http' => array( 'method' => 'POST', 'header' => 'Content-type:application/x-www-form-urlencoded', 'content' => $postdata, 'timeout' => 15 * 60 // 超时时间(单位:s) ) ); $context = stream_context_create($options); $result = file_get_contents($url, false, $context); return $result; } $post_data = array('secret' => '你的Secret key','response' => $_POST["g-recaptcha-response"] //前端传过来的响应码 ); $recaptcha_json_result = send_post('https://www.google.com/recaptcha/api/siteverify', $post_data); $recaptcha_result = json_decode($recaptcha_json_result); //在这里处理返回的值 var_dump($recaptcha_result); ?>
123456789101112131415161718192021222324252627 隐藏reCAPTCHA图标根据reCAPTCHA的服务条款(即你必须同意),您必须告知游客有关网站上的验证码实现
但是有时候在手机页面这么大的一个图标确实会影响到页面效果,不得不隐藏的时候可以在前端做一下处理
设置data-badge属性inline
<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" /> 1
添加CSS
.grecaptcha-badge { display: none; } 123
相关知识
Google的60款开源项目
Google发布机器学习术语表 (包括简体中文)
如何翻译和解释机器学习术语?请看 Google 官方答案 下
智能化运维:机器学习在系统监控中的应用
2023年9项有趣的Google专利及其对SEO的意义
用树莓派制作一款自动浇灌系统
机器学习入门17
WordPress外贸网站Google搜索优化排名【防忽悠必读】
机器学习术语表
机器学习术语表:语言评估
网址: 使用Google reCAPTCHA防止机器注册 https://m.huajiangbk.com/newsview561399.html
上一篇: 【前端素材】推荐优质在线花卉商城 |
下一篇: 【幻城=热血屠龙=神迹之剑=三国 |