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


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或css文件后面跟参数的原因说明
Jan 09 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
深入了解js原型模式
May 30 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面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
php接口隔离原则实例分析
2019/11/11 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python实现带百分比的进度条
2016/06/28 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python Socket传输文件示例
2017/01/16 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python原始套接字编程实例解析
2020/01/29 Python
python的列表List求均值和中位数实例
2020/03/03 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Python 绘制可视化折线图
2020/07/22 Python
学前教育教师求职自荐信
2013/09/22 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
施工员岗位职责
2015/02/10 职场文书
春秋淹城导游词
2015/02/11 职场文书
孔子观后感
2015/06/08 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL