Google reCAPTCHA

Spam from Website Enquiry

网站一般上都会有 Contact Us 页面. 里头有一个表格, 访客可以通过提交表格发出对产品和服务的讯问.

本来是一个质询功能, 但就是有坏人利用这个功能, 给站长提交了广告内容. 本来是给你质询的, 你却拿来发广告给我! 气得我...

更过分的是, 这些还不是"人", 而是用 robot 代劳. 一天就能收到几百封广告邮件.

看图填字

这也不是第一天的事儿了, 解决方案也很早就有了. 就是区分人和机器.

表格提交前要求完成一个小任务, 人类可以轻松完成, 但机器却很难完成的任务.

比如早年的看图填字.

但随着机器识别度越来越好, 只能把图越弄越乱, 最后连人都很难看得出里面的字了...严重影响了人类的使用体验.

Google reCAPTCHA 2.0

后来 Google 推出了 reCAPTCHA 服务. 它是一个 SaaS 服务.

它的体验是这样的

比起看图填字轻松多了.

你可能会想这个机器做不了吗? 还真的哦. Google 搞了一套 JavaScript 会一直监听整个 Page 的游览过程, 一直到最终点击 i'm not a robot.

然后它会依据之前的 tracking 判断访客是不是 robot, 会有一个分数指标 1 到 10 分. 越高就越好 (代表是人操作)

reCAPTCHA 流程和原理

可能你会想, 坏人能不能直接用 JavaScript 做 form submit 呢?

其实是不能的, reCAPTCHA 的工作流程是, JavaScript 负责生成一个 token, 然后和 form 一起提交到服务端.

服务端再把 token 发送到 Google reCAPTCHA SaaS 服务端, 获取这个 token 的分数.

然后你可以依据分数, 自行决定如何处理这个 form submit. 比如, 1分的话, 视为 robot 不处理, 8分以上才 process.

reCAPTCHA 3.0

3.0 对 2.0 做了一些改进. 它把 checkbox 拿掉了. 用户不需要再多点击一下.

在 form submit 的同时, 我们需要调用 JavaScript 去获取 token, 然后一起提交到服务端.

这个体验比之前好了一点点. 但是也引入了另一个小问题.

由于 reCAPTCHA 会 tracking 访客行为, 在这个隐私至上的世界, 必须让用户知道它被 tracking 了, 不然可能挨告.

有几个方式可以做声明

第一种是在网站的右下方显示一个 icon, 这也是 reCAPTCHA 默认显示方式

但很多设计师都不喜欢这个方式, 因为右下角通常是放 live chat, back to top icon 的.

第二种是在 submit button 下面放声明, 只要声明显眼就可以了.

第三种也是在 submti button 附近放 reCAPTCHA icon

Register reCAPTCHA

到官网申请就可以了.

唯一要注意的是, 想本地测试的话, 要 allow localhost, 或者 local IP address

申请完成后到 setting > reCAPTCHA keys 获取 site key 和 secket key

JavaScript reCAPTCHA

import { googleAppSetting } from './google-app-setting';

declare global {
  const grecaptcha: {
    ready: (callback: unknown) => void;
    execute: (siteKey: string, options: { action: string }) => Promise<string>;
  };
}

let scriptLoadedPromise: Promise<void> | null = null;

export function appendScriptAsync(): Promise<void> {
  if (scriptLoadedPromise !== null) {
    return scriptLoadedPromise;
  } else {
    scriptLoadedPromise = new Promise(resolve => {
      const script = document.createElement('script');
      script.onload = () => {
        resolve();
      };
      script.src = `https://www.google.com/recaptcha/api.js?render=${googleAppSetting.google.reCaptcha.siteKey}`;
      document.head.appendChild(script);
    });
    return scriptLoadedPromise;
  }
}

export async function GetTokenAsync(action: string): Promise<string> {
  await appendScriptAsync();
  return new Promise<string>(resolve => {
    grecaptcha.ready(async () => {
      grecaptcha.execute(googleAppSetting.google.reCaptcha.siteKey, { action }).then(resolve);
    });
  });
}

使用

ASP.NET Core reCAPTCHA

using System.Text.Json.Serialization;
using Microsoft.AspNetCore.Http.Extensions;
using Microsoft.Extensions.Options;

namespace Stooges.ReCaptcha;
public class ReCaptchaHttpResponseData
{
    public bool Success { get; set; }

    [JsonPropertyName("challenge_ts")]
    public DateTime ChallengeTs { get; set; } // utm 时间

    public string Hostname { get; set; } = ""; // domain

    public decimal Score { get; set; }

    public string Action { get; set; } = "";

    [JsonPropertyName("error-codes")]
    public List<string>? ErrorCodes { get; set; }
}
public class ReCaptchaHttpClient
{
    private readonly HttpClient _httpClient;
    private readonly ReCaptchaOptions _reCaptchaOption;

    public ReCaptchaHttpClient(
        HttpClient httpClient,
        IOptionsSnapshot<ReCaptchaOptions> reCaptchaOptionsAccessor
    )
    {
        _reCaptchaOption = reCaptchaOptionsAccessor.Value;
        var uri = new Uri("https://www.google.com/recaptcha/api/siteverify");
        httpClient.BaseAddress = uri;
        _httpClient = httpClient;
    }

    /// <summary>
    ///
    /// </summary>
    /// <param name="token">passing from fontend</param>
    /// <param name="action">for protect hacking, should match with fontend</param>
    /// <returns>score, if error will also return 0</returns>
    public async Task<decimal> GetScoreAsync(string token, string action)
    {
        var queryBuilder = new QueryBuilder
            {
                { "secret", _reCaptchaOption.SecretKey },
                { "response", token }
            };
        var queryString = queryBuilder.ToString();
        var response = await _httpClient.PostAsync(queryString, new StringContent(""));
        if (!response.IsSuccessStatusCode) { return 0; }
        var responseDataJson = await response.Content.ReadAsStringAsync();
        var responseData = JsonSerializer.Deserialize<ReCaptchaHttpResponseData>(
            responseDataJson,
            new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase }
        )!;
        if (!responseData.Success) { return 0; }
        if (responseData.Action != action) { return 0; }
        return responseData.Score;
    }
}

使用