微信接入微信JS-SDK----签名算法

• 步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

vue2 项目

• 步骤二：引入 JS 文件

在vue中安装插件----- npm i -S weixin-js-sdk
vue2版本1.6.0

• main.js

// 全局引入
import Vue from "vue";
import App from "./App.vue";

import wx from "weixin-js-sdk";

Vue.use(Vant);

Vue.prototype.$wx = wx;
Vue.config.productionTip = false;

new Vue({
   
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

• 步骤三：通过 config 接口注入权限验证配置

wx.config({
   
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

• 示例

// index.js 
// JS-SDK使用权限签名算法
//封装之后的axios不要直接使用哦,用webpack跨域了
export const getticket = (initData) => get("/api/ticket/getticket", initData);
// Home.vue
import {
   
  getticket,
} from "@/utils/index.js"; //接口请求封装
methods:{
   
    // 获取签名算法
    obtainSignature() {
   
      this.isLateOverdue(); //判断access_token 有无过期后续会说
        let a = {
   
        //这个token是从接口获取到的存到本地存储的 //可以看文档获取这个token 
          access_token: JSON.parse(localStorage.getItem("access_token"))
            .access_token, // 之前获取的access_token,后续会说
          type: "jsapi",
        };
        getticket(a).then((res) => {
   
          console.log(res);
          res.expires_in = +new Date() + 7200 * 1000 - 5 * 60 * 1000;
          localStorage.setItem("jsapi_ticket", JSON.stringify(res)); //存进本地存储
        });
    },
}

• 成功返回的接口数据

{
   
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}
// 获得jsapi_ticket之后，就可以生成 JS-SDK 权限验证的签名了。

签名算法规则

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url （当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用 URL 键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作 sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

• 组合字符串

import {
    sha1 } from "../utils/sha1.js"; //接口请求封装
  data() {
   
    return {
   
      randomString:
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890", //随机字符串
      str: {
   },
      signature: "",
    };
methods: {
   
     // 组合字符串 + 字典排序
    sortingStr() {
   
      let timea = 0;
      if (
        localStorage.getItem("jsapi_ticket") == null &&
        JSON.parse(localStorage.getItem("jsapi_ticket")).expires_in <
          +new Date()
      ) {
   
        timea = 1000;
        this.obtainSignature();
      }
      setTimeout(() => {
    //防止token过期,导致报错
        let strArr = JSON.parse(localStorage.getItem("jsapi_ticket"));
        let randonNum = "";
        for (let i = 0; i < 17