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 基於其非常安全的特性以及簡便的使用方法和免費，推薦大家使用它，特別是替換現有的圖片驗證碼。