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

 更新时间: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;
  }
 },
 // ...
});

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

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

相关文章

  • js+html制作简单验证码

    js+html制作简单验证码

    这篇文章主要为大家详细介绍了js结合html制作简单验证码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 使用requirejs模块化开发多页面一个入口js的使用方式

    使用requirejs模块化开发多页面一个入口js的使用方式

    这篇文章主要介绍了使用requirejs模块化开发多页面一个入口js的使用方式,需要的朋友可以参考下
    2017-06-06
  • JS保存、读取、换行、转Json报错处理方法

    JS保存、读取、换行、转Json报错处理方法

    JS保存、读取 换行 转Json报错异常信息:Unexpected token ILLEGAL,具体解决方法如下,感性的朋友可以参考下哈
    2013-06-06
  • js实现新年倒计时效果

    js实现新年倒计时效果

    这篇文章主要介绍了js实现2015年新年倒计时效果,很快就要迎接新的一年,想知道距离2016还有多少天吗?大家可以参考一下这篇文章
    2015-12-12
  • IE事件对象(The Internet Explorer Event Object)

    IE事件对象(The Internet Explorer Event Object)

    不同于DOM事件对象,基于Event Handler授权这种方式,IE事件对象可以用不同的方式进行访问。当一个事件Handler通过DOM 0 级的方式被授权,则这个事件对象将作为window对象的属性而存在
    2012-06-06
  • 工作中常用到的ES6语法

    工作中常用到的ES6语法

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了。这篇文章主要介绍了工作中常用到的ES6语法,需要的朋友可以参考下
    2018-09-09
  • 学习JavaScript设计模式(封装)

    学习JavaScript设计模式(封装)

    这篇文章主要带领大家学习JavaScript设计模式,其中重点介绍封装,举例说明封装的思想,对封装进行详细剖析,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript设计模式之策略模式实例

    JavaScript设计模式之策略模式实例

    这篇文章主要介绍了JavaScript设计模式之策略模式实例,本文分析了Jquery源码并给出了自己的实现,需要的朋友可以参考下
    2014-10-10
  • JavaScript之Blob对象类型的具体使用方法

    JavaScript之Blob对象类型的具体使用方法

    这篇文章主要介绍了JavaScript之Blob对象类型的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • webpack3里使用uglifyjs压缩js时打包报错的解决

    webpack3里使用uglifyjs压缩js时打包报错的解决

    这篇文章主要介绍了webpack3里使用uglifyjs压缩js时打包报错的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论