步骤
第一步 认证的微信公众帐号
首先你得拥有一个通过认证了的微信公众号或者开发者帐号,没有通过认证的公众帐号。数字签名认证也能成功,但是分享信息是无法设置成功的;
第二步 添加安全域名
在公众帐号平台后台添加app运行的域名地址,可以理解为为某个域名添加白名单功能
以我们公司旗下的榕树下为例:
微信公众号是:榕树下,添加了game.4gshu.com为安全域名,那么我在game.4gshu.com上的网页可以使用榕树下公众帐号的数字签名了
第三步 生成数字签名
在微信公众平台后台上面能找到一个 appid 及 secret字符串
通过这两个数据,请求微信提供的两个公开API地址,生成对应的access_token后再生成ticket再通过规则加密成数字签名
注意,数字签名必须在服务端生成,这里我以NodeJS来实现
数字签名具体生成过程,NodeJS版本
1、获取微信签名所需的access_token
https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid写在这里&secret=你的secret写在这里', function(_res) { // 这个异步回调里可以获取access_token })
注:前端请求会有跨域请求,最好是后台进行处理,实在不行可以用Postman发起请求
2、获取微信签名所需的ticket
https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步中获取的access_token&type=jsapi', function(_res){ // 这个异步回调里可以获取ticket });
注:前端请求会有跨域请求,最好是后台进行处理,实在不行可以用Postman发起请求
3、生成数字签名具体方法
ticket、 noncestr、timestamp、url通过微信的规则用sha1加密
noncestr和timestamp在微信官方sample包中有具体的生成方法函数
// noncestr var createNonceStr = function() { return Math.random().toString(36).substr(2, 15); }; // timestamp var createTimeStamp = function () { return parseInt(new Date().getTime() / 1000) + ''; };
也可以参考我代码中的代码
// 计算签名方法 var calcSignature = function (ticket, noncestr, ts, url) { var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '×tamp='+ ts +'&url=' + url; shaObj = sha1(str); return shaObj; } var signature = calcSignature(ticket, noncestr, timestamp, url);
shai加密文件
import * as sha1 from 'sha1'
hex_sha1.hex_sha1(str)
4、返回输出signature数字签名以及在生成数字签名时用到的timestamp、nonceStr、url、及appid
因为在客户内初始化微信JS-SDK中还要用到
5、至此数字签名生成成功
wx.config({ beta: true, debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'ww1437b9f5d1f742c6', timestamp: _this.timestamp, // 必填,生成签名的时间戳 nonceStr: _this.nonceStr, // 必填,生成签名的随机串 signature: _this.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法 jsApiList: [ 'checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', //旧的接口,即将废弃 'onMenuShareTimeline', 'shareWechatMessage' ], success: function (res) { // 回调 console.log(res) }, fail: function (res) { console.log(res) if (res.errMsg.indexOf('function not exist') > -1) { alert('版本过低请升级') } } })
封装
import wx from 'weixin-js-sdk' import service from './service' // import store from '@/vuex' import platform from '@/config/platform' import HttpUtil from './HttpUtil' // service请求 /** * 获取微信SDK * @param {array} apiList // 微信调用的JS 接口列表 ,数组 * @return wx 实例 */ export const wechatInit = async (url,apiList,flag=false) => { // let user = store.getters.getUser let params = { url: window.location.href.split('#')[0], // "systemType":"STORE" // companyId: 1 // 请根据域名给品牌设置值 } if(flag){ params.systemType='STORE' } let host = platform.host // let url =`${host}/storeServer/wechatCommonService/findWxJsapiSignature` let api =url let res = await HttpUtil.post(api, { params: params }) var promise = new Promise((resolve, reject) => { // let ret={"msg":"操作成功","data":{"appId":"ww1437b9f5d1f742c6","nonceStr":"zvEWX8EietyENScl","signature":"ad1e58b7a04d609fd3439a3e94213c16e7f66a4e","timestamp":1585915863,"url":"http://uat.mammasay.com/#/shareAdd/shareDetail?id=35"},"count":1,"status":"S"} if (res.status === 'S') { let config = res.data config.debug=true; config.jsApiList = apiList // resolve(wechatConfig(res.data)) wechatConfig(res.data, resolve, reject) } else { reject(res.msg) } }) return promise } const wechatConfig = (config, resolve, reject) => { if (!service.isWechat()) { reject('当前不是微信端,无法正常使用weixin-js-sdk') } else { config.debug = false // config.jsApiList = apiList // ['getNetworkType', 'scanQRCode'] // 微信调用的JS 接口列表 console.log('wx', wx) wx.config(config) wx.ready(() => { // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作, // 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 // debugger resolve(wx) console.log('wx 加载完毕') }) wx.error(res => { // debugger reject(res) // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 console.log('微信SKD加载失败!') }) } }