这是企业微信api文档。身份验证有两种方式:①网页授权登录 ②扫码授权登录
一:扫码授权登录:
1.参数
2.index.html
<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script>
3.登录页面
1.html:创建容器
<div id="wx_qrcode"></div>
2.mounted:
window.WwLogin({
id:企业页面显示二维码的DOM id,
appid: 企业微信的CorpID,在企业微信管理端查看,
agentid: 授权方的网页应用ID,在具体的网页应用中查看,
redirect_uri: 重定向地址,需要进行UrlEncode(例如:encodeURIComponent(`${'https://xxxx/#/login'}`)),
})
3.Watch:
$route: {
handler(to) {
// query获取url中code
if (to.query.code) {
this.scancodeLogin(to.query.code)
}
},
immediate: true,
deep: true
},
}
4.methods:
async scancodeLogin(code) {
// scancodeLoginApi后端提供的接口
const { data } = await scancodeLoginApi({
code,
corpId: 'wwd67f1cfeddfa9159',
agentId: '1000013',
})
if (data.ret === 1) {
// 拿到登录数据做对应逻辑处理
......
} else {
this.$message.error(data.msg)
}
},
二:网页授权登录(企业微信内置浏览器登录):
1.参数
vue的hash模式(#)会导致识别错误(#login跑到最后面了)。因为参数说明里有#wechat_redirect:终端使用此参数判断是否需要带上身份信息,这个会将hash路径错误识别,导致出错。所以建议将hash模式改为history模式。详情参考我另一篇文章:vue项目改history模式。
2.后台配置好,redirect_uri用urlencode(网页搜)编码(见企业微信后台配置)。前端获取到code值后,走的逻辑跟扫码登录的逻辑类似了,不再赘述。