上一篇，簡(jiǎn)單介紹了ABP默認(rèn)登錄的流程以及部分技術(shù)點(diǎn)，接下來(lái)的幾篇,我們開(kāi)始講解ABP對(duì)接釘釘掃碼登錄.
? ? ? 這篇主要講解,利用 前端框架 Vue 對(duì)接 釘釘掃碼登錄頁(yè)面并獲取釘釘用戶唯一標(biāo)識(shí).
1. 全局配置,掃碼登錄頁(yè)面和回調(diào)頁(yè)面是同一個(gè)頁(yè)面，均是/views/login/ddQrInfo
redirectUrl 回調(diào)地址
appid? 上一篇?jiǎng)?chuàng)建的掃碼登錄應(yīng)用的appid??
appSecret上一篇?jiǎng)?chuàng)建的掃碼登錄應(yīng)用的appSecret?
originUrl? ?用于判斷是否是來(lái)自ddlogin掃碼事件
http_url? ? 用于獲取臨時(shí)授權(quán)碼
login_html_Url??用于獲取掃碼登錄的二維碼地址
getCodeUrl用于獲取用戶身份唯一標(biāo)識(shí)的接口地址
2.? data 屬性，利用return返回json對(duì)象，若不使用return包裹,數(shù)據(jù)會(huì)在項(xiàng)目的全局可見(jiàn)，會(huì)造成變量污染,這里不在多介紹.
回調(diào)地址中包含的code(釘釘用戶唯一標(biāo)識(shí)碼),代碼中是利用?qs?組件獲取。
請(qǐng)求后端接口的時(shí)候,傳遞的json對(duì)象?externalloginModel,AuthProvider?代表第三方授權(quán)類型,這里就是指掃碼登錄授權(quán),我們使用?DDScanQRCode?字符串,進(jìn)行表示
ProviderKey和ProviderAccessCode?被賦值為?code的值,表示當(dāng)前釘釘? 掃碼用戶身份的唯一標(biāo)識(shí)
3. hanleMessage,當(dāng)觸發(fā)掃碼事件之后,執(zhí)行的方法.
主要是利用臨時(shí)授權(quán)碼，調(diào)用釘釘獲取用戶唯一標(biāo)識(shí)的接口，獲取用戶唯一標(biāo)識(shí)，并回調(diào).
4.?showQrInfo?,自定義方法.
?主要是設(shè)置二維碼樣式并根據(jù)二維碼鏈接展示二維碼
5. hanleLogin,自定義方法.
主要是 攜帶externalloginModel，訪問(wèn)后端接口，進(jìn)行登錄驗(yàn)證
?6. created方法，它是vue中的一個(gè)鉤子函數(shù),它在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖，這里不在多介紹.
code不為空，則更新?externalloginModel中ProviderKey和ProviderAccessCode的值，然后將externalloginModel作為參數(shù)，調(diào)用后端接口,進(jìn)行登錄驗(yàn)證.
code為空，則注冊(cè)監(jiān)聽(tīng)掃碼事件，一旦頁(yè)面有掃碼操作就觸發(fā)?handleMessage方法，以及整合獲取二維碼鏈接以及獲取code的鏈接，隨后調(diào)用showQrInfo?方法，展示二維碼.
獲取到釘釘二維碼之后，移動(dòng)端釘釘利用掃一掃，掃描二維碼，繼續(xù)在移動(dòng)端點(diǎn)擊?登錄網(wǎng)頁(yè)版xxxx,此時(shí)觸發(fā)掃碼事件，執(zhí)行?hanleMessage?方法，在這個(gè)方法中，通過(guò)事件源 獲取?臨時(shí)登錄碼，再通過(guò)?臨時(shí)登錄碼?訪問(wèn)釘釘獲取用戶唯一標(biāo)識(shí)的接口，接口執(zhí)行成功之后，回調(diào)到/views/login/ddQrInfo頁(yè)面，此時(shí)鏈接地址中就會(huì)有code, 接著執(zhí)行?created?方法,執(zhí)行?hanleLogin?方法訪問(wèn)后端接口，進(jìn)行登錄驗(yàn)證.
