1. 程式人生 > >ASP.NET Core 使用 Google 驗證碼(reCAPTCHA v3)代替傳統驗證碼

ASP.NET Core 使用 Google 驗證碼(reCAPTCHA v3)代替傳統驗證碼

github settings src erro 需要 tar 賬號 繼承 ptc

技術分享圖片

寫在前面

友情提示:

Google reCAPTCHA(v3下同) 的使用不需要“梯子”,但申請賬號的時候需要!

Google reCAPTCHA 的使用不需要“梯子”,但申請賬號的時候需要!

Google reCAPTCHA 的使用不需要“梯子”,但申請賬號的時候需要!

那天上班路上刷博客園,看到曉晨大佬的ASP.NET Core 使用 Google 驗證碼(Google reCAPTCHA)手癢不已,回家立馬抽空自己也寫了一遍(基本上抄曉晨大佬的),趁周末寫個文,揮發下余溫;(然而今天晚上下班才匆忙收尾。。。)

日常所見各類奇葩驗證碼

這個太有名了,必須前排

技術分享圖片

京東的

技術分享圖片

中文的:

技術分享圖片

喪心病狂的:

技術分享圖片

面對這堆無力吐槽的驗證碼,降低用戶體驗不說,也提高了開發成本;

很多現在很多公司驗證碼是用了第三方的,極驗、網易雲盾等等。

也有很多公司的驗證碼(人機識別)模塊是自己做的,有的甚至做了幾套,還有更甚的甚至用上了理解圖卷積算法,堪稱喪心病狂;

但現在爬蟲橫行,惡意爬取數據,大量肉雞爬取幾乎等於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

這裏很簡單啦,照著我的圖瞎點就行了;

技術分享圖片

點提交之後,得到:

這兩個kes是配置用的,作用頁面也說清楚了;

技術分享圖片

很簡單,ok,接下來看看怎麽在.net core站點中使用;

繼承入Asp.net Core中

1、創建項目

技術分享圖片

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": "剛剛申請的",
    "SecretKey": "6LdPA58UAAAAAAPxN9TltpQ4C3a-_CjGX2hTHJHX",
    "Version": "v3",
    "Domain": "www.recaptcha.net"
  }
}

Startup

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

4、簡單測試

我們先把這裏改成這樣

技術分享圖片

然後調試會得到:

技術分享圖片

我還放到了對外地址上,大家有空可以點來玩玩(但提交不要點太快哦,js異步加載token太快會報錯)

http://www.sophiawu.cn/

哦,對了,還有一個坑,就是你點登錄按鈕後點瀏覽器的返回按鈕,再點登錄,這個時候百分百識別為機器人,線上用的時候要註意這個問題

總結

以後做有人機驗證需求的登錄頁面,多了個選擇,後面多玩下,自己試著用爬蟲摸一下這個頁面什麽的,可靠的話我就投入生產了;

本文示例代碼(也沒寫什麽新內容,大部分是看曉晨大佬那篇博客自己實現了一遍)

參考

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

ASP.NET Core 使用 Google 驗證碼(reCAPTCHA v3)代替傳統驗證碼