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


Posted in Javascript onJanuary 07, 2020

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

其实腾讯的官方文档写的相当清晰: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;
  }
 },
 // ...
});

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

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

Javascript 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
js自定义select下拉框美化特效
May 12 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
vue实现数据控制视图的原理解析
Jan 07 #Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 #Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 #Javascript
小程序跨页面交互的作用与方法详解
Jan 07 #Javascript
JavaScript实现联动菜单特效
Jan 07 #Javascript
JS实现电商商品展示放大镜特效
Jan 07 #Javascript
JS实现字体背景跑马灯
Jan 06 #Javascript
You might like
使用php4加速网络传输
2006/10/09 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python 性能优化方法小结
2017/03/31 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python实现图片添加文字
2019/11/26 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
大四学生思想汇报
2014/01/13 职场文书
策划总监岗位职责
2014/02/16 职场文书
工程材料采购方案
2014/05/18 职场文书
中央空调节能方案
2014/06/15 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
中小学生学籍证明
2014/10/25 职场文书
教师节寄语2015
2015/03/23 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers