大家好，又见面了，我是你们的朋友全栈君。
Vue调用企业微信API详细过程
- 一、生成签名
-
- 1.获取企业ID与Secret
- 2.获取Access_token
- 3.获取ticket
- 二、生成签名以及回调
先捋一下大概的步骤：
1、首先需要从企业微信管理后台拿到 企业ID 和 应用的Secret。
2、通过 企业ID 和 应用的Secret 来生成 access_token。
3、通过 access_token 来获取 ticket。
4、用 ticket 随机字符串 时间戳 当前网页url 拼接成一串字符，然后进行sha1加密。
下面是详细过程
先引入一下
代码语言：javascript复制// 先安装下微信的js-sdk
npm install weixin-js-sdk
// 然后在页面中引入
import wx from 'weixin-js-sdk'一、生成签名
1.获取企业ID与Secret
企业微信后台登录地址：https://work.weixin.qq.com/wework_admin/frame#profile
企业ID在这里获取
Secret在这里获取
2.获取Access_token
请求URL：https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET
注：此处标注大写的单词ID和SECRET，替换为上一步中的企业ID和Secret。
返回结果：
代码语言：javascript复制{
"errcode":0,
"errmsg":"",
"access_token": "accesstoken000001",
"expires_in": 7200
}access_token的有效期正常情况下为7200秒（2小时），有效期内重复获取返回相同结果，过期后获取会返回新的access_token。
这里只要能发送上述请求并得到access_token即可。我这里是用的axios nginx，直接在axios中请求上述地址会报跨域的错误，解决方法是在axios发送请求后在nginx中转到上述地址。
3.获取ticket
请求URL：https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN
注：此处ACCESS_TOKEN，替换为上一步中的ACCESS_TOKEN。
返回结果：
代码语言：javascript复制{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}这里同上只要能发送上述请求并得到ticket即可。
二、生成签名以及回调
所需的参数都拿到了，接下来就是验证签名和回调：
代码语言：javascript复制const that = this
// 生成时间戳
var timestamp = getTimestamp()
// 生成的随机字符串
var nonceStr = randomString(16)
// 有效期2小时，用localStorage做本地缓存
localStorage.setItem('timestamp', timestamp)
that.$wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: this.corpid, // 必填，企业微信的corpID
timestamp: timestamp , // 必填，生成签名的时间戳
nonceStr: nonceStr , // 必填，生成签名的随机串
signature: getSignature(ticket, nonceStr, timestamp),// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: [
'scanQRCode',
'hideOptionMenu'
] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});简单说下wx.config方法。必填参数一共5个，
appId就是第一步中获取的企业ID；
timestamp是生成签名时的时间戳，下面写了通用的方法把当前时间转时间戳；
nonceStr是随机字符串，下面也有通用方法；
signature就是签名了； 个人猜测验证签名这一步 就是根据参数手动拼接字符串，然后手动对这个串加密，把加密后的串与参数一起提交。企业微信后台拿到这个加密的串与参数后，会去根据参数再自动生成一次加密的串，两个串一对比，就是验证成功与失败了。
jsApiList是需要调用的接口列表，完整的在这里：https://work.weixin.qq.com/api/doc/90001/90144/90540
上面调用的方法getTimestamp()和randomString()和getSignature()方法在这里：
代码语言：javascript复制import sha1 from 'js-sha1'
/** * 获取当前时间 时间戳 * @returns {number} */
export function getTimestamp() {
return Date.parse(new Date());
}
/** * 获取随机字符串 * @param len 可指定长度 * @returns {string} */
export function randomString(len) {
len = len || 32
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = $chars.length
var pwd = ''
for (var i = 0; i < len; i ) {
pwd = $chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
}
/** * 拼接签名字符串 * @param ticket 通过access_token获取的jsapi_ticket * @param noncestr 自己生成的随机字符串 * @param timestamp 生成签名时的时间戳 * @returns {*} */
export function getSignature(ticket, noncestr, timestamp) {
let url = window.location.href.split("#")[0]
let jsapi_ticket = `jsapi_ticket=${
ticket}&noncestr=${
noncestr}×tamp=${
timestamp}&url=${
url}`
return sha1(jsapi_ticket);
}上面getSignature()方法中用到的sha1加密用的是js-sha1：
代码语言：javascript复制npm install js-sha1最后就是config验证通过后会回调ready方法，下面是拿调用摄像头举例：
代码语言：javascript复制/** * config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后， * config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。 * 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 */
that.$wx.ready(function () {
that.$wx.scanQRCode({
desc: "scanQRCode desc",
needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
success: function (res) {
// 业务代码
},
error: function (res) {
// 业务代码
},
});
});以上就是今天要讲的内容，欢迎评论区留言补充。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186670.html原文链接：https://javaforall.cn
