歡迎光臨
每天分享高質量文章

ASP.NET Core 使用 Google 驗證碼(Google reCAPTCHA)

關心最多的問題,不FQ能不能用,答案是能。Google官方提供額外的域名來提供服務,國內可以正常使用。

一. 前言

驗證碼在我們實際的生活場景中非常常見,可以防止惡意破解密碼、刷票、論壇灌水、刷註冊等等。現在的網站基本都有使用驗證碼來對使用者的行為進行驗證。從簡單的文字驗證碼、圖片驗證碼、滑動驗證碼、圖片選擇驗證碼等,驗證碼一直在進化,在和“黑惡勢力”做鬥爭。Google 驗證碼是 Google 提供的一項免費的驗證碼服務,接入非常簡單,推薦用它來替換傳統的圖片驗證碼。

二. Google reCAPTCHA 介紹

Google reCAPTCHA 目前已經推出V3版本,比V2版本更加安全而且簡單。本文主要也是介紹V3版本的使用。Google reCAPTCHA 是採用使用者行為驗證型別的驗證碼,目前來說幾乎不能被打碼平臺自動打碼(這裡指 Google reCAPTCHA 並不是指所有使用者行為驗證碼,據說Google reCAPTCHA還是用了js vmp虛擬機器技術),也只能人工打碼。

V2 版本,可能大家都見過:

V3 版本不需要點選

Google reCAPTCHA v3 會對每一個請求傳回一個評分,不需要與使用者進行互動,該分數基於使用者和網站的互動。它的主要流程主要分為五步:

  1. 使用 sitekey 載入JavaScript API
  2. 在操作或頁面載入時呼叫 grecaptcha.execute
  3. 透過請求將令牌傳送到後端
  4. 後端將令牌和 SecretKey 傳送到 Google 進行驗證,Google 將會給你傳回一個評分
  5. 判斷評分是否和符合要求

評分的數值在0-1之間,越大表示使用者越真實,0表示機器人。

大家可能比較關心,國內網路無法正常使用 Google reCAPTCHA ,這點 Google 給了個解決方案,提供了一個額外的域名,來解決 www.google.com 無法正常訪問的問題,後文詳細介紹。

三. ASP.NET Core 接入

接入過程中會用到XXX上網,請自備。

1. 獲取 Google reCAPTCHA V3 Key

Key 主要分為兩個 SiteKey 和 SecretKey,它們分別用於前端和後端。訪問此處來建立 Key: https://www.google.com/recaptcha/admin/create

需要註意兩個地方,版本選擇V3,然後域名填寫你網站的域名,由於是在本地進行開發測試,所以我這裡直接填寫 localhost。

註冊成功後儲存這兩個 Key

2. ASP.NET Core 接入

(1)建立一個 ASP.NET Core MVC 專案

(2)執行命令安裝 reCAPTCHA 元件

dotnet add package Unicorn.reCAPTCHA.AspNetCore

(3)開啟 appsettings.json 新增配置

"RecaptchaSettings": {
  "SiteKey""",
  "SecretKey""",
  "Version""v3",
  "Domain""www.recaptcha.net"
}

Domain 指使用的 Google reCAPTCHA 服務的域名,可以是www.recaptcha.net 或者 www.google.com,使用前者可以在國內正常使用,不受GFW影響。

(5)在 Startup ConfigureServices 方法裡配置

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

(5)新增一個登入表單 (Razor),並新增 Google reCAPTCHA JS

<script src="https://www.recaptcha.net/recaptcha/api.js?render=">script>

<script>
grecaptcha.ready(function() {
grecaptcha.execute(, {action‘login’}).then(function(token) {

});
});
script>

前端程式碼:

(6)後端驗證

AccountViewModel:

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

    [Required]
    public string Password { get; set; }

    public string GoogleToken { get; set; }
}

後端程式碼:

public class AccountController : Controller
{
    private readonly IRecaptchaService _recaptcha;

    public AccountController(IRecaptchaService recaptcha)
    {
        _recaptcha = recaptcha;
    }
    
    [HttpGet]
    public IActionResult Login()
    {
        return
        View();
    }

    [HttpPost]
    public async Task Login(AccountViewModel model)
    {
        if (ModelState.IsValid)
        {
            var recaptchaReault = await _recaptcha.Validate(model.GoogleToken);

            if (!recaptchaReault.success || recaptchaReault.score == 0m)
            {
                ModelState.AddModelError(string.Empty,"人機驗證失敗,請稍後重試");
            }
        }

        return View(model);
    }
}

主要的驗證邏輯:

var recaptchaReault = await _recaptcha.Validate(model.GoogleToken);

if (!recaptchaReault.success || recaptchaReault.score == 0m)
{
    ModelState.AddModelError(string.Empty,"人機驗證失敗,請稍後重試");
}

註入 IRecaptchaService 使用其 Validate 方法來進行驗證,需要將前端生成的Token傳入,傳回的結果 success 表示Token是否有效,score 表示傳回的評分

四.測試執行

我們將驗證邏輯的閾值改為 1,實際上很少能到達這個表示完美的值,以此來觸發驗證失敗的情況:

可以看到我們的頁面顯示了驗證失敗:

將閾值改回0,將會正常透過驗證。

五.資料

Google reCAPTCHA v3 doc

Google reCAPTCHA v3 faq

reCAPTCHA.AspNetCore (博主修改版 推薦)

基於原版Fork修改,原版我已經提交了pr和issues等待作者更新

reCAPTCHA.AspNetCore (原版)

Admin Console 驗證碼使用情況

Demo:reCAPTCHATest

六.結束

Google reCAPTCHA 基於其非常安全的特性以及簡便的使用方法和免費,推薦大家使用它,特別是替換現有的圖片驗證碼。

已同步到看一看
贊(0)

分享創造快樂