微信小程序接入腾讯云验证码的方法步骤

 更新时间:2020年01月07日 09:40:14   作者:smile1213  
这篇文章主要介绍了微信小程序接入腾讯云验证码的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言:最近做了一个小程序抽奖的活动,出现了部分用户恶意薅羊毛的现象,因此考虑接入腾讯云的验证码。

其实腾讯的官方文档写的相当清晰:https://cloud.tencent.com/doc...
不想啃文档的筒子们的就往下继续看吧~(虽然大同小异)

整体效果

1、小程序触发验证,跳转到验证码小程序
2、在验证码小程序内通过验证,并携带参数跳回原来的小程序
3、在原来的小程序内,监测携带回的参数,并作后续操作

前提条件

验证码接入前,需要先在验证码控制台中注册 AppID 和 AppSecret,注册完成后,您可以在控制台的基础配置中查看 AppID (下文extraData中使用) 以及 AppSecret。

注意,这里的 appId 和 appSecret 和小程序后台的是不一致的!

接入步骤

1、在你需要的地方,唤起验证码小程序

首先在 app.json 配置 navigateToMiniProgramAppIdList,如下:

{
 "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"]
}

这个appId是官方文档中直接提供的,搬上去就好。

假设你的唤起方式是通过一个这样的按钮事件:

<button bindtap="toTCaptcha">验证</button>
toTCaptcha: function () {
  wx.navigateToMiniProgram({
   appId: 'wx5a3a7366fd07e119',
   path: '/pages/captcha/index',
   extraData: {
    appId: 'appId' //您申请的验证码的 appId
   }
  })
 }

2、在 app.js 获取验证结果

由于小程序间相互跳转过程中产生的数据仅能在 app.js 中获取到,故需要在 app.js 的 onShow 中添加以下代码,来捕获验证结果 captchaResult

App({
 // ...
 onShow: function(options) {
  // 解决各类回调的兼容问题
  if (!this.captchaTicketExpire) this.captchaTicketExpire = {};

  if (options.scene === 1038 && options.referrerInfo.appId === 'wx5a3a7366fd07e119') {
   const result = options.referrerInfo.extraData;
   if (result.ret === 0) {
    const ticket = result.ticket;
    if (!this.captchaTicketExpire[ticket]) {
     this.captchaResult = result;
     this.captchaTicketExpire[ticket] = true;
    }
   } else {
    // 用户关闭了验证码
    // 这里可以加上一些验证失败提示
   }
  }
 },
 // ...
});

验证结果(captchaResult) 参数说明:

3、将验证结果返回至服务端校验

在小程序页面的 onShow 阶段,将验证结果及待提交的表单数据一起提交到服务器,进行校验。

// page.js
const app = getApp()

Page({
 data: {
  // ...
 },
 onShow() {
  const captchaResult = app.captchaResult;
  app.captchaResult = null; // 验证码的票据为一次性票据,取完需要置空
  if (captchaResult && captchaResult.ret === 0) {
   // 将验证码的结果返回至服务端校验,以及后续的操作
   // const ticket = captchaResult.ticket;
   // const randstr = captchaResult.randstr;
  }
 },
 // ...
});

用一个词描述这个开发过程:搬上去!

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

相关文章

  • 基于HTML+JS实现简单的年龄计算器

    基于HTML+JS实现简单的年龄计算器

    JavaScript提供了一些内置的日期和时间函数,有助于从日期(出生日期)开始计算年龄。本文主要介绍了使用这些JavaScript方法,制作一个简单的年龄计算器,快来跟随小编一起学习学习吧
    2021-12-12
  • 详解javascript函数的参数

    详解javascript函数的参数

    javascript函数可以用任意多个参数来调用,而不用管函数定义时指定了几个参数。因为函数是弱类型的,没有方法去声明它所期望的参数类型,并且给任何函数传递任何类型的值都是合法的
    2015-11-11
  • JavaScript canvas绘制折线图

    JavaScript canvas绘制折线图

    这篇文章主要为大家详细介绍了JavaScript canvas绘制折线图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 使用async await 封装 axios的方法

    使用async await 封装 axios的方法

    这篇文章主要介绍了使用async await 封装 axios的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • JS循环中正确使用async、await的姿势分享

    JS循环中正确使用async、await的姿势分享

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,下面这篇文章主要给大家介绍了关于JS循环中正确使用async、await的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • 数组Array进行原型prototype扩展后带来的for in遍历问题

    数组Array进行原型prototype扩展后带来的for in遍历问题

    不同的程序语言都有多种循环语句,而且功能是差不多的,当然使用场合还是有些区别的,比如for与for in,for in比较好用,它不需要预先知道对象属性的长度。
    2010-02-02
  • 用js控制组织结构图可以任意拖拽到指定位置

    用js控制组织结构图可以任意拖拽到指定位置

    用js控制生成了一个组织结构图并设置这个组织结构可以任意拖动到指定位置,具体代码如下
    2014-01-01
  • Dron右键菜单 v1.0

    Dron右键菜单 v1.0

    Dron右键菜单 v1.0...
    2006-10-10
  • JavaScript代码实现简单计算器

    JavaScript代码实现简单计算器

    这篇文章主要为大家详细介绍了JavaScript代码实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 浅谈JavaScript find 方法不支持IE的问题

    浅谈JavaScript find 方法不支持IE的问题

    下面小编就为大家带来一篇浅谈JavaScript find 方法不支持IE的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论