Vue實現企業微信掃碼登錄

 

 

Vue實現企業微信掃碼登錄

 

企業微信掃碼登錄原理

• 構建企業微信登錄二維碼
• 獲取訪問令牌access_token

請求方式：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>