• ASP.NET Core 使用 Google 验证码(reCAPTCHA v3)代替传统验证码


    Image result for reCAPTCHA v3

    写在前面

    友情提示:

    Google reCAPTCHA(v3下同) 的使用不需要“梯子”,但申请账号的时候需要!

    Google reCAPTCHA 的使用不需要“梯子”,但申请账号的时候需要!

    Google reCAPTCHA 的使用不需要“梯子”,但申请账号的时候需要!

    那天上班路上刷博客园,看到晓晨大佬的ASP.NET Core 使用 Google 验证码(Google reCAPTCHA)手痒不已,回家立马抽空自己也写了一遍(基本上抄晓晨大佬的),趁周末写个文,挥发下余温;(然而今天晚上下班才匆忙收尾。。。)

    日常所见各类奇葩验证码

    这个太有名了,必须前排

    1555769673891

    京东的

    1555769755756

    中文的:

    1555769838576

    丧心病狂的:

    1555769913750

    面对这堆无力吐槽的验证码,降低用户体验不说,也提高了开发成本;

    很多现在很多公司验证码是用了第三方的,极验网易云盾等等。

    也有很多公司的验证码(人机识别)模块是自己做的,有的甚至做了几套,还有更甚的甚至用上了理解图卷积算法,堪称丧心病狂;

    但现在爬虫横行,恶意爬取数据,大量肉鸡爬取几乎等于dos攻击等,这算轻的;稍有不慎,暴力破解、数据泄露等安全问题也着实严峻;

    so,如果现在说,有人帮你搞定这些(人机识别),让你的登录页面清清爽爽,没有验证码,你想不想爽一把。

    我看你也跟我一样,定抵不住这Google.reCAPTCHA-v3这妖艳货色婀娜的身姿;

    Google.reCAPTCHA(v3)

    本文讲的reCAPTCHA都是v3,下同;

    官方文档:https://developers.google.com/recaptcha/docs/v3 英文好的自己看看;

    一句带过:reCAPTCHA 会以嵌入js的方式,给网站后台返回一个分数,这个分数是用于判断用户是否是机器人,分数的范围是0~1,分数约接近0,越像机器人;

    顺便提一句,reCAPTCHA 这妖艳货色是免费的哦!

    申请Google.reCAPTCHA接入权限

    注册站点:https://www.google.com/recaptcha/admin/create

    这里很简单啦,照着我的图瞎点就行了;

    1555603088777

    点提交之后,得到:

    这两个kes是配置用的,作用页面也说清楚了;

    1555603128328

    很简单,ok,接下来看看怎么在.net core站点中使用;

    继承入Asp.net Core中

    1、创建项目

    1555603893270

    2、引用程序包

    install-package Unicorn.reCAPTCHA.AspNetCore
    

    这个包是晓晨大佬改过的(我也不知道改了什么[捂脸]),就先用它

    不想用这个的,可以用https://github.com/TimothyMeadows/reCAPTCHA.AspNetCore

    3、写个简单的登录页

    AccountViewModel

    	public class AccountViewModel
        {
            [Required]
            public string Username { get; set; }
    
            [Required]
            public string Password { get; set; }
    
            public string GoogleToken { get; set; }
        }
    

    后端:

     public IActionResult Login()
            {
                return View();
            }
    
            [HttpPost]
            public async Task<IActionResult> Login(AccountViewModel model)
            {
                if (ModelState.IsValid)
                {
                    var recaptchaReault = await _recaptcha.Validate(model.GoogleToken);
    
                    if (!recaptchaReault.success || recaptchaReault.score < 0.08m)
                    {
                        ModelState.AddModelError(string.Empty, "老实说,你是不是机器人!");
                    }
                    else
                    {
                        ModelState.AddModelError(string.Empty, "登录成功~");
                    }
                }
    
                return View(model);
            }
    

    前端:

    
    

    appsettings.json

    {
      "RecaptchaSettings": {
        "SiteKey": "刚刚申请的SiteKey",
        "SecretKey": "刚刚申请的SecretKey",
        "Version": "v3",
        "Domain": "www.recaptcha.net"
      }
    }
    

    Startup

    services.AddGoogleRecaptcha(Configuration.GetSection("RecaptchaSettings"));
    

    4、简单测试

    我们先把这里改成这样

    1555772858463

    然后调试会得到:

    12

    我还放到了对外地址上,大家有空可以点来玩玩(但提交不要点太快哦,js异步加载token太快会报错)

    http://www.sophiawu.cn/

    哦,对了,还有一个坑,就是你点登录按钮后点浏览器的返回按钮,再点登录,这个时候百分百识别为机器人,线上用的时候要注意这个问题

    总结

    以后做有人机验证需求的登录页面,多了个选择,后面多玩下,自己试着用爬虫摸一下这个页面什么的,可靠的话我就投入生产了;

    本文示例代码(也没写什么新内容,大部分是看晓晨大佬那篇博客自己实现了一遍)

    参考

    https://www.cnblogs.com/stulzq/p/10714417.html

  • 相关阅读:
    图像膨胀
    图像腐蚀
    C#多线程与异步
    matplotlib画图总结--多子图布局
    matplotlib画图总结--常用功能
    STM32 MCU一次计算优化和提速
    数字麦克风PDM信号采集与STM32 I2S接口应用--笔记目录
    数字麦克风PDM信号采集与STM32 I2S接口应用(三)
    数字麦克风PDM转PCM与STM32 I2S接口应用----重要文档列表
    数字麦克风PDM信号采集与STM32 I2S接口应用(二)
  • 原文地址:https://www.cnblogs.com/xiaxiaolu/p/10753583.html
Copyright © 2020-2023  润新知