酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

asp.net

旗下栏目: php js asp Flex Ajax JSP jquery asp.net C语言 java 正则表达式 微信小程序 Android IOS

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

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-11-03
本篇文章主要介绍了asp.net core 腾讯验证码的接入教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

Intro

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

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

验证流程

服务器端接入
 

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"];
});
 

前端接入

前端接入这里不作多介绍了,接入方式多种多样,具体可以参考官方文档:https://cloud.tencent.com/document/product/1110/36841

下面的代码是 angular spa 在前端接入的核心代码

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
https://reservation.weihanli.xyz/Home/Reservate
https://reservation-client.weihanli.xyz/reservation/new
https://cloud.tencent.com/document/product/1110/36841

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

相关文章

  • 详解asp.net core 授权方法

    详解asp.net core 授权方法

    IAuthorizeDate接口代表了授权系统的源头: public interface IAuthorizeData{ string Policy { get; set; } string Roles { get; set; } string AuthenticationSchemes { get; set; }} 接口中定义的三个属性分别代表了三种授权类型: 1......
    01-23
  • .Net获取IP地址的方法解析

    .Net获取IP地址的方法解析

    获取本机IP 2.获取网页客户端IP 代码如下: /// summary /// 获取IPv4地址 /// /summary /// returns/returns public static string GetIP4Address(HttpRequest request = null) { FuncIPAddress, bool f = e = e.AddressFamily.ToString......
    01-16
  • asp.net实现存储和读取数据库图片

    asp.net实现存储和读取数据库图片

    1. 创建asp.net web窗体项目 代码如下: body form id=form1 runat=server h2上传图片/h2 div asp:FileUpload ID=ful_image runat=server / asp:Button ID=btn_submit runat=server Text=提交 / asp:Label ID=lbl_message runat=server T......
    11-09
  • asp.net core 腾讯验证码的接入教程

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

    Intro 之前使用的验证码服务是用的极验验证,而且是比较旧的,好久之前接入的,而且验证码服务依赖 Session,有点不太灵活,后来发现腾讯也有验证码服务,而且支持小程序,并且是唯一支持小程序的验证码。。(垄断么。。) 而且相比之下......
    11-03
  • NET Core 3.0 AutoFac内置DI替换的新姿势

    NET Core 3.0 AutoFac内置DI替换的新姿势

    NET Core 3.0 和 以往版本不同,替换AutoFac服务的方式有了一定的变化,在尝试着升级项目的时候出现了一些问题。 原来在NET Core 2.1时候,AutoFac返回一个 IServiceProvider 参数注入到ConfigureServices .NET Core 服务中,基本大痣是......
    10-03
  • ASP.NET Core中利用Csp标头对抗Xss攻击的方法

    ASP.NET Core中利用Csp标头对抗Xss攻击的方法

    简而言之,CSP是网页控制允许加载哪些资源的一种方式。例如,页面可以显式声明允许从中加载JavaScript,CSS和图像资源。这有助于防止跨站点脚本(XSS)攻击等问题。 它也可用于限制协议,例如限制通过HTTPS加载的内容。CSP通过 Content-S......
    09-10
  • 利用EF6简单实现多租户的应用

    利用EF6简单实现多租户的应用

    什么是多租户 网上有好多解释,有些上升到了架构设计,让你觉得似乎非常高深莫测,特别是目前流行的ABP架构中就有提到多租户(IMustHaveTenant),其实说的简单一点就是再每一张数据库的表中添加一个TenantId的字段,用于区分属于不同的......
    09-10
  • 详解给asp.net core写个中间件记录接口耗时

    详解给asp.net core写个中间件记录接口耗时

    Intro 写接口的难免会遇到别人说接口比较慢,到底慢多少,一个接口服务器处理究竟花了多长时间,如果能有具体的数字来记录每个接口耗时多少,别人再说接口慢的时候看一下接口耗时统计,如果几毫秒就处理完了,对不起这锅我不背。 中间件......
    09-02
  • ASP.NET Core MVC学习之视图组件(View Component)

    ASP.NET Core MVC学习之视图组件(View Component)

    1.视图组件介绍 视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大。视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据。 视图组件特点: 呈块状,而不是整个响应 包括在控制器和视图之间发现的相同的关注点和......
    08-17
  • ASP.NET如何自定义项目模板

    ASP.NET如何自定义项目模板

    本篇文章介绍ASP.NET如何自定义项目模板 前言 在微服务架构盛行的时代,一言不合就新建一个服务,虽然搭建服务并没什么难度,但不可避免的是每个人搭建出来的架子会存在差异,这很合理,因为每个开发者的个人风格、工作经验都不一样,难......
    08-09

最新更新