vue调用企业微信API详细过程
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加密。
我遇到的坑:
调试的时候可以用vconsole 方便在移动端查看信息
1、本地请求跨域时发布到线上
2、40013:解决:第三方公司配置的公司corpId和提供的企业微信corpId保持一致
3、40093:解决:获取配置传的url必须是当前页面的地址
4、80001:解决:需要第三方配置或后台返回时设置可信域名,并下载对应的.txt文件,然后让后台把.txt文件放到当前页面对应的域名下做根域名校验
下面是详细过程
先引入一下
// 先安装下微信的js-sdk
npm install weixin-js-sdk
// 然后在main.js页面中引入
import wx from ‘weixin-js-sdk’
Vue.prototype.$wx = wx;
一、生成签名
1.获取企业ID与Secret
企业微信后台登录地址:
https://work.weixin.qq.com/wework_admin/frame#profile
踩过的坑:
1、本地解决跨域后线上依然跨域没有请求到对应接口
2、40013:解决:第三方公司配置的公司corpId和提供的企业微信corpId保持一致
3、40093:解决:获取配置传的url必须是当前页面的地址
80001:解决:需要第三方配置或后台返回时设置可信域名,并下载对应的.txt文件,然后让后台把.txt文件放到当前页面对应的域名下做根域名校验
注意事项
签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。 出于安全考虑,开发者必须在服务器端实现签名的逻辑。 如出现invalid
signature 等错误详见附录4常见错误及解决办法。
企业ID在这里获取
Secret在这里获取
2.获取Access_token
请求URL:https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET
注:此处标注大写的单词ID和SECRET,替换为上一步中的企业ID和Secret。
返回结果:
{"errcode":0,"errmsg":"","access_token": "accesstoken000001","expires_in": 7200
}
access_token的有效期正常情况下为7200秒(2小时),有效期内重复获取返回相同结果,过期后获取会返回新的access_token。
这里只要能发送上述请求并得到access_token即可。我这里是用的axios + nginx,直接在axios中请求上述地址会报跨域的错误,解决方法是在axios发送请求后在nginx中转到上述地址。
nginx配置参考地址:https://editor.csdn.net/md/?articleId=119735844
3.获取ticket
请求URL:https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN
注:此处ACCESS_TOKEN,替换为上一步中的ACCESS_TOKEN。
返回结果:
{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200
}
这里同上只要能发送上述请求并得到ticket即可。
二、生成签名以及回调
所需的参数都拿到了,接下来就是验证签名和回调:
在app.vue的mounted里写
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, // 必填,企业微信的corpIDtimestamp: timestamp , // 必填,生成签名的时间戳nonceStr: nonceStr , // 必填,生成签名的随机串signature: getSignature(ticket, nonceStr, timestamp),// 必填,签名,见 附录-JS-SDK使用权限签名算法jsApiList: ['scanQRCode','hideOptionMenu'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
简单说下wx.config方法。必填参数一共5个,
appId就是第一步中获取的企业ID;
timestamp是生成签名时的时间戳,下面写了通用的方法把当前时间转时间戳;
nonceStr是随机字符串,下面也有通用方法;
signature就是签名了;
个人猜测验证签名这一步 就是根据参数手动拼接字符串,然后手动对这个串加密,把加密后的串与参数一起提交。企业微信后台拿到这个加密的串与参数后,会去根据参数再自动生成一次加密的串,两个串一对比,就是验证成功与失败了。
上面调用的方法getTimestamp()和randomString()和getSignature()方法在这里:
上面getSignature()方法中用到的sha1加密用的是js-sha1:
npm install js-sha1
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 || 32var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'var maxPos = $chars.lengthvar 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);
}
最后就是config验证通过后会回调ready方法,下面是拿调用摄像头举例:
- 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://blog.csdn.net/z1761419224/article/details/118751992
vue调用企业微信API详细过程相关推荐
- insert时调用本身字段_python3调用企业微信api!开发一款属于自己的企业微信
python3调用企业微信api 最后更新时间:2020/5/11 前段时间,我将企业微信官方提供的python接口代码的部分功能修改成了python3的,并且自己也使用并测试过部分功能: 因为并没有 ...
- python企业微信特定用户_python3调用企业微信api!开发一款属于自己的企业微信...
python3调用企业微信api 最后更新时间:2020/5/11 前段时间,我将企业微信官方提供的python接口代码的部分功能修改成了python3的,并且自己也使用并测试过部分功能: 因为并没有 ...
- 【Linux学习】如何编写Shell脚本调用企业微信api来发消息给企业微信成员?
一.前言 最近通过python实现了发送消息给企业微信的功能,参考链接: [Jenkins学习 ]如何编写Python脚本来调用企业微信的api通知企业微信成员关于Jenkins的编译结果? http ...
- python3调用企业微信api!开发一款属于自己的企业微信
python3调用企业微信api 最后更新时间:2020/5/11 前段时间,我将企业微信官方提供的python接口代码的部分功能修改成了python3的,并且自己也使用并测试过部分功能: 因为并没有 ...
- Node.JS调用企业微信API:生成渠道二维码
目标: 通过API设置成员的"联系我"方式生成渠道标识二维码,实现标记客户扫码渠道,方便个渠道客户信息统计等. 实现环境: 白码低代码平台(该平台提供企业微信API,可直接调用,减 ...
- vue调用企业微信扫码接口
准备工作 -企业微信授权 见企业微信官方网站:https://developer.work.weixin.qq.com/document/path/90513 前端 test01.vue 1. 引入j ...
- SERP调用企业微信API接口,发送文本信息实例
SERP企业轻量级ERP(SSDCRM)起源于vtigercrm早期版本.随着我们不停的迭代研发与完善,今日已经形成了自己鲜明的应用风格.我们在完善平台内部功能的基础上,积极研发平台与企业微信,钉钉, ...
- 调用企业微信API,ios端异常
在企业微信中调用wx.openEnterpriseChat方法时,安卓客户端可以正常执行,ios端无反应,pc端无反应: 后续更改wx.config文件,新增beta:true配置,问题依旧没解决,后 ...
- python连接企业微信数据库_python调用企业微信API
#!/usr/bin/env python # -*- coding:utf-8 -*- # 2017-07-25 编写 import json import sys import urllib, u ...
- java欢迎词,企业微信API:成员个性化新客户欢迎语的nodejs实现
目标: 在企业微信上只能设置统一的新客户欢迎语,因此我们通过API来实现为对每个成员设置个性化欢迎语. 实现环境: 白码低代码平台(该平台是低代码代发平台,提供企业微信API,可直接调用,减少前期配置 ...
最新文章
- stringbuilder 拼接语句缺失右括号_Leetcode No.22 括号生成
- LeetCode 78 子集 中等难度
- 作业三——原型化系统——外卖app
- WINDOWS SERVER 2003从入门到精通之林之间的信任关系
- python importsystem
- signature=31dd91e9b698a2c577ac276c1a6ed0c4,openssl的man中文文档 - 1(转)
- android+京东分类菜单,Android仿京东商品分类
- 线上实时监测推广效果,App投放渠道数据分析
- C语言-打卡机(sqlite数据库、多线程)
- android 友盟渠道号,获取友盟渠道号
- HTML5篮球弹跳运动规律,篮球体能训练的七大原则
- 天地图服务http转https报错
- 【JZOJ B组】【NOIP2013模拟】小喵喵的新家
- 计算机图形学和数据科学实验,计算机图形学作业-图像处理实验室——中国科学技.PDF...
- 2021年起重机司机(限门式起重机)考试及起重机司机(限门式起重机)找解析
- Ubuntu 微信 linux版最新可用——UOS魔改版
- 《南京印象》之二《石城疏影》
- 按键精灵实现qq群私发脚本Day1实战讲解
- list的stream流常用用法
- NSFC: 国内外研究现状的几种节奏
热门文章
- 2022.9.19 论文笔记
- java右移位_Java移位运算
- matlab 神经网路,matlab神经网络的工程实例(超级详细)
- VmPlayer上设置主机和windows虚拟机文件夹共享
- LCD12864 并口和串口通用程序
- 【软件工程】山东大学软件工程复习提纲
- 远程复制无法读取源文件或磁盘
- 删除操作,提示“无法读取源文件或磁盘”,解决办法!
- win7 旗舰版 64位注册dll(regsvr32)失败解决方法
- QTP(Quick Test Professional)安装详细教程