验证码主要对于网站建设中的会员注册、登录以及信息填写的页面中，主要作用是为了防止机器人来注册和填写相关的信息。从最开始的单纯的数字验证，到数字加字母组合验证，再到汉字验证，随时机器人识别技术的不断升级，这些验证码都在被不断的破解，也就失去了验证码的功能。后来腾讯公司推出的滑动验证解决了很多站长的这个问题，那么自己的网站如何来接入腾讯的滑动验证码呢？今天绵阳动力网络公司就来大家先来介绍ASP.NET的网站接入腾讯滑动验证码的实现方法：

我们先来看看滑动验证码的效果：

首先是服务器端接入：

using System.ComponentModel.DataAnnotations;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using Newtonsoft.Json;
using WeihanLi.Extensions;
 
namespace ActivityReservation.Common
{
  public class TencentCaptchaOptions
  {
    /// <summary>
    /// 客户端AppId
    /// </summary>
    [Required]
    public string AppId { get; set; }
 
    /// <summary>
    /// App Secret Key
    /// </summary>
    [Required]
    public string AppSecret { get; set; }
  }
 
  public class TencentCaptchaRequest
  {
    /// <summary>
    /// 验证码客户端验证回调的票据
    /// </summary>
    public string Ticket { get; set; }
 
    /// <summary>
    /// 验证码客户端验证回调的随机串
    /// </summary>
    public string Nonce { get; set; }
 
    /// <summary>
    /// 提交验证的用户的IP地址（eg: 10.127.10.2）
    /// </summary>
    public string UserIP { get; set; }
  }
 
  public class TencentCaptchaHelper
  {
    private class TencentCaptchaResponse
    {
      /// <summary>
      /// 1:验证成功，0:验证失败，100:AppSecretKey参数校验错误
      /// </summary>
      [JsonProperty("response")]
      public int Code { get; set; }
 
      /// <summary>
      /// 恶意等级 [0, 100]
      /// </summary>
      [JsonProperty("evil_level")]
      public string EvilLevel { get; set; }
 
      /// <summary>
      /// 错误信息
      /// </summary>
      [JsonProperty("err_msg")]
      public string ErrorMsg { get; set; }
    }
 
    private const string TencentCaptchaVerifyUrl = "https://ssl.captcha.qq.com/ticket/verify";
    private readonly TencentCaptchaOptions _captchaOptions;
    private readonly ILogger _logger;
    private readonly HttpClient _httpClient;
 
    public TencentCaptchaHelper(
      IOptions<TencentCaptchaOptions> option,
      ILogger<TencentCaptchaHelper> logger,
      HttpClient httpClient)
    {
      _captchaOptions = option.Value;
      _logger = logger;
      _httpClient = httpClient;
    }
 
    public async Task<bool> IsValidRequestAsync(TencentCaptchaRequest request)
    {
      // 参考文档：https://007.qq.com/captcha/#/gettingStart
      var response = await _httpClient.GetAsync(
        $"{TencentCaptchaVerifyUrl}?aid={_captchaOptions.AppId}&AppSecretKey={_captchaOptions.AppSecret}&
Ticket={request.Ticket}&Randstr={request.Nonce}&UserIP={request.UserIP}");
      var responseText = await response.Content.ReadAsStringAsync();
      if (responseText.IsNotNullOrEmpty())
      {
        _logger.Debug($"Tencent captcha verify response:{responseText}");
        var result = responseText.JsonToType<TencentCaptchaResponse>();
        if (result.Code == 1)
        {
          return true;
        }
      }
      return false;
    }
  }
}

接着是Startup 配置：

services.AddHttpClient<TencentCaptchaHelper>(client => client.Timeout = TimeSpan.FromSeconds(3))
  .ConfigurePrimaryHttpMessageHandler(() => new NoProxyHttpClientHandler());
services.AddTencentCaptchaHelper(options =>
{
  options.AppId = Configuration["Tencent:Captcha:AppId"];
  options.AppSecret = Configuration["Tencent:Captcha:AppSecret"];
});

最后是前端接入：

private loadCaptcha(): void {
 var tCaptcha = document.getElementById("tCaptcha");
 if (tCaptcha) {
  this.InitCaptcha();
  return;
 }
 let script = <any>document.createElement('script');
 script.id = "tCaptcha";
 script.type = 'text/javascript';
 script.src = "https://ssl.captcha.qq.com/TCaptcha.js"
 if (script.readyState) { //IE
  script.onreadystatechange = () => {
   if (script.readyState === "loaded" || script.readyState === "complete") {
    this.InitCaptcha();
   }
  };
 } else { //Others
  script.onload = () => {
   this.InitCaptcha();
  };
 }
 document.getElementsByTagName('body')[0].appendChild(script);
}
 
private InitCaptcha(): void {
 let captchaDom = document.getElementById('TencentCaptcha1');
 if (!captchaDom) {
  return;
 }
 this.tencentRecaptcha = new TencentCaptcha(
  captchaDom, appId, (res) => {
   this.captchaValid = false;
   console.log(res);
   // res（用户主动关闭验证码）= {ret: 2, ticket: null}
   // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
   if (res.ret === 0) {
    this.captchaInfo.nonce = res.randstr;
    this.captchaInfo.ticket = res.ticket;
    this.captchaValid = true;
    this.tencentRecaptcha.destroy();
 
    let button = <HTMLElement>document.getElementById("btnSubmit");
    button.click();
   }
  }
 );
 console.log(`captcha inited`);
 this.tencentRecaptcha.show();
}

前端接入这里不作多介绍了，接入方式多种多样，具体可以参考官方文档：https://cloud.tencent.com/document/product/1110/36841，上面的代码是 angular spa 在前端接入的核心代码。