在前面隨筆《C#開發微信門戶及應用(41)--基於微信開放平臺的掃碼登錄處理》介紹了基於微信開放平臺介面實現的微信掃碼直接登錄的過程。本篇介紹對掃碼登錄的一些改進和處理,以便更方便應用在實際項目中。 ...
在前面隨筆《C#開發微信門戶及應用(41)--基於微信開放平臺的掃碼登錄處理》介紹了基於微信開放平臺介面實現的微信掃碼直接登錄的過程。本篇介紹對掃碼登錄的一些改進和處理,以便更方便應用在實際項目中。
1、掃碼登錄配置處理
在我前面的隨筆掃碼登錄處理中,介紹了賬號登陸和掃碼登錄並存的情況,有時候我們可能想只是允許用戶掃碼登錄即可,也就是不需要賬號登陸,這種情況我們可以通過進行配置實現處理。
例如我在一個基於微信的系統應用裡面,通過配置實現了僅僅允許掃碼登錄的效果。
也就是我們可以根據配置,因此其他登錄界面,僅僅顯示微信的掃碼登錄生成的二維碼效果,如下所示。

在實現的代碼裡面,我們主要就是使用JS對界面顯示進行控制即可。
一般情況下,我們在開發初期,可以允許賬號密碼登陸及掃碼登錄,一旦配置好相關的賬號信息,就只需要掃碼登錄,屏蔽賬號密碼登陸了。

其中我們需要處理的HTML代碼層就是增加一個openLoginDiv用來顯示掃碼登錄的二維碼即可。

其中的JS代碼處理如下所示,直接從後臺讀取相關的信息,在JS上構建二維碼。

2、用戶掃碼綁定及取消
在用戶能夠使用掃碼登錄前,我們在後臺是需要先記錄用戶的微信標識的,也就是需要在系統上設置一個功能,讓用戶使用微信掃一下綁定,同時也應該設置一個功能讓其解綁,方便對失效的用戶進行處理。
在用戶列表的二維碼連接上,單擊可以對用戶進行微信掃碼綁定,這樣用戶可以在掃碼登錄處直接掃碼登錄,不需要輸入賬號密碼。

一旦成功綁定用戶微信,在微信端會定位到一個綁定成功的頁面,如下所示。

如果用戶已經綁定了其中的一個用戶而再去掃碼綁定其他用戶,那麼會提示用戶避免無法重覆綁定賬號即可。

另外,如果用戶已經進行了二維碼綁定,則可以在管理界面進行取消綁定,這樣可以解綁用戶賬號和微信之間的關聯。

綁定和取消綁定微信掃碼操作的JS代碼就是通過JQuery實現介面調用介面。

取消綁定微信掃碼的界面的處理代碼很簡單,只需要在後臺清楚對應的用戶記錄的openid和unionid即可。
具體的MVC控制器或者API代碼如下所示。

而在底層BLL的代碼裡面,我們只需要做的就是更新指定的兩個欄位即可,把它們清空的代碼如下所示。
