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

時間 2019-11-08

標籤 asp.net asp core 使用 google 驗證碼 recaptcha 欄目 ASP 简体版

原文原文鏈接

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

一. 前言

驗證碼在咱們實際的生活場景中很是常見，能夠防止惡意破解密碼、刷票、論壇灌水、刷註冊等等。如今的網站基本都有使用驗證碼來對用戶的行爲進行驗證。從簡單的文字驗證碼、圖片驗證碼、滑動驗證碼、圖片選擇驗證碼等，驗證碼一直在進化，在和「黑惡勢力」作鬥爭。Google 驗證碼是 Google 提供的一項免費的驗證碼服務，接入很是簡單，推薦用它來替換傳統的圖片驗證碼。前端

二. Google reCAPTCHA 介紹

Google reCAPTCHA 目前已經推出V3版本，比V2版本更加安全並且簡單。本文主要也是介紹V3版本的使用。Google reCAPTCHA 是採用用戶行爲驗證類型的驗證碼，目前來講幾乎不能被打碼平臺自動打碼（這裏指 Google reCAPTCHA 並非指全部用戶行爲驗證碼，聽說Google reCAPTCHA仍是用了js vmp虛擬機技術），也只能人工打碼。git

V2 版本，可能你們都見過：github

V3 版本不須要點擊shell

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

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

評分的數值在0-1之間，越大表示用戶越真實，0表示機器人。後端

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

三. 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": "<你的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>

前端代碼：

（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 表示返回的評分