广告位联系
返回顶部
分享到

asp.net core 腾讯验证码的接入教程

asp.net 来源:互联网搜集 作者:秩名 发布时间:2019-11-03 17:45:35 人浏览
摘要

Intro 之前使用的验证码服务是用的极验验证,而且是比较旧的,好久之前接入的,而且验证码服务依赖 Session,有点不太灵活,后来发现腾讯也有验证码服务,而且支持小程序,并且是唯一支持小程序的验证码。。(垄断么。。) 而且相比之下,腾讯验证码不需要依

Intro

之前使用的验证码服务是用的极验验证,而且是比较旧的,好久之前接入的,而且验证码服务依赖 Session,有点不太灵活,后来发现腾讯也有验证码服务,而且支持小程序,并且是唯一支持小程序的验证码。。(垄断么。。)

而且相比之下,腾讯验证码不需要依赖 Session,集成起来也比较方便,于是就用了腾讯验证码,详细参考:https://007.qq.com/product.html?ADTAG=index.block-[-/a>

验证流程

服务器端接入
 

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 配置:

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();
}

使用效果:



老版网站接入效果:



Reference

https://github.com/WeihanLi/ActivityReservation-[-/a>
https://reservation.weihanli.xyz/Home/Reservate-[-/a>
https://reservation-client.weihanli.xyz/reservation/new-[-/a>
https://cloud.tencent.com/document/product/1110/36841-[-/a>


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jianshu.com/p/f1ce601ac353
相关文章
  • ASP.NET MVC使用Identity增删改查用户

    ASP.NET MVC使用Identity增删改查用户
    源码在这里:https://github.com/darrenji/UseIdentityCRUDUserInMVC,本地下载 在VS2013中创建一个MVC项目,用默认的无身份验证作为身份验证机制。 通过
  • WPF实现雷达扫描图的绘制介绍

    WPF实现雷达扫描图的绘制介绍
    实现一个雷达扫描图。 源代码在TK_King/雷达 (gitee.com) https://gitee.com/TK_King/radar,自行下载就好了 制作思路 绘制圆形(或者称之轮) 绘制分割
  • .Net Core之JWT授权介绍

    .Net Core之JWT授权介绍
    JSON Web令牌(JWT)是一个开放标准(RFC 7519),它定义了一种紧凑且自包含的方式,用于在各方之间安全地传输信息作为JSON对象。由于此信息
  • ASP.NET Core使用Middleware设置有条件允许访问路由

    ASP.NET Core使用Middleware设置有条件允许访问路由
    1.简介 有时,我们可能在Web API中包含一些具有调试功能的请求。比如我们上次的文章中为什么ASP.NETCore数据库连接串的值和appsettings.json配的
  • ASP.NET Core使用功能开关控制路由访问操作

    ASP.NET Core使用功能开关控制路由访问操作
    前言: 在前面的文章,我们介绍了使用Middleware有条件地允许访问路由(《ASP.NETCore使用Middleware设置有条件允许访问路由》)。 而对于一些
  • ASP.NET Core使用功能开关控制路由访问操作(续)

    ASP.NET Core使用功能开关控制路由访问操作(续)
    前言: 在前面的文章,我们介绍了? ?使用功能开关控制路由访问??。 但其实我们使用了2个条件做的判断: 1 2 3 4 var isDebugEndpoint = context.Re
  • 详解MediatR的使用
    环境: .NET 5 ASP.NET Core MVC (project) 1. MediatR MediatR .NET中的简单中介者模式实现,一种进程内消息传递机制(无其他外部依赖)。支持以同步或
  • .NET Core 3.0里新的JSON API介绍
    为什么需要新的 JSON API ? JSON.NET 大家都用过,老版本的 ASP.NET Core 也依赖于 JSON.NET 。 然而这个依赖就会引起一些版本问题:例如 ASP .NET
  • Net Core Web Api项目与在NginX下发布的方法
    前言 本文将介绍Net Core的一些基础知识和如何NginX下发布Net Core的WebApi项目。 测试环境 操作系统:windows 10 开发工具:visualstudio 2019 框架:
  • ASP.NET Core中的Http缓存使用
    Http响应缓存可减少客户端或代理对web服务器发出的请求数。响应缓存还减少了web服务器生成响应所需的工作量。响应缓存由Http请求中的he
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计