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

 更新时间: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 pushlet XMLAdapter适配器用法案例解析

    JS pushlet XMLAdapter适配器用法案例解析

    这篇文章主要介绍了JS pushlet XMLAdapter适配器用法案例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • js实现点赞按钮功能的实例代码

    js实现点赞按钮功能的实例代码

    这篇文章主要介绍了js实现点赞按钮功能,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 理解javascript模块化

    理解javascript模块化

    这篇文章主要帮助大家深入理解javascript模块化,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js中eval方法详解之eval方法的初级应用

    js中eval方法详解之eval方法的初级应用

    js中eval()函数可计算某个字符串,下面这篇文章主要给大家介绍了关于js中eval方法详解之eval方法的初级应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • JavaScript 拖拉时间之drag案例详解

    JavaScript 拖拉时间之drag案例详解

    这篇文章主要介绍了JavaScript 拖拉时间之drag案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • javascript父子通信

    javascript父子通信

    javascript父子通信...
    2007-05-05
  • 微信小程序Page中data数据操作和函数调用方法

    微信小程序Page中data数据操作和函数调用方法

    这篇文章主要介绍了微信小程序Page中data数据操作和函数调用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js实现点赞效果

    js实现点赞效果

    这篇文章主要为大家详细介绍了js实现点赞效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • Javascript中3种实现继承的方法和代码实例

    Javascript中3种实现继承的方法和代码实例

    这篇文章主要介绍了Javascript中3种实现继承的方法和代码实例,这3种方法分别为对象冒充、原型继承、上二者的混合,需要的朋友可以参考下
    2014-08-08
  • 前端性能优化建议

    前端性能优化建议

    这篇文章主要分享了一些前端性能优化的建议,帮助大家提高页面性能,感兴趣的朋友可以了解下
    2020-09-09

最新评论