在微信项目的开发的时候, 经常需要对微信 jssdk 提供的接口进行调试, 比如说录音, 分享 , 上传图像等接口, 但是微信 jssdk 要求绑定安全域名才能使用其提供的一系列功能 , 而在开发环境中使用 localhost 或者本地 ip 无法完成域名的认证和绑定, 所以无法在本地调试 当然有一种迫不得已方法 , 就是在本地开发完 , 打包发到公司的测试服务器上 , 利用测试服务器认证后的域名进行调试, 每次改动, 调试都要发一遍测试, 显然这种方法非常麻烦且很不科学, 所以这篇文章就针对这个问题介绍一下如何利用 ngrok 和 express 解决开发环境中微信接口的调试问题
一: 首先介绍一下 ngrok,ngrok 主要的功能就是将本地的 ip 映射到外网 , 并且分配给你一个可用的域名, 通过这个域名可以让外网用户打开你的本地的 web 服务, 使用起来也很简单, 官网也有文档也有详细介绍 这里简单的介绍一下使用方法, 首先去 ngrok 的官网下载 ngrok 的对应的客户端 , 并且注册用户 , 可以通过你的 github 账号或者 google 账号注册 , 注册完成后再个人中心打开 auth 选项, 复制这里的 authtoken, 如下图:
(这里就以 window 版本为例), 然后下载完成解压, 会有一个 ngrok.exe 文件, 双击运行会出现下面的命令行:
首先我们需要完成 ngrok 的 token 认证, 否则运行会发生错误, 运行一下命令
ngrok authtoken ***************** //* 号就是个人中心中的 token , 复制下来就可以了
认证完成后, 就可以操作了, 上图中的 examples 就是一些常用的示例命令, 我们用到的就是 ngrok http, 后面接的参数就是你本地 web 服务的端口号, 运行后会分配一个外网域名, 通过这个域名就可以访问到你的本地 web 服务,
不过, 这个域名在重启后就会重新分配一个新域名, 导致重启后需要去微信公众平台重新设置一下安全域名和 token 认证 比较遗憾的是在 ngrok1.0 的时候可以通过
ngrok http subdomain=***(自定义域名) 80
固定每次的分配的域名, 但是在 2.0 版本后, 免费用户无法固定域名, 只有付费用户才可以, 虽然每个月只需要 $5, 但是对于不是经常测试的人来说还是完全没有购买欲望, 关键是好像只支持 visaa...... 不过对于想要免费固定域名的胖友来说, 解决办法还是有的, 国内有个 sunny-ngrok , 可以免费申请一个自定义的固定域名 , 具体教程可以去其官网查看, 也不是很复杂, 有问题话可以在评论里面问我, 就不详细讲了当然想要实现外网映射的话还有很多其他方法, 比如使用 npm 安装的 Localtunnel 和花生壳等等, 可以自行了解一下
二: 得到域名后, 接下来我们要做的就是使用该域名完成微信安全域名绑定啦, 我们可以去微信公众平台申请一个测试号, 不过这时候填写时无法通过的, 因为微信认证需要拥有一个自己的服务器正确响应配置请求
测试号申请的时候填写配置信息的 url, 微信服务器会发送一个 get 请求到这个地址上, get 请求会携带一些参数, 我们需要用这些参数生成一个签名和微信参数的签名进行对比, 对比成功接口才会配置成功
因为微信认证需要拥有一个自己的服务器 , 所以这里我们就需要用到 express 搭建一个简单的服务器, 用来完成微信的 token 认证和生成 signature(签名), 搭建的过程也很简单, 参照 express 中文文档, 下面就贴一下官网的步骤:
安装完成过后, 进入 myapp 目录, 创建一个 app.js 的文件 ,
- var express = require('express');
- var crypto = require('crypto') // 使用 npm 安装后引入, 用来生成签名
- var http = require('request') //express 的中间件, 使用 npm 安装, 用来发出请求
- var jsSHA = require('jssha') //jssha 是微信官网提供的 nodejs 版本签名算法, 可以去官网下载官网的 sample 包
- var app = express();
- app.use(express.static('./review')) app.get('/weixin',
- function(req, res) { // 这个 get 接口就是测试号填写的接口, 用来响应微信服务器的请求
- var token = 'weixin' // 注意这里填写 token, 与微信测试号申请时候填写的 token 要保持一致
- var signature = req.query.signature;
- var timestamp = req.query.timestamp;
- var nonce = req.query.nonce;
- var echostr = req.query.echostr;
- /* 加密 / 校验流程如下: */
- //1. 将 tokentimestampnonce 三个参数进行字典序排序
- var array = new Array(token, timestamp, nonce);
- array.sort();
- var str = array.toString().replace(/,/g, "");
- //2. 将三个参数字符串拼接成一个字符串进行 sha1 加密
- var sha1Code = crypto.createHash("sha1");
- var code = sha1Code.update(str, 'utf-8').digest("hex");
- //3. 开发者获得加密后的字符串可与 signature 对比, 标识该请求来源于微信
- if (code === signature) {
- res.send(echostr)
- } else {
- res.send("error");
- }
- });
- var server = app.listen(80,
- function() {
- var host = server.address().address;
- var port = server.address().port;
- console.log('Example app listening at http://%s:%s', host, port);
- });
创建完成后, 运行
node app.js
服务器就开启好了, 上面要注意的几点就是:
1:jssha 不能用 npm 安装, 因为 npm 安装的运行时候会报
Chosen SHA variant is not supported
, 必须使用官网提供的 sample 包, 下载解压后, 选择 node 版本, 打开后将 node_module 里面 jssha 文件复制到项目内的 node_module 里面即可;
2: 这里的 token 值需要和微信测试号中填写的 token 值一致;
现在我们就可以开始填写测试号的参数了, 填写完成微信服务器就会发送请求给你填写的接口了, 都正确响应的话就会弹出配置成功
当然到这还没有结束, 因为前端想要调用 jssdk 的接口还需要通过接口请求完成权限配置, 这里大家可以看一下微信 jssdk 的说明文档, 具体引用步骤这里就不赘述了, 接口请求大概如下:
这个接口主要就是提交当前的 url 请求服务端拿到相应的参数, 完成权限配置, 所以在 express 中还需要在写一个响应 post 请求的接口, 这个接口做的主要的工作就是拿 appid 和 appSerect(测试号提供) 去请求微信提供的接口生成 access_token, 然后拿这个 access_token 再去请求微信提供的接口生成 tiket, 关于这两者文档上都有详细说明最后生成签名, 代码如下
- // noncestr 生成 var createNonceStr = function() {
- return Math.random().toString(36).substr(2, 15);
- };
- // timestamp 时间戳生成 var createTimeStamp = function () {
- return parseInt(new Date().getTime() / 1000) + '';
- };
- // 获取 tiket
- var getTiket = function(data) { // 通过 access_token 获取 tiket
- return new Promise((reslove, reject) = >{
- http.get(`https: //api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${data}&type=jsapi`,
- function(err, res, body) {
- if (res.body.tiket) {
- resoleve(res.body.ticket)
- } else {
- reject(err)
- }
- })
- })
- }
- // 计算签名方法
- var calcSignature = function(ticket, noncestr, ts, url) { // 使用 jssha
- var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '×tamp=' + ts + '&url=' + url;
- shaObj = new jsSHA(str, 'TEXT');
- return shaObj.getHash('SHA-1', 'HEX');
- }
- // 返回给前端配置信息的 post 接口
- app.post('/weixin',
- function(req, res, next) {
- let appId = '******'let appSecret = '******'let url = `https: //api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret }`
- http.get(url,
- function(err, response, body) {
- getTiket(response.body).then(resolve = >{
- let tiket = resolve //tiket
- let nonceStr = createNonceStr() // 随机字符串
- let timeStamp = createTimeStamp() // 时间戳
- let signature = calcSignature(tiket, nonceStr, timeStamp, req.body.url) let obj = { // 将前端需要的参数返回
- data: {
- appId: appId,
- timestamp: timeStamp,
- nonceStr: nonceStr,
- signature: signature
- }
- }
- res.end(JSON.stringify(obj))
- }).
- catch(err = >{}) res.end(JSON.stringify(err))
- });
- })
这里要注意的是微信返回的 access_token 和 tiket 的都有 7200s 的有效期, 所以要进行缓存, 我的代码中没有写缓存的操作代码了, 大家有两种方法:
1. 拿到 access_token 和 tiket 后, 直接写在变量中存下来, 有效期内就不用继续请求接口了, 直接进行签名操作就可以了; 过期后, 在请求一次就好了, 虽然这种方法有点笨, 不过好歹有效期还算长
2. 在服务器拿到 access_token 和 tiket 后, 写入本地的 json 文件中, 具体步骤也不赘述了, 然后判断是否过期, 过期后就重新请求, 没过期就直接读取 json 文件中的数据进行签名
最后呢, 有两种选择:
第一: 把我们的前端项目执行 npm run build 后, 把 dist 文件放入我们的服务器文件夹中, 可以直接用 express 的 static 中间件
app.use(express.static('./dist'))
然后微信开发者工具, 输入分配的域名打开我们的项目, 这样我们不用设置代理了, 不过需要执行 build, 项目大一点的话还是有点浪费时间的;
第二: 就是为我们的开发环境在申请一个域名, 因为现在脚手架的热更新其实就是启动了一个 webpack-dev-sever 的微服务器, 申请域名是后填写开发的端口号就可以了, 使得开发地址和我们的服务器地址的二级域名相同, 不过对于服务器的接口, 开发环境需要设置一下代理, 而且热更新也会失效, 需要手动刷新一下, 不过相对于第一种方法可能会更好一点
两种方法运行成功后查看发出请求如果配置成功, 控制台会出现配置成功的信息如下:
然后我们就可以愉快的在使用 jssdk 的接口了, 再也不求后端, 可以自己在本地测试好所有的接口了, 且不是美滋滋
写的过程中已经尽量详细说明了, 不过难免会漏掉一些细节问题, 欢迎指正和讨论
来源: https://juejin.im/post/5a910c8b5188257a7924bfa5