关于微信公众号开发和小程序开发的教程其实网上已经有很多了, 但是基于 koa.js 开发的教程其实不多, 于是接下来对踩坑的经历做一些小结;
自己也写了一个微信工具类, 项目地址是微信工具类 https://github.com/evont/koa-wechat
目录结构
1. 微信网页 js-sdk
1.1. 获取 Access_token
1.2. 获取 api_ticket
1.3. 获取 signature
1.4. 注入权限验证配置
2. 小程序获取用户 openid
微信网页授权
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): http://res.wx.qq.com/open/js/jweixin-1.2.0.js
二, 所有需要使用 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;
- }
来源: https://juejin.im/post/5b417ed1f265da0f8c029a4b