微信接入微信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; i++) {randonNum += this.randomString[Math.round(Math.random() * 62)];}this.str = {noncestr: randonNum,jsapi_ticket: strArr.ticket,timestamp: +new Date(),url: location.href.split("#")[0].replace(/:/g, "!") //转换一下做标记/要用hash模式,};let a = "";a = JSON.stringify(this.str).replace(/{/g, "").replace(/}/g, "").replace(/"/g, "").replace(/,/g, "&").replace(/:/g, "=").replace(/!/g, ":").split("&").sort().join("&");// sha1加密this.signature = sha1(a);}, timea);},
}

前端不需要安装sha1,js文件直接使用即可

新建utils/sha1.js

// utils/sha1
function encodeUTF8(s) {var i,r = [],c,x;for (i = 0; i < s.length; i++)if ((c = s.charCodeAt(i)) < 0x80) r.push(c);else if (c < 0x800) r.push(0xc0 + ((c >> 6) & 0x1f), 0x80 + (c & 0x3f));else {if ((x = c ^ 0xd800) >> 10 == 0)//对四字节UTF-16转换为Unicode(c = (x << 10) + (s.charCodeAt(++i) ^ 0xdc00) + 0x10000),r.push(0xf0 + ((c >> 18) & 0x7), 0x80 + ((c >> 12) & 0x3f));else r.push(0xe0 + ((c >> 12) & 0xf));r.push(0x80 + ((c >> 6) & 0x3f), 0x80 + (c & 0x3f));}return r;
}// 字符串加密成 hex 字符串
function sha1(s) {var data = new Uint8Array(encodeUTF8(s));var i, j, t;var l = (((data.length + 8) >>> 6) << 4) + 16,s = new Uint8Array(l << 2);s.set(new Uint8Array(data.buffer)), (s = new Uint32Array(s.buffer));for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);s[l - 1] = data.length << 3;var w = [],f = [function () {return (m[1] & m[2]) | (~m[1] & m[3]);},function () {return m[1] ^ m[2] ^ m[3];},function () {return (m[1] & m[2]) | (m[1] & m[3]) | (m[2] & m[3]);},function () {return m[1] ^ m[2] ^ m[3];},],rol = function (n, c) {return (n << c) | (n >>> (32 - c));},k = [1518500249, 1859775393, -1894007588, -899497514],m = [1732584193, -271733879, null, null, -1009589776];(m[2] = ~m[0]), (m[3] = ~m[1]);for (i = 0; i < s.length; i += 16) {var o = m.slice(0);for (j = 0; j < 80; j++)(w[j] =j < 16? s[i + j]: rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1)),(t =(rol(m[0], 5) + f[(j / 20) | 0]() + m[4] + w[j] + k[(j / 20) | 0]) |0),(m[1] = rol(m[1], 30)),m.pop(),m.unshift(t);for (j = 0; j < 5; j++) m[j] = (m[j] + o[j]) | 0;}t = new DataView(new Uint32Array(m).buffer);for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {return (e < 16 ? "0" : "") + e.toString(16);}).join("");return hex;
}
exports.sha1 = sha1;

通过config注入

// 通过 config 接口注入权限验证配置sortingStrs() {this.sortingStr();this.$wx.config({// debug: true, // 开启调试模式,appId: "xxx", // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp: this.str.timestamp, // 必填，生成签名的时间戳nonceStr: this.str.noncestr, // 必填，生成签名的随机串signature: this.signature, // 必填，签名，见附录1jsApiList: ["scanQRCode","checkJsApi","updateAppMessageShareData","chooseImage","updateTimelineShareData","openLocation","getLocation",], // 必填，需要使用的JS接口列表，所有JS接口列表见附});this.$wx.error((res) => console.log(res));this.$wx.ready((res) => {console.log(res, "res");});},

成功之后会有提示,注意:在微信开发者工具上测试

获取密钥

 // axios封装
export const initSelectDevice = (initData) => get("/api/token", initData);import {initSelectDevice,
} from "@/utils/index.js"; //接口请求封装
methods:{// 获取密钥 access_tokenobtain_token() {let s = {grant_type: "client_credential", //这个固定的appid: "xx",   // appIdsecret: "xx", // appsecret};initSelectDevice(s).then((res) => {res.expires_in = +new Date() + 7200 * 1000 - 5 * 60 * 1000; // 存储两小时过期,提前五分钟重新获取localStorage.setItem("access_token", JSON.stringify(res));});},
}

判断是否过期

  data() {return {access_token: "",timers: 0,};},
