微信JS-SDK“分享信息设置”API及数字签名生成方法"

步骤

---

第一步 认证的微信公众帐号

首先你得拥有一个通过认证了的微信公众号或者开发者帐号，没有通过认证的公众帐号。数字签名认证也能成功，但是分享信息是无法设置成功的；

 

第二步 添加安全域名

在公众帐号平台后台添加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 + '&timestamp='+ 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)

https://blog-static.cnblogs.com/files/chenzxl/sha1.js

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加载失败！')
    })
  }
}