V2版效果
Google reCAPTCHA v3 介绍
Google reCAPTCHA v3 会对每一个请求返回一个评分，不需要与用户进行交互，该分数基于用户和网站的互动。它的主要流程主要分为五步：
- 使用 sitekey 加载JavaScript API
- 在操作或页面加载时调用
grecaptcha.execute - 通过请求将令牌发送到后端
- 后端将令牌和 SecretKey 发送到 Google 进行验证，Google 将会给你返回一个评分
- 判断评分是否和符合要求
评分的数值在0-1之间，越大表示用户越真实，0表示机器人。
Google reCAPTCHA必要准备
- 创建Key地址:https://www.google.com/recaptcha/admin/create
- 需要准备一个谷歌账号，在创建秘钥时需要将当前秘钥与一个谷歌账号绑定。
- 创建秘钥的地址必须科学上网，否则无法访问。
ASP.NET Core 接入
-
安装 reCAPTCHA 组件
dotnet add package Unicorn.reCAPTCHA.AspNetCore -
appsettings.json 添加配置
"RecaptchaSettings": { "SiteKey": "6LeW_EclAAAAAAnri3ac0E3zzX-plM3wRIJ1E0CR", //网站密钥，公钥,前端用 "SecretKey": "6LeW_EclAAAAAOVZJSX39L7r1Cxs-PejPmeSazKt", //通信密钥，私钥,后端用 "Version": "v3", "Domain": "www.recaptcha.net" //Domain 指使用的 Google reCAPTCHA 服务的域名，可以是www.recaptcha.net 或者 www.google.com，使用前者可以在国内正常使用，不受GFW影响。 } - 在 Program.cs 方法里配置
var configuration = builder.Configuration.GetSection("RecaptchaSettings"); builder.Services.AddGoogleRecaptcha(configuration); - 后台代码 (/Controllers/AccountController.cs)
public class AccountController : Controller { private readonly IRecaptchaService _recaptcha; private readonly IOptions<RecaptchaSettings> _options; public AccountController(IRecaptchaService recaptcha, IOptions<RecaptchaSettings> options) { _recaptcha = recaptcha; _options = options; } #region Login_V3 public IActionResult Login_V3() { ViewBag.SiteKey = _options.Value.SiteKey;//公钥 return View(); } [HttpPost] public async Task<IActionResult> Login_V3(AccountViewModel model) { if (ModelState.IsValid) { var recaptchaReault = await _recaptcha.Validate(model.GoogleToken); if (!recaptchaReault.Success || recaptchaReault.Score < 0.5M) { return Json(new { code = 0, msg = "人机验证失败！", data = recaptchaReault }); } else { return Json(new { code = 200, msg = "人机验证成功", data = recaptchaReault }); } } else { return Json(new { code = 0, msg = "参数异常" }); } } #endregion }public class AccountViewModel { [Required(ErrorMessage = "{0}不能为空")] public string Username { get; set; } [Required(ErrorMessage = "{0}不能为空")] public string Password { get; set; } [Required(ErrorMessage = "{0}不能为空")] public string GoogleToken { get; set; } } - 前端代码 （/Views/Account/Login_V3.cshtml）
@{ ViewData["Title"] = "Login_V3"; Layout = null; } <link rel="stylesheet" href="http://layui.tool90.com/res/layui/dist/css/layui.css" /> <style> /*隐藏验证码浮窗*/ .grecaptcha-badge { display: none !important; } </style> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>登录演示</legend> </fieldset> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="required" autocomplete="off" class="layui-input" value="admin"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">V3-Token</label> <div class="layui-input-block"> <input type="text" id="googleToken" name="GoogleToken" class="layui-input" /> <button type="button" class="layui-btn layui-btn-sm" onclick="loadGrecaptcha()">刷新验证</button> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">提示</label> <div class="layui-form-mid"> <div id="tips">--</div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" class="layui-btn" lay-submit="" lay-filter="btnLogin">登录</button> </div> </div> </form> <script src="/lib/jquery/dist/jquery.js"></script> <script src="http://layui.tool90.com/res/layui/dist/layui.js"></script> <script src="https://www.recaptcha.net/recaptcha/api.js?render=@(ViewBag.SiteKey)"></script> <script type="text/javascript"> function loadGrecaptcha() { grecaptcha.ready(function () { grecaptcha.execute('@(ViewBag.SiteKey)', { action: 'Login_V3' }).then(function (token) { $("#googleToken").val(token); //将Token写入隐藏域等等 }); }); } loadGrecaptcha(); </script> <script> layui.use(['form'], function () { var form = layui.form, layer = layui.layer; //监听提交 form.on('submit(btnLogin)', function (data) { var formData = data.field; $.post("/Account/Login_V3", formData).done(function (result) { loadGrecaptcha();//重新获得一个Token if (result.code == 200) { $("#tips").html(result.msg).css("color", "green"); } else { $("#tips").html(result.msg).css("color", "red"); } console.log(JSON.stringify(result)) }) return false; }); }); </script>
使用前需注意:
1.reCaptcha官网网站为:https://developers.google.com/recaptcha/(需要翻墙)
2.在国内使用的话,需要将demo中所有的www.google.com替换成www.recaptcha.net不然无法使用reCAPTCHA
