ASP.NET Core 使用 Google 驗證碼（Google reCAPTCHA）

本文轉載自查看原文 2019-04-16 08:54 5909 ASP.NET Core

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

一. 前言

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

二. Google reCAPTCHA 介紹

Google reCAPTCHA 目前已經推出V3版本，比V2版本更加安全而且簡單。本文主要也是介紹V3版本的使用。Google reCAPTCHA 是采用用戶行為驗證類型的驗證碼，目前來說幾乎不能被打碼平台自動打碼（這里指 Google reCAPTCHA 並不是指所有用戶行為驗證碼，據說Google reCAPTCHA還是用了js vmp虛擬機技術），也只能人工打碼。

V2 版本，可能大家都見過：

1555337458467

V3 版本不需要點擊

Google reCAPTCHA v3 會對每一個請求返回一個評分，不需要與用戶進行交互，該分數基於用戶和網站的互動。它的主要流程主要分為五步：

使用 sitekey 加載JavaScript API
在操作或頁面加載時調用 grecaptcha.execute
通過請求將令牌發送到后端
后端將令牌和 SecretKey 發送到 Google 進行驗證，Google 將會給你返回一個評分
判斷評分是否和符合要求

評分的數值在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

1555339778787

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

注冊成功后保存這兩個 Key

1555339892498

2. ASP.NET Core 接入

（1）創建一個 ASP.NET Core MVC 項目

1555340554052

（2）執行命令安裝 reCAPTCHA 組件

dotnet add package Unicorn.reCAPTCHA.AspNetCore

（3）打開 appsettings.json 添加配置

"RecaptchaSettings": {
  "SiteKey": "<你的SiteKey>",
  "SecretKey": "<你的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=<你的SiteKey>"></script>
  <script>
  grecaptcha.ready(function() {
      grecaptcha.execute('<你的SiteKey>', {action: 'login'}).then(function(token) {
         //將Token寫入隱藏域等等
      });
  });
  </script>

前端代碼：

1555344392229

（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;
    }
    // GET
    [HttpGet]
    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 == 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 表示返回的評分