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


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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
JavaScript仿京东轮播图效果
Feb 25 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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python更新列表的方法
2015/07/28 Python
import的本质解析
2017/10/30 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
Structs界面控制层技术
2013/10/11 面试题
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
违纪学生保证书
2015/02/27 职场文书
2016年春节问候语
2015/11/11 职场文书
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL