前端企业微信开发内嵌H5记录(Vue)
一、引入相应JS-SDK
1.JS-SDK
1.注意引入顺序
2.引入成功后可以通过访问window下wx对象,调用企微提供的API
注意:不建议通过 npm 安装jssdk相关依赖使用
---public\index.html
<!-- 按照以下顺序引入 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- 1. jssdk -->
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!-- 2. 调用 wx.agentConfig需要引入 jwxwork sdk -->
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
<title>企微</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
二、授权(网页授权)
目的是通过授权登录的方式,在自建应用或网页中获取企微用户信息
1.首先构造网页授权链接
2.通过在 vue-router 中的路由守卫中发起授权
这里注意每次打开或者刷新页面都会经过路由守卫,
并不是每次都需要授权(或调用授权方法,具体原因在后面会提到),所以需要在守卫中进行判断调用时机
1.构造网页授权链接
1.这里一般是后台来构造这个授权链接提供给前台接口,传入需要的参数即可。所以只展示前台封装api部分代码。
2.假设后台提供的接口是 /api/wechat/get_oauth_url
3.需要的参数可以参考企业微信文档-构造网页授权链接
4.返回结果是携带code参数的回调地址,例如:https://my.qiwei.cn/md?code=wx123456
本次记录只传入以下参数:
appid:企业的CorpID
redirect_uri:授权后重定向的回调链接地址,使用urlencode对链接进行处理(也就是授权成功后需要前往的页面)
agentid:应用agentid,snsapi_privateinfo时必填
scope:区分静默授权(snsapi_base)与手动授权(snsapi_privateinfo)
代码如下(示例):
---src\api\auth.js
//接口请求封装
const auth = {
// 获取学员uid
oauthUrl: (params) => {
return Instance.get(`/api/wechat/get_oauth_url?corpId=${params.corpId}&callback=${params.oauthCallback}&agentid=${params.agentid}&scope=${params.scope}`);
},
}
export default auth
2.发起授权
这一步很简单,我们只需要在进入页面前在router.beforeEach全局前置守卫
中发起授权即可,需要做一步简单的判断。
判断当前路径中query对象中是否有code属性,如果有说明已经授权过了,直接放行就可以了
如果没有就发起授权,授权成功后执行window.location.href跳转,再次进入路由守卫进行判断,最终进入目标页
注意:不进行判断会进入死循环,造成一直授权,并且授权次数是有限制的,具体多少次忘记了,这里提醒以下
!
代码如下(示例):
---src\router\auth.js
import { getOauthUrl } from "@/common/auth";
router.beforeEach((to, from, next) => {
if (!to.query.code) {
getOauthUrl(to);
} else {
next();
}
});
---src\common\auth.js
import config from '@/config'
import api from '@/api'
let { baseUrl, corpId, agentid } = config
export function getOauthUrl(to) {
// URL编码
let oauthCallback = encodeURIComponent(
baseUrl[process.env.NODE_ENV] + `/md${to.fullPath}`
);
let params = {
oauthCallback, // 回调地址(授权成功后跳转的地址)
corpId: corpId[process.env.NODE_ENV],
agentid: agentid[process.env.NODE_ENV]
};
// 获取授权地址 - 跳转
api.auth.oauthUrl(params).then((res) => {
window.location.href = res.oauthUrl;
});
}
3.注入企业与应用权限
注入权限是调用企业微信API的前提,这一步在页面初始化
时处理,如页面中有在初始化时调用企微API的场景,需要在注入成功后执行否则会报错
1.企业权限(wx.config)应用权限(wx.agentConfig)分别有对应的生成签名方式。
2.调用agentConfig的注意事项,参见文档,划到最下面
注意:虽然文档有提到从企业微信3.0.24及以后版本,无须先调用wx.config,可直接调用wx.agentConfig。但是这里建议做兼容处理,企业与应用权限都调用,这样做会让你在之后使用API时减少很多麻烦。
代码如下(示例):
---src\common\wx-auth.js
import api from "@/api";
import Vue from "vue";
import config from "@/config";
const { baseUrl } = config;
const wxAuth = (to) => {
return new Promise(async (resolve, reject) => {
const url = baseUrl[process.env.NODE_ENV] + `/md${to.path}`;
const corpId = "111222333" // 假定
const corpBody = { url, corpId };
const agentBody = { url };
const corpSignature = await api.wxAuth.getCorpWechatSignature(corpBody); // 通过接口,获取agentConfig的参数
const agentSignature = await api.wxAuth.getAgentWechatSignature(agentBody); // 通过接口,获取agentConfig的参数
wx.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: "", // corpID
timestamp: corpSignature.timestamp, // 时间戳
nonceStr: corpSignature.noncestr, // 随机串
signature: corpSignature.signature, // 签名
jsApiList: [], // 需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
wx.ready(() => {
wx.agentConfig({
corpid: "",
agentid: "",
timestamp: agentSignature.timestamp, // 时间戳
nonceStr: agentSignature.noncestr, // 随机串
signature: agentSignature.signature, // 签名
jsApiList: [],
success: async (res) => {
console.info("注入成功", res);
resolve(res);
},
fail: (res) => {
console.info("注入失败", res);
if (res.errMsg.indexOf("function not exist") > -1) alert("版本过低请升级");
reject(res);
},
});
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
wx.error((res) => {
console.info("企业注入失败");
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
});
};
export { wxAuth };
---src\views\page.vue
<script>
import { wxAuth } from "@/common/wx-auth";
export default {
data() {
return {};
},
async mounted() {
// 同步
// 第一步:注入权限
await wxAuth(this.$route);
// 第二步:注入成功后调用["getContext"]Api,判断入口
await this.getContext();
},
};
</script>
注意:因为注入权限中包含异步操作,所以需要注意同样在页面初始化时执行的方法,是否依赖注入权限,是的话要注意执行顺序,否则会报错。
总结
以上是本人最近在开发企业微信内嵌H5时总结出来的方法和问题,加深印象的同时也可以给正在准备开发的同学一些参考,欢迎交流指正!