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


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 相关文章推荐
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
vue v-model的用法解析
Oct 19 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.MVC的模板标签系统(三)
2006/09/05 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
vue-ajax小封装实例
2017/09/18 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python生成器推导式用法简单示例
2019/10/08 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
元宵节主持词
2014/03/25 职场文书
募捐倡议书
2014/04/14 职场文书
禁止酒驾标语
2014/06/25 职场文书
餐馆开业致辞
2015/08/01 职场文书
python 爬取华为应用市场评论
2021/05/29 Python