在現今很多網站裡面,都使用了微信開放平台的掃碼登入認證處理,這樣做相當于把身份認證交給較為權威的第三方進行認證,在應用網站裡面可以不需要存儲使用者的密碼了。本篇介紹如何基于微信開放平台的掃碼進行網站的登陸處理。
要使用網站的掃碼登入處理,就需要先進行微信開放平台帳号的開發者資質認證,送出相關的資料,以及傳遞每年300元的認證費用。
認證後,建立相關的網站應用後,就有相關的APPID和APPSecret了,這些關鍵的參數就可以用來擷取相關的使用者資訊了。
網站應用的應用詳情界面如下所示。
整個開放平台感覺沒有多少東西,不過需要收費認證才能使用這些功能,感覺不是很爽。
我們采用的掃碼登入,需要通過開放平台擷取使用者的資訊,是以還需要設定擷取使用者基本資訊接口的域名,否則無法擷取資訊,進而會導緻重定向出錯。
設定域名在【接口權限】【網頁賬号】【網頁授權擷取使用者基本資訊】的修改入口,如下圖所示。
然後在彈出的對話框裡面輸入授權回調的域名即可。
這樣設定就可以確定擷取到使用者資訊了。
在進行微信OAuth2.在進行微信OAuth2.0授權登入接入之前,在微信開放平台注冊開發者帳号,并擁有一個已稽核通過的網站應用,并獲得相應的AppID和AppSecret,申請微信登入且通過稽核後,可開始接入流程。
微信OAuth2.0授權登入讓微信使用者使用微信身份安全登入第三方應用或網站,在微信使用者授權登入已接入微信OAuth2.0的第三方應用後,第三方可以擷取到使用者的接口調用憑證(access_token),通過access_token可以進行微信開放平台授權關系接口調用,進而可實作擷取微信使用者基本開放資訊和幫助使用者實作基礎開放功能等。
微信OAuth2.0授權登入目前支援authorization_code模式,适用于擁有server端的應用授權。該模式整體流程為:
擷取access_token時序圖:
從上圖我們可以大概了解整個掃碼登陸的處理過程。
1)使用者身份的綁定
為了實作二維碼掃碼登入,我們需要在現有系統裡面綁定使用者的微信,這樣才能在使用者掃碼的時候,判斷使用者的身份進而實作自動登入的過程。
我們可以在使用者管理裡面進行統一設定,也可以在正常使用者登入(使用者名+密碼)後進行設定,這個主要看我們是否需要保留使用者名密碼登陸這種方式。
例如可以在使用者管理裡面統一綁定,也就是在建立使用者的時候,讓使用者綁定下微信,擷取微信的唯一辨別。
也可以在保留使用者名密碼的登陸方式外,讓使用者登陸系統後自行進行綁定微信即可。
上面的界面,就是在一個頁面裡面彈出一個層,然後請求二維碼顯示即可,如下界面代碼所示。
上面的層在打開的時候,我們使用JS來動态擷取二維碼進行顯示,具體JS代碼如下所示。
上面的JS隻是做前端的資料請求和顯示,具體的QR動作Action其實就是生成掃描二維碼的過程,這個二維碼其實就是采用通用的方式,來建構一個指向我們綁定賬号的位址,進而實作我們綁定賬号的判斷,二維碼的生成過程如下所示。
為了實作使用者的綁定,我們需要擷取目前使用者的身份資訊,是以需要在BindWeChat的操作裡面做一個轉向處理,如下接口所示。
這個函數處理裡面,我們需要重新定向處理,我們把它定向到BindAccount函數裡面,友善擷取使用者的openid和其他必要的資訊。
另外我們基于微信開放平台的應用,建立了一個和微信賬号資訊的聯系,是以建立資料庫資訊如下所示。
也就是一個具體的開放平台應用對應着一個具體的微信賬号,這樣我們就可以充分利用配置進行處理了。
上面提到的BindAccount的處理的邏輯就是擷取必要的資訊,然後在資料庫層面對身份資訊進行驗證,具體代碼如下所示。
在綁定的過程,我們需要考慮綁定正确賬号,重複綁定其他賬号,無效綁定幾種情況,如果成功綁定正确賬号(可多次處理結果一樣),那麼得到界面如下所示(這個界面的樣式采用了weui的樣式)。
上面綁定了賬号後,就可以通過掃碼進行登入了,掃碼回調的時候我們有自己的判斷處理,掃碼界面如下所示(我們在保留使用者名密碼登陸的方式外,增加了一個掃碼登入的處理)。
如果是Bootstrap的界面效果
如果是EasyUI的界面效果
這個和前面的二維碼顯示規則差不多,不過他們的連接配接位址是不同的,這個地方用到了開放平台的接口,也就是我們前面提到開放平台認證的接口了。
上面的掃碼登入的界面代碼如下所示。
上面代碼需要引入JS檔案,并使用微信JSSDK的API進行顯示的。
這個裡面的參數,如APPID就是來源我們認證後的開放平台參數。
這些資訊我們在MVC控制器後面擷取後綁定在ViewBag,友善界面前端的使用。
其中的redirect_uri是通過資料庫擷取的LoginCallBackUrl位址,這個位址類似如下格式:http://www.iqidi.com/H5/callback?uid=iqidiSoftware
也就是我們在開放平台處理傳回後進行的回調處理。
通過開放平台的APPID和APPSecret,我們可以擷取到對應的接口調用憑證,然後根據接口憑證,以及openid,獲得使用者的公衆平台統一的UnionID,這個辨別是我們使用者的唯一辨別,代碼如下所示。
有了unionid我們就可以根據這個辨別在我們的使用者資料庫裡面查找對應的使用者,如下代碼所示。
然後判斷我們去到的使用者資訊是否正确,如下代碼所示
如果不成功,那麼我們定向到指定的界面即可。
如果我們登陸成功後,需要設定一些Session資訊或者Cookie資訊,那麼就可以通過CheckLogin函數進行處理即可。
以上就是我們結合微信開放平台實作微信掃碼登入的過程,其中整個過程就是用到了下面幾個過程。
JS微信登入主要用途:網站希望使用者在網站内就能完成登入,無需跳轉到微信域下登入後再傳回,提升微信登入的流暢性與成功率。 網站内嵌二維碼微信登入JS實作辦法:
步驟1:在頁面中先引入如下JS檔案(支援https):
步驟2:在需要使用微信登入的地方執行個體以下JS對象:
通過code擷取access_token
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
擷取access_token後,進行接口調用,
對于接口作用域(scope),能調用的接口有以下:
授權作用域(scope)
接口
接口說明
snsapi_base
/sns/oauth2/access_token
通過code換取access_token、refresh_token和已授權scope
/sns/oauth2/refresh_token
重新整理或續期access_token使用
/sns/auth
檢查access_token有效性
snsapi_userinfo
/sns/userinfo
擷取使用者個人資訊
其中snsapi_base屬于基礎接口,若應用已擁有其它scope權限,則預設擁有snsapi_base的權限。使用snsapi_base可以讓移動端網頁授權繞過跳轉授權登入頁請求使用者授權的動作,直接跳轉第三方網頁帶上授權臨時票據(code),但會使得使用者已授權作用域(scope)僅為snsapi_base,進而導緻無法擷取到需要使用者授權才允許獲得的資料和基礎功能。
通過上面接口,我們可以獲得相應的使用者身份資訊,是以可以結合我們使用者資料庫進行使用者身份的認定和處理,并設定必要的Session或者Cookie資訊等,最後定位到我們的應用主界面即可。