開頭
推薦閱讀官方文檔鏈接瀑粥。
企業(yè)微信掃碼登陸流程
根據(jù)圖片可以看出，流程很簡單苛骨。
步驟
首先稼钩， 企業(yè)微信后臺(tái)開啟“企業(yè)微信授權(quán)登陸功能”顾稀，“設(shè)置授權(quán)回調(diào)域名” ,授權(quán)回調(diào)域名必須與訪問鏈接的域名完全一致。（訪問鏈接的域名就是掃碼登陸成功后跳轉(zhuǎn)的域名坝撑，配置的域名不包括協(xié)議頭静秆，但是包括端口）。
接下來就是展示二維碼了巡李，企業(yè)微信提供了兩種方式抚笔，獨(dú)立頁面和內(nèi)嵌登陸二維碼。兩種方式?jīng)]有什么本質(zhì)的差別侨拦。
造新頁面的登陸方式
- 企業(yè)微信掃碼登陸的鏈接如下殊橙，我們只需要傳遞查詢參數(shù)即可。
https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=CORPID&agentid=AGENTID&redirect_uri=REDIRECT_URI&state=STATE
| 參數(shù) | 必須 | 說明 |
|---|---|---|
| appid | 是 | 企業(yè)微信的CorpID狱从，在企業(yè)微信管理端查看 |
| agentid | 是 | 授權(quán)方的網(wǎng)頁應(yīng)用ID膨蛮，在具體的網(wǎng)頁應(yīng)用中查看 |
| redirect_uri | 是 | 重定向地址，需要進(jìn)行UrlEncode |
| state | 否 | 用于保持請求和回調(diào)的狀態(tài)季研，授權(quán)請求后原樣帶回給企業(yè)敞葛。該參數(shù)可用于防止csrf攻擊（跨站請求偽造攻擊），建議企業(yè)帶上該參數(shù)与涡，可設(shè)置為簡單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn) |
可見必傳的參數(shù)有三個(gè)惹谐，appid和agentid是常量，redirect_uri則是用戶掃碼登陸成功后頁面直接跳轉(zhuǎn)的地址递沪。
- 當(dāng)用戶允許授權(quán)豺鼻，頁面會(huì)重定向至redirect_uri并且附帶上code和state參數(shù)综液。用戶禁止授權(quán)則無code參數(shù)款慨。后端通過企業(yè)微信的API即可根據(jù)code獲取到用戶信息。
這就完成了企業(yè)微信掃碼登陸谬莹。
daozhe
內(nèi)嵌登陸二維碼
首先引入js文件
http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js在頁面中創(chuàng)建一個(gè)容器檩奠，比如
<div id="wx_reg"></div>在要展示二維碼的頁面直接調(diào)用引入js的函數(shù)
window.WwLogin({
"id" : "wx_reg",
"appid" : "",
"agentid" : "",
"redirect_uri" :"",
"state" : "",
"href" : "",
});
前四個(gè)參數(shù)必傳桩了，第一個(gè)為容器的id，其余3個(gè)與之前介紹的相同埠戳。
其余的步驟就與之前的登陸方式相同了井誉。
這就完成了掃碼登陸。
總結(jié)
- 微信內(nèi)嵌二維碼使用了iframe技術(shù)整胃。所以內(nèi)嵌二維碼與新頁面其實(shí)是同一個(gè)颗圣。
- 微信的二維碼展示過程中使用了長輪詢，每次請求的時(shí)間約為20秒屁使，在20秒時(shí)接口返回200并攜帶狀態(tài)信息在岂。如果二維碼過期則，停止輪詢蛮寂。
- 用戶掃描二維碼后蔽午，長輪詢變?yōu)槎屋喸儯词褂脩粼诘顷憰r(shí)選擇取消），用戶點(diǎn)擊確認(rèn)直接跳轉(zhuǎn)到redirect_uri酬蹋。
- 構(gòu)造二位碼的edirect_uri地址本身可以包含查詢參數(shù)及老，但是盡量不要包含哈希，登陸成功的鏈接地址會(huì)包含redirect_uri包含的查詢參數(shù)范抓。
redirect_uri http://a.a.com
登陸成功后跳轉(zhuǎn)為 http://a.a.com?code=CODE&state=STATE
redirect_uri http://a.a.com?name=1
登陸成功后跳轉(zhuǎn)為 http://a.a.com?name=1&code=CODE&state=STATE
redirect_uri http://a.a.com/#/a
登陸成功后跳轉(zhuǎn)為 http://a.a.com/#/a?code=CODE&state=STATE
- 對于前后端分離的項(xiàng)目骄恶，可以從后端獲取二維碼所需要參數(shù)構(gòu)建二維碼，將redirect_uri直接指向后端的登陸接口匕垫，后端只需要根據(jù)登陸的成功與否將頁面重定向至需要的頁面即可叠蝇。
