nodeJS微信JSDK 配置
一、微信公众平台申请一个测试公众号
二、配置nodeJS 使用express框架搭建服务器
微信生成签名步骤:
1.获取token
2.通过token,获取jsapi_ticket
3.生成随机字符串,获取当前时间戳
4.排序拼接生成签名
- 在routes---->index.js
var express = require('express'); var router = express.Router(); var axios = require('axios'); var sha1 = require('sha1'); var fs = require('fs'); let accessTokenJson = require('../user_token'); const APP_ID = 'wx47159511d53720fb' const APP_SECRET = 'e8be2675730af8b743769e34fc8a7267' let config_nonceStr = '' //随机字符串 let config_timestamp = '' //时间戳 /* GET home page. */ router.get('/', function(req, res, next) { res.send('这是首页') }); router.get('/getWxConfig', function (req, res, next) { let url = req.query.url; // 获取url getToken().then(getTicket).then(ret=>{ res.json({ // 返回前端需要的配置config success:true, code:200, config_appid: APP_ID, config_sign: signature(ret, url), config_timestamp, config_nonceStr }) }) }); /*获取token*/ function getToken(){ return new Promise((resolve,reject)=>{ //获取当前时间 var currentTime = new Date().getTime(); if (accessTokenJson.access_token === '' || accessTokenJson.expires_time < currentTime){ axios.get('https://api.weixin.qq.com/cgi-bin/token',{ params:{ appid: APP_ID, secret: APP_SECRET, grant_type: 'client_credential' } }).then(res=>{ accessTokenJson.access_token = res.data.access_token; accessTokenJson.expires_time = new Date().getTime() + (parseInt(res.data.expires_in) - 200) * 1000; //更新本地存储 fs.writeFile('../user_token.json', JSON.stringify(accessTokenJson)); resolve(accessTokenJson.access_token) }).catch(err => { return Promise.reject(err); }) }else{ resolve(accessTokenJson.access_token) } }) } /* 通过token,获取jsapi_ticket */ function getTicket(accessToken){ return new Promise((resolve,reject)=>{ axios.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket', { params: { type: 'jsapi', access_token: accessToken } }).then(res => { resolve(res.data.ticket); }).catch(err=>{ return Promise.reject(err); }) }) } /** * 签名算法 * @param ticket 用于签名的 jsapi_ticket * @param url 用于签名的 url ,注意必须动态获取 * @return sha1算法加密的字符串 */ function signature(ticket, url){ config_nonceStr = createNonceStr() // 生成随机字符串 config_timestamp = createTimestamp() // 获取当前时间戳 let ret ={ jsapi_ticket: ticket, nonceStr:config_nonceStr, timestamp:config_timestamp, url: url, } var string = raw(ret) // 排序拼接为字符串 console.log(string) return sha1(string) // 返回sha1加密的字符串 } /* 生成随机字符串 */ function createNonceStr(){ return Math.random().toString(36).substr(2,15); } /* 获取当前时间戳 */ function createTimestamp() { return parseInt(new Date().getTime() / 1000) + ''; } /* 排序拼接 */ function raw(args){ let keys = Object.keys(args).sort(); //获取args对象的键值数组,并对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序) let newArgs ={} keys.forEach(key=>{ newArgs[key.toLowerCase()] = args[key]; }) let string = ''; for (let k in newArgs) {// 循环新对象,拼接为字符串 string +=`&${k}=${newArgs[k]}` } string = string.substr(1)// 截取第一个字符以后的字符串(去掉第一个'&') return string; } module.exports = router;
三、使用内网穿透工具(例如:natapp)把本地服务器映射到公网上去
如果有服务器的可以跳过这一步
四、前端使用微信JSDK
使用步骤:
1、绑定域名
2、引入JS文件 http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
vue 项目可以下载模块 npm i weixin-js-sdk -S
3、配置config
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [] // 必填,需要使用的JS接口列表 });
4、通过ready接口处理成功验证,通过error接口处理失败验证
5、调用微信接口APi
详情见开发文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html