公眾號掃碼登錄最佳實踐

時間：2023-05-11 01:36:01 | 來源：網(wǎng)站運營

時間：2023-05-11 01:36:01 來源：網(wǎng)站運營

公眾號掃碼登錄最佳實踐：設(shè)計任何一套系統(tǒng)，都離不開用戶，用戶身份的鑒定，用戶資料的儲存和更新本身不難，然而用戶四處注冊賬號，等到回頭用你的軟件時早就忘記了賬號密碼，尤其是一些工具型的應(yīng)用，沒有必要自建用戶體系。

?解決用戶容易忘記賬號和密碼這個問題通常的做法的是手機(jī)號+短信驗證碼，這個方案很不錯，但是除了會產(chǎn)生短信費用外，還會增加用戶的操作成本，用戶需要輸入手機(jī)號碼，點擊獲取短信驗證碼，等待收取短信同時查看手機(jī)，再輸入驗證碼，再點擊登錄按鈕，前前后后一共5個步驟，看來是步驟挺多, 其實操作起來還是可以接受的，但是能不能再優(yōu)化一些呢？答案是肯定的！

現(xiàn)在網(wǎng)絡(luò)上隨處可見的掃碼登錄，只需要打開微信掃碼，即可完成登錄。打開目標(biāo)網(wǎng)站的登錄頁面，再打開微信掃碼一下頁面上的二維碼，即可完成目標(biāo)網(wǎng)站的登錄過程，極簡的情況下就這兩步而已。根據(jù)設(shè)計需要，還可以在手機(jī)端做一些用戶確認(rèn)登錄或取消登錄的邏輯。

今天要介紹的就是PC端網(wǎng)頁應(yīng)用結(jié)合微信實現(xiàn)掃碼登錄的方案。

實現(xiàn)微信掃碼登錄的方案有兩大類

一、微信開放平臺接入網(wǎng)站應(yīng)用

這種方式接入簡單快速，但是僅限于掃碼登錄，登錄后用戶在手機(jī)端的頁面只能關(guān)閉，不能留存下來做更多的事，而且PC端二維碼頁面是跳到微信側(cè)域名下展示，授權(quán)后再跳轉(zhuǎn)回來，不太優(yōu)雅。如何接入請參考 https://open.weixin.qq.com/cgi-bin/frame?t=home/web_tmpl&lang=zh_CN

二、公眾號接口

通過公眾號的接口來實現(xiàn)，這種方式不但能實現(xiàn)掃碼登錄，還能讓用戶停留在手機(jī)端網(wǎng)頁(公眾號網(wǎng)頁)，或停留在公眾號會話窗口，甚至下發(fā)消息給用戶，本文主要介紹這種方式。

前置條件：微信認(rèn)證的訂閱號或服務(wù)號，因為這兩種賬號才有權(quán)限獲取用戶信息。

2.1 公眾號掃碼登錄方案一：網(wǎng)頁授權(quán)（推薦）

這種方式邏輯簡單易實現(xiàn)，用戶還能停留在公眾號網(wǎng)頁端繼續(xù)其他操作，也可以登錄完成后直接關(guān)閉頁面。

1. 用戶訪問PC端登錄頁面，觸發(fā)WEB服務(wù)器端儲存其SessionID到數(shù)據(jù)庫用于后續(xù)與登錄用戶的綁定
2. 生成二維碼并顯示，二維碼內(nèi)容是公眾號網(wǎng)頁的登錄頁地址，需帶上SessionID參數(shù)，在這個頁面實現(xiàn)授權(quán)登錄同時把SessionID和用戶綁定
3. PC端網(wǎng)頁開啟實時登錄結(jié)果查詢，并進(jìn)行相應(yīng)的跳轉(zhuǎn) (設(shè)置最長的檢查時間、次數(shù)等用于防止用戶未掃碼導(dǎo)致頁面長時間調(diào)用后端資源)
4. 用戶使用微信掃碼訪問公眾號網(wǎng)頁登錄地址完成授權(quán)登錄
5. WEB服務(wù)器將用戶信息和SessionID匹配，此時第3步中的實時查詢可得到登錄結(jié)果并跳轉(zhuǎn)

在公眾號網(wǎng)頁登錄頁面上用戶完成微信授權(quán)登錄之后，可以停留并顯示當(dāng)前正在登錄的PC端網(wǎng)站名稱、同意登錄按鈕、取消登錄按鈕，這樣更貼近微信平臺原生的掃碼登錄邏輯，當(dāng)然也可以掃碼后就直接完成登錄過程，簡化用戶操作，根據(jù)實際的業(yè)務(wù)情況而定。




2.2 公眾號掃碼登錄方案二：公眾號臨時二維碼

這種方式的一個最大的特點就是用戶可以停留在公眾號會話窗口，并且公眾號可以下發(fā)消息給用戶，缺點是所需權(quán)限較高，只有認(rèn)證過的服務(wù)號才能使用，實現(xiàn)起來復(fù)雜度也較高。

如果有引導(dǎo)用戶到公眾號界面或有會話需求則可以考慮這種方式。

1. 用戶訪問PC端登錄頁面，發(fā)起臨時二維碼獲取請求
2. 服務(wù)器和微信側(cè)通過API溝通獲取臨時二維碼并返回到PC端登錄頁面顯示二維碼
3. PC端網(wǎng)頁開啟實時登錄結(jié)果查詢，并進(jìn)行相應(yīng)的跳轉(zhuǎn) (設(shè)置最長的檢查時間、次數(shù)等用于防止用戶未掃碼導(dǎo)致頁面長時間調(diào)用后端資源)
4. 用戶使用微信掃碼
5. 微信進(jìn)入公眾號會話頁面并停留
6. 微信側(cè)下發(fā)掃碼事件給WEB服務(wù)器，服務(wù)器在收到掃碼事件后，將臨時二維碼與用戶匹配，標(biāo)記登錄，第3步中的實時查詢可得到登錄結(jié)果并跳轉(zhuǎn)
7. 服務(wù)器通過API調(diào)用公眾號下發(fā)消息給用戶用作提示或其他用途

掃碼事件的發(fā)生微信會認(rèn)為此用戶是當(dāng)前公眾號的活躍用戶，在一定時間內(nèi)可多次下發(fā)消息給用戶，屬于被動回復(fù)消息。

以上就是微信公眾號實現(xiàn)PC端網(wǎng)站掃碼登錄的解決方案，來自我多個落地項目的經(jīng)驗，希望能幫助到有需要的朋友。

往期文章

小鵝通與自有網(wǎng)站賬號打通實現(xiàn)統(tǒng)一登錄鑒權(quán)
H5開發(fā)地圖組件怎么選？騰訊地圖 vs 高德地圖

本文相關(guān)文檔地址

1. https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html (公眾號網(wǎng)頁授權(quán))
2. https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html (公眾號臨時二維碼)