asp.net core 腾讯验证码的接入示例代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ASP.NET Core使用SkiaSharp实现验证码的示例代码

    前言 本文并没有实现一个完成的验证码样例,只是提供了在当前.NET Core 2.0下使用Drawing API的另一种思路,并以简单Demo的形式展示出来. Skia Skia是一个开源的二维图形库,提供各种常用的API,并可在多种软硬件平台上运行.谷歌Chrome浏览器.Chrome OS.安卓.火狐浏览器.火狐操作系统以及其它许多产品都使用它作为图形引擎. Skia由谷歌出资管理,任何人都可基于BSD免费软件许可证使用Skia.Skia开发团队致力于开发其核心部分, 并广泛采纳各方对于Sk

  • asp.net core 腾讯验证码的接入示例代码

    Intro 之前使用的验证码服务是用的极验验证,而且是比较旧的,好久之前接入的,而且验证码服务依赖 Session,有点不太灵活,后来发现腾讯也有验证码服务,而且支持小程序,并且是唯一支持小程序的验证码..(垄断么..) 而且相比之下,腾讯验证码不需要依赖 Session,集成起来也比较方便,于是就用了腾讯验证码,详细参考:https://007.qq.com/product.html?ADTAG=index.block 验证流程 服务器端接入 using System.ComponentMod

  • ASP.NET Core 使用Cookie验证身份的示例代码

    ASP.NET Core 1.x提供了通过Cookie 中间件将用户主体序列化为一个加密的Cookie,然后在后续请求中验证Cookie并重新创建主体,并将其分配给HttpContext.User属性.如果您要提供自己的登录界面和用户数据库,可以使用作为独立功能的Cookie中间件. ASP.NET Core 2.x的一个主要变化是不再存在Cookie中间件.取而代之的是在Startup.cs文件中的Configure方法中的调用UseAuthentication方法会添加设置HttpConte

  • .Net Core 实现图片验证码的实现示例

    记录自己的学习,参考了网上各位大佬的技术,往往在登录的时候需要使用到验证码来进行简单的一个校验,这边使用在.net core上进行生成图片二维码 思路很简单=> 生成一个随机数->保存到服务端Session->生成随机码对应的图片给前端->登录的时候进行校验(也可以在后端进行随机码的token加密,存到Cooick里面在前端进行校验) 第一步:生成随机数 private static string RndNum(int VcodeNum) { //验证码可以显示的字符集合 stri

  • ASP.NET Core获取正确查询字符串参数示例

    目录 前言 表单域 解决方案 可空类型 [BindRequired] 属性 前言 有网友在交流群中询问,如何获取查询字符串参数: 默认情况下,ASP.NET Core 的模型绑定以键值对的形式从 HTTP 请求中的以下列表中指示的顺序扫描源并获取数据: 表单域 请求正文 路由数据 查询字符串参数 上传的文件 因此,不需要任何配置,即可在 Action 中获取到查询字符串参数: [HttpGet] public string Demo(int id, int price) { return $"i

  • node中短信api实现验证码登录的示例代码

    1. node服务器搭建+数据库的连接 此处操作比较简洁易懂,可参考:node服务器快速搭建 2. 短信api的使用 对于短信api ,此处以 阿里云的短信服务为例(只要是有短信服务的平台皆可使用) 2.1 登录平台进行参数配置 1. 进入短信控制台,对要发送的短信格式进行配置,如果没有签名,需要申请签名后操作 2. 点击查看 API Demo 进入配置生成的api:此时选择 Node.js 2.2 根据生成的api 在项目中使用 代码注释详尽 const Core = require('@al

  • ASP.NET实现Hadoop增删改查的示例代码

    本文介绍了ASP.NET实现Hadoop增删改查的示例代码,分享给大家,具体如下: packages.config <?xml version="1.0" encoding="utf-8"?> <packages> <package id="Microsoft.AspNet.WebApi.Client" version="4.0.20505.0" targetFramework="net

  • Redis实现短信验证码登录的示例代码

    目录 效果图 pom.xml applicatoin.yml Redis配置类 controller serviceImpl mapper 效果图 发送验证码 输入手机号.密码以及验证码完成登录操作 pom.xml 核心依赖 <dependencies> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version&g

  • vue实现通过手机号发送短信验证码登录的示例代码

    本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码,分享给大家,具体如下: <template> <div class="get-mobile" @touchmove.prevent> <div class="main"> <div class="pt-20 pr-15 pl-15 pb-20"> <input class="input mb-15" v-mod

  • WPF+ASP.NET SignalR实现后台通知功能的示例代码

    目录 涉及知识点 前提条件 服务端 客户端 运行示例 在实际业务中,当后台数据发生变化,客户端能够实时的收到通知,而不是由用户主动的进行页面刷新才能查看,这将是一个非常人性化的设计.比如数字化大屏,并没有人工的干预,而是自动的刷新数据,那如何才能实现数据的实时刷新呢?本文以一个简单示例,简述如何通过WPF+ASP.NET SignalR实现消息后台通知以及数据的实时刷新,仅供学习分享使用,如有不足之处,还请指正. 通过上一篇文章的学习,了解了如何通过SignalR实现在线聊天功能,在示例中,我们

  • ASP.NET Core中间件计算Http请求时间示例详解

    ASP.NET Core通过RequestDelegate这个委托类型来定义中间件 public delegate Task RequestDelegate(HttpContext context); 可将一个单独的请求委托并行指定为匿名方法(称为并行中间件),或在类中对其进行定义.可通过Use,或在Middleware类中配置要传递给委托执行的方法(参数类型HttpContext,返回值类型Task). public static IApplicationBuilder Use(this IA

随机推荐