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


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 相关文章推荐
jQuery 性能优化指南(2)
May 21 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
JS实现日期加减的方法
Nov 29 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
PHP脚本数据库功能详解(中)
2006/10/09 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python面向对象编程基础解析(一)
2017/10/26 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
详解Python正则表达式re模块
2019/03/19 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
师德建设实施方案
2014/03/21 职场文书
新农村建设典型材料
2014/05/31 职场文书
大专学生求职自荐信
2014/07/06 职场文书
四风对照检查材料范文
2014/09/27 职场文书
民事起诉书范本
2015/05/19 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python的这些库,你知道多少?
2021/06/09 Python