关于微信公众号开发和小程序开发的教程其实网上已经有很多了,但是基于koa.js 开发的教程其实不多,于是接下来对踩坑的经历做一些小结;
自己也写了一个微信工具类,项目地址是微信工具类
目录结构
微信网页授权
1. 获取Access_token
access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。接口调用请求说明
`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${appsecret}`
| 参数 | 必须 | 说明 |
|---|---|---|
| grant_type | 是 | 授权类型,获取access_token填写client_credential |
| appid | 是 | 用户唯一凭证 |
| appsecret | 是 | 用户唯一凭证密钥 |
2. 获取api_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。接口调用请求说明
`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accessToken}&type=jsapi`
| 参数 | 必须 | 说明 |
|---|---|---|
| access_token | 是 | 从上一步中获取或者缓存中未过期的access_token |
| type | 是 | 填写为jsapi |
3. 获取signature
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。- noncestr 实现方式
getNonceStr() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 16; i += 1) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
- timestamp 实现方式
getTimestamp() {
return (`${new Date().valueOf()}`).slice(0, -3);
}
- 加密方式
const crypto = require('crypto');
// ...
getSign(apiTicket, noncestr, timestamp, url) {
const sortData = `jsapi_ticket=${apiTicket}&noncestr=${noncestr}×tamp=${timestamp}&url=${url}`;
return crypto.createHash('sha1').update(sortData).digest('hex');
}
4. 注入权限验证配置
一、 在需要调用JS接口的页面引入如下JS文件,(支持https): res.wx.qq.com/open/js/jwe…
二、所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
小程序授权
// 一个存放小程序对应的appid 和secret的对象,这里可以实现为存放在数据,演示说明则简略
const miniGameMap = {
app: {
appid: '...',
appsecret: '...',
}
}
getMiniLoginData(code, appName) {
const appInfo = miniGameMap[appName];
let result = {
errcode: 40029,
errMsg: '无效的小程序信息',
};
if (appInfo) {
const miniappid = appInfo.appid;
const miniappsecret = appInfo.appsecret;
const reqUrl = `https://api.weixin.qq.com/sns/jscode2session?appid=${miniappid}&secret=${miniappsecret}&js_code=${code}&grant_type=authorization_code`;
// HttpClient 可以替换为自定义的请求库,不做限制
result = HttpClient.request(reqUrl).then(HttpClient.responseAdapter);
}
return result;
}