methods:{isLateOverdue() {if (localStorage.getItem("access_token")) {let lData = JSON.parse(localStorage.getItem("access_token"));if (lData.expires_in > +new Date()) {console.log("没有过期");this.timers = 0;this.access_token = lData.access_token;} else {console.log("过期了");this.timers = 1000; //获取token需要时间,用延时器适当延长this.obtain_token();}} else if (localStorage.getItem("access_token") == null) {console.log("不存在");this.timers = 1000;this.obtain_token();} else {console.log("不存在");this.timers = 1000;this.obtain_token();}},
}

根据文档随手写的


// 随手写的basedInterface() {this.sortingStrs();setTimeout(() => {// this.$wx.checkJsApi({//   jsApiList: ["chooseImage"], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,//   success: function (res) {//     console.log(res);//   },// });this.$wx.ready(() => {//   // 需在用户可能点击分享按钮前就先调用;// wx.ready(function () {//需在用户可能点击分享按钮前就先调用// this.$wx.startRecord();let longitude = "34.16";let latitude = "112.42";this.$wx.openLocation({latitude: 112.42, // 纬度，浮点数，范围为90 ~ -90longitude: 34.16, // 经度，浮点数，范围为180 ~ -180。name: "河南", // 位置名address: "河南郑州", // 地址详情说明scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: "http://117.158.147.214:8052/#/main/about", // 在查看位置界面底部显示的超链接,可点击跳转success: function (res) {//     // 设置成功console.log(res, "000");},fail: function (res) {//     // 设置成功console.log(res, "000");},});this.$wx.getLocation({type: "wgs84", // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'success: (res) => {console.log(res);this.$wx.openLocation({latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。name: "河南", // 位置名address: "河南郑州", // 地址详情说明scale: 20, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: "http://117.158.147.214:8052/#/main/about", // 在查看位置界面底部显示的超链接,可点击跳转success: function (res) {//     // 设置成功console.log(res, "000");},fail: function (res) {//     // 设置成功console.log(res, "000");},});// var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90// var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。// var speed = res.speed; // 速度，以米/每秒计// var accuracy = res.accuracy; // 位置精度},});// });// this.$wx.updateAppMessageShareData({//   title: "fg", // 分享标题//   desc: "dg", // 分享描述//   link: "https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#5", // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致//   imgUrl: "", // 分享图标//   success: function (res) {//     // 设置成功//     console.log(res);//   },//   fail: function (res) {//     // 设置成功//     console.log(res, "res");//   },// });// this.$wx.chooseImage({//   count: 1, // 默认9//   sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有//   sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有//   success: function (res) {//     console.log(res, "000000000000000");//     var localIds = res.localIds; // 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片//   },// });});}, 2000);},

微信接入微信JS-SDK----签名算法相关推荐

最新微信公众平台js sdk整合PHP版
由于没有持续关注微信公众平台相关的开发,所以看到这个东西时,都没有耐心看完开发文档,或者不知道重点. 重点在哪呢?重点在示例代码:http://mp.weixin.qq.com/wiki/7/aaa1 ...
c# sha1签名微信_C#微信公众号JS接口签名算法
以下内容是微信官方开发文档,注意标红文字附录1-JS-SDK使用权限签名算法 jsapi_ticket 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用 ...
php js sdk 签名算法,签名算法 · PAYJS API 开发文档
签名算法 PAYJS 签名算法与微信官方签名算法一致签名生成的通用步骤如下: 设所有发送或者接收到的数据为集合M,将集合M内非空参数值的参数按照参数名ASCII码从小到大排序(字典序),使用URL键 ...
小程序开发之微信接入微信调用wenxin4j
一. 微信公众号 1.详情网址微信公众平台微信官方文档 | 微信开放文档微信公众平台接口调试工具几款免费内网穿透工具测评使用 - 哔哩哔哩 2.使用测试号 ①.微信公众平台可以进行登录或注册 ...
微信开放JS SDK，这场web巨变意味着什么？
原文链接:原文链接作者王安如有侵权请及时联系,立即删除. 摘要:微信近期推出JS SDK,开放了包括分享.图像.地理位置.微店.微信支付等11个接口.新能力给公众号运营者.开发者更多的玩法.而这样 ...
cocos creator接入微信登陆sdk android篇
cocos creator接入微信登陆sdk 背景项目引擎使用cocos creator,使用android studio集成开发工具,在开发之前先做好准备工作在微信开放平台上创建好移动应用,拿到 ...
cocos creator接入微信登陆sdk ios篇
cocos creator接入微信登陆sdk ios篇背景已经在Android篇里面交代过了,有兴趣的朋友可以再看看Android篇步骤去微信开放平台下载ios平台所需要的sdk 在" ...
手把手教你简单接入微信SDK
就看微信现在这么火的样子,如果你的APP不接入微信的SDK好像就有点脱离了时代大车轮一样.一个成功的APP,不单单凭借着一个好的想法,一个好的功能,最主要还是用户量.用户量就好像是水,我们的APP就一 ...
微信-js sdk invalid signature签名错误问题解决
微信-js sdk invalid signature签名错误问题解决参考文章: (1)微信-js sdk invalid signature签名错误问题解决 (2)https://www.cn ...

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

`vue2` 项目

获取密钥

微信接入微信JS-SDK----签名算法相关推荐

最新文章

热门文章

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

vue2 项目

获取密钥

微信接入微信JS-SDK----签名算法相关推荐

最新文章

热门文章

`vue2` 项目