标签：扫码 code 微信 二维码 Vue login id 页面
Vue实现企业微信扫码登录
企业微信扫码登录原理
请求方式：GET（HTTPS）
请求URL：https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET
corpid、corpsecret换为自己的corpid、应用secret
请求方式：GET（HTTPS）
请求地址：https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?access_token=ACCESS_TOKEN&code=CODE
大致流程
- 在页面构建二维码，
- 扫二维码之后，微信那边会跳转到redirect_uri你重定向的地址，后面会拼接code参数，一般重定向地址都是本页面，
- 在本页面获取url后面拼接的code，用code去请求接口，
- 接口那边用access_token和code去获取用户的企业微信号，
- 通过企业微信号查找数据库中是否存在，存在返回用户的基本信息，否则不存在返回提示‘该用户非企业人员’
实操
一、 public/index.html 引入js文件
<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script>
二、 建一个登陆页面 /pages/login/login.vue
信息填写完整，二维码就出来了
<template>
<div id="wx_qrcode"></div>
</template>
<script>
mounted() {
window.WwLogin({
id: 'wx_qrcode', // 登录页面显示二维码的容器id
appid: '', // 企业微信的CorpID，在企业微信管理端查看
agentid: '', // 授权方的网页应用id，在具体的网页应用中查看
redirect_uri: encodeURIComponent('http://本页地址/#/login'), // 重定向的地址，需要进行encode
})
},
</script>
三、vue中用watch监听路由变化取code，传到接口做处理
<script>
export default {
methods:{
getStaffInfo(code){
this.$axios.get(this.API_URL + '/console/login/Login.php?code='+code).then(res=>{
if(res.data.isSuccess){
//返回用户信息
}else{
//错误信息
}
})
},
onLoad(){
this.$router.go(0);
}
},
mounted() {
window.WwLogin({
id: 'wx_qrcode', // 登录页面显示二维码的容器id
appid: '', // 企业微信的CorpID，在企业微信管理端查看
agentid: '', // 授权方的网页应用id，在具体的网页应用中查看
redirect_uri: encodeURIComponent('http://本页地址/#/login'), // 重定向的地址，需要进行encode
})
},
watch:{
$route(to) {
if (to.query.code) {
this.getStaffInfo(to.query.code)
}
}
}
}
</script>
标签：扫码,code,微信,二维码,Vue,login,id,页面 来源： https://www.cnblogs.com/yelanggu/p/15826356.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。