網(wǎng)頁(yè)授權(quán)登錄
概述
從企業(yè)微信終端打開(kāi)的網(wǎng)頁(yè)獲取成員的身份信息，從而免去登錄的環(huán)節(jié)牲距。
企業(yè)應(yīng)用中的URL鏈接（包括自定義菜單或者消息中的鏈接）返咱，均可通過(guò)OAuth2.0驗(yàn)證接口來(lái)獲取成員的UserId身份信息。
設(shè)置“可信域名”
URL的域名牍鞠，必須匹配企業(yè)應(yīng)用設(shè)置項(xiàng)中的“可信域名”咖摹，否則跳轉(zhuǎn)時(shí)會(huì)提示“redirect_uri參數(shù)錯(cuò)誤”(匹配規(guī)則請(qǐng)看可信檢驗(yàn)規(guī)則)。因此需要先配置應(yīng)用的可信域名难述。
企業(yè)微信截圖_00.png
登錄到企業(yè)管理端后臺(tái)萤晴，選擇“企業(yè)應(yīng)用”選項(xiàng)卡吐句，進(jìn)入需要使用網(wǎng)頁(yè)授權(quán)的應(yīng)用并編輯“可信域名”表單項(xiàng)，此選項(xiàng)將用于網(wǎng)頁(yè)OAuth2.0授權(quán)的時(shí)候進(jìn)行安全驗(yàn)證店读。請(qǐng)注意蕴侧，這里填寫的是域名，而不是URL两入，因此請(qǐng)勿加 http:// 等協(xié)議頭。
前端流程
- 調(diào)用后端接口獲取構(gòu)造鏈接敲才，JS打開(kāi)構(gòu)造鏈接，獲取code
- 調(diào)用后端接口根據(jù)code參數(shù)獲得員工的userid
// 構(gòu)造鏈接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&agentid=AGENTID&state=STATE#wechat_redirect
// 打開(kāi)鏈接，頁(yè)面將跳轉(zhuǎn)至
redirect_uri?code=CODE&state=STATE
例如：
https://vi.com/home?code=bQIyNHUkJenaDKD9OJH3TB-Jva1_4JHBeGvDEUUfuYXmE&state=STATE
項(xiàng)目案例：
async created(){
// 用戶首次打開(kāi)鏈接沒(méi)有 code纯丸，調(diào)接口獲取 OAuth2 鏈接
if (!this.$route.query.code) {
this.getOAuth()
}
// OAuth2 鏈接帶 code
else {
// 沒(méi)有UserId玉组，使用code獲取UserId
if (!localStorage.UserId) {
await this.getUserID()
}
// 有token，再去請(qǐng)求其它接口
this.getList()
}
},
methods:{
/* 獲取OAuth2鏈接阻星，打開(kāi) */
getOAuth() {
const urlHref = location.href
// 傳當(dāng)前 url 給后端
getOAuth(urlHref).then(res => {
const url = res.asstokenUrl
// 跳轉(zhuǎn)到構(gòu)造鏈接
url && (location.href = url)
})
},
/* 根據(jù)構(gòu)造鏈接的 code 獲取 UserId */
getUserID() {
return new Promise(resolve => {
getUserID({
code: this.$route.query.code
}).then(res => {
if (res.errcode == 0) {
localStorage.UserId = res.UserId
resolve()
}
// 獲取 UserId 出錯(cuò)
else {
Toast({
type: 'fail',
message: '認(rèn)證過(guò)期朋鞍！',
duration: 3000
})
}
})
})
},
}
