用戶注冊與登錄的設(shè)計是個老話題了炸客，今天來點新鮮的。
一戳稽、傳統(tǒng)招數(shù)
目前主流的用戶登錄設(shè)計主要有4種：
- 賬號密碼登錄
- 手機短信登錄
- 社交賬號登錄
- 自有 APP 掃碼登錄
賬號密碼這種方式最為古老也最長青馆蠕，當然，缺點也是挺明顯的惊奇。最大的問題當然是無法判斷賬號的真實性互躬，因為一個人可以注冊多個賬號。
后來赊时，為了讓注冊用戶更真實吨铸，大多數(shù)網(wǎng)站選擇了手機短信驗證碼的方式。這種方式就好多了祖秒，用戶也覺得方便诞吱，就是有點費錢舟奠。人品不好遇到機器人刷驗證碼，那費得更厲害房维，以至于后來發(fā)短信驗證碼前都要先來一遍圖形驗證碼(Captcha)沼瘫，為了省錢降低了不少體驗。
而社交賬號登錄一開始只是為了解決用戶體驗的問題咙俩，畢竟它比賬號密碼登錄要方便多了耿戚。長期以來，它都是一種備用方案作為前面兩種方案的補充阿趁，如果要驗證用戶身份的真實性膜蛔，還是要結(jié)合手機短信驗證碼來做手機綁定。
自有 APP 掃碼登錄不必多說脖阵，這是一個擁有強粘性用戶的選擇皂股。普通的 SaaS 在獲客階段此種方式不可取，但在進入成交使用階段后命黔，還是可以大量采用的呜呐。
二、微信公眾號方案
我今天所說的「高性價比的 SaaS 系統(tǒng)用戶注冊與登錄設(shè)計」悍募，算是半個標題黨吧蘑辑，因為這不是一個全新的方案，它是基于微信公眾號來實現(xiàn)的坠宴。方案的前提是建立在用戶沒有安裝你的產(chǎn)品 APP洋魂，甚至是剛剛了解你的產(chǎn)品，在網(wǎng)站上準備注冊試用的時候啄踊，觸發(fā)注冊行為的入口是在 Web 上（非移動端場景）忧设。它概括起來要實現(xiàn)三個要點：
- 高用戶互動觸達率（你找得到用戶，用戶找得到你）
- 低成本（省錢颠通，最好免費，短信費都不想出）
- 不犧牲用戶體驗（甚至某些體驗比傳統(tǒng)方式更好）
要實現(xiàn)這幾點膀懈，內(nèi)容比較多顿锰，我打算用一個系列來記錄。這個系列每一篇文章都解決了一個場景的問題启搂，可以作為獨立方案使用硼控，最后合在一起，就是一個完整的可以馬上用的方案胳赌。
聲明一下牢撼，這些方案中，并非都是我原創(chuàng)疑苫，我也看到很多網(wǎng)站在多年前就已經(jīng)在采用其中的一些方法熏版，但是網(wǎng)上并沒有人給出具體的技術(shù)實現(xiàn)纷责，我會在文章里給出這些技術(shù)實現(xiàn)的細節(jié)。當然撼短，整體方案中仍然有很大一部分——尤其是后面的幾篇文章再膳，會介紹一些目前沒有人采用或者很少人采用了但并沒有公布在網(wǎng)上的方法。
三曲横、場景描述
今天先來解決用戶互動觸達率的問題喂柒，也是不少網(wǎng)站已經(jīng)在采用的「讓用戶關(guān)注公眾號替代微信掃碼用戶授權(quán)(OAuth 2)登錄」的方案，它的優(yōu)點是僅使用一次掃碼禾嫉，就實現(xiàn)了注冊灾杰、登錄和用戶身份綁定，并可以通過公眾號下發(fā)消息熙参，再次觸達用戶艳吠。
場景一：用戶注冊
用戶在網(wǎng)站上準備注冊時，從用戶視角來看尊惰，步驟是這樣的：
- 用戶點擊「注冊/登錄」按鈕讲竿；
- 頁面展示一個二維碼，并提示用戶「使用微信掃描二維碼」弄屡；
- 微信掃碼后题禀，進入「公眾號關(guān)注」頁，用戶手動點擊「關(guān)注」膀捷；
- 公眾號返回消息「注冊成功」迈嘹；
- 電腦頁面顯示「注冊成功」并成功登錄，跳轉(zhuǎn)到登錄后頁面全庸。
看起來步驟不少秀仲，但仔細看看用戶的實際操作，只有「掃碼」和「關(guān)注」兩個動作壶笼，和傳統(tǒng)的 OAuth 2 掃碼授權(quán)登錄時的動作是一樣多的神僵，只是把「確定授權(quán)」換成了「關(guān)注」。
有的網(wǎng)站仍然采用了「驗證碼」的思路（我不推薦）覆劈，在第 2 步時保礼，電腦網(wǎng)頁會出現(xiàn)一個驗證碼輸入框并提示用戶掃碼獲取驗證碼，在第 4 步時微信會發(fā)出一個「驗證碼」责语，用戶第 5 步時在電腦端填入炮障。這種方式需要用戶的操作更多，但給用戶的感覺會更溫和坤候，更像是一個用戶接收驗證碼的過程而不是一個刻意引導(dǎo)用戶關(guān)注公眾號的過程胁赢。
不要小看了這個「關(guān)注公眾號」的過程，它是比「短信」和「郵件」更能與用戶發(fā)生連接的地方白筹。只這一個優(yōu)點智末，就是傳統(tǒng)注冊方式無法比擬的了谅摄。同時，由于微信的加持吹害，也可以在這個過程中和用戶授權(quán)登錄一樣螟凭，拿到用戶的頭像、昵稱它呀、性別螺男、地區(qū)等信息，用于完善用戶的信息纵穿。
場景二：用戶登錄
用戶在注冊成功之后下隧，下一次登錄時的步驟更是減少到只需要一個「掃碼」的步驟：
- 用戶點擊「注冊/登錄」按鈕；
- 頁面展示一個二維碼谓媒，并提示用戶「使用微信掃描二維碼」淆院；
- 用戶微信掃碼，公眾號返回消息「登錄成功」句惯；
- 電腦端顯示「登錄成功」并跳轉(zhuǎn)到登錄后頁面土辩。
這個體驗，怕是比「微信授權(quán)登錄」還簡單抢野。
四拷淘、技術(shù)實現(xiàn)
接下來我要介紹這個方案的技術(shù)實現(xiàn)細節(jié)。以下是該方案的功能時序圖指孤，請完成閱讀和理解：
方案中在等待用戶微信掃碼時启涯，電腦端網(wǎng)頁和服務(wù)器之間有一個等待并保持通信的過程，這個過程既可以采取由網(wǎng)頁端發(fā)起輪詢恃轩，也可以用 WebSocket 建立長連接结洼。由于業(yè)務(wù)邏輯比較簡單，這里我推薦采用客戶端輪詢的方式叉跛。
API接口
以網(wǎng)頁端采用輪詢方式為例松忍，服務(wù)端提供的接口一共有3個，2個給前端調(diào)用筷厘，1個用作微信公眾號平臺的回調(diào)（也可以在已有回調(diào)地址上增加功能）：
/login-start
#(給前端)獲取登錄二維碼#請求參數(shù)：無
#響應(yīng)結(jié)果：服務(wù)端生成的「唯一請求參數(shù)」和二維碼地址
/check-login
#(給前端)獲取登錄成功狀態(tài)
#請求參數(shù)：上一個接口返回的「唯一請求參數(shù)」
#響應(yīng)結(jié)果：等待掃碼 或 登錄成功 或 二維碼已超時
/wx-service-callback
#(在微信公眾號平臺注冊的回調(diào)地址) 注冊成功后返回消息
#請求參數(shù)：微信公眾號平臺回調(diào)的XML數(shù)據(jù)
#響應(yīng)結(jié)果：XML格式的公眾號消息` </pre>
數(shù)據(jù)庫
服務(wù)端首先要在數(shù)據(jù)庫創(chuàng)建一個數(shù)據(jù)表挽铁，用于存放「訪問參數(shù)」以及其狀態(tài)與過期時間。為了性能考慮敞掘，可以將訪問參數(shù)放入 Redis 緩存，并設(shè)置對應(yīng)的過期時間楣铁。
服務(wù)
在服務(wù)端已經(jīng)實現(xiàn)微信公眾號接口調(diào)用的情況下（即 accessToken 已經(jīng)拿到）玖雁，服務(wù)端要實現(xiàn)的對應(yīng)的主要服務(wù)也有3個，以下是實現(xiàn)邏輯的文字描述盖腕，實際開發(fā)中應(yīng)該根據(jù)項目自身的結(jié)構(gòu)重新分拆赫冬、組織文件浓镜，編寫接口與實現(xiàn)：
/* 獲取登錄二維碼
* 參數(shù)：無
* 返回：
* LoginProcess.qrcodeUrl 微信公眾號接口返回的二維碼鏈接
* LoginProcess.requestCode 唯一請求參數(shù)
*/
LoginProcess startLoginProcess() {
// 1. 生成「唯一請求參數(shù)」，放入數(shù)據(jù)庫和緩存劲厌，并設(shè)置過期間
// 唯一請求參數(shù)有3個狀態(tài)：未驗證膛薛、已驗證、已過期
// 2. 用「唯一請求參數(shù)」調(diào)用微信公眾號「生成帶參數(shù)的二維碼」接口生成二維碼
// 3. 返回二維碼鏈接 及 唯一請求參數(shù)
}
/* 獲取登錄結(jié)果
* 參數(shù)：唯一請求參數(shù)
* 返回：
* 登錄過程結(jié)果
*/
String checkLoginProcess(String requestCode){
// 1. 查詢唯一請求參數(shù)狀態(tài)及是否過期
// 2. 如果已過期补鼻，則更新唯一請求參數(shù)狀態(tài)為「已過期」哄啄，并返回 二維碼已過期
// 3. 如果狀態(tài)為 未驗證 時，返回 等待掃碼
// 4. 如果狀態(tài)為 已驗證 時风范，執(zhí)行登錄邏輯咨跌，并刪除唯一請求參數(shù)，返回 登錄成功
}
/* 處理微信公眾號平臺回調(diào)（如果用戶未注冊將創(chuàng)建用戶）
* 參數(shù)：微信用戶 openId硼婿，唯一請求參數(shù)
* 返回：返回給微信公眾號的消息
*/
String weixinCallback(String wxOpenId, String requestCode) {
// 1. 如果該微信 openid 的用戶已存在锌半，表示用戶已注冊
// 1.1 更新唯一請求參數(shù)狀態(tài)為「已驗證」
// 1.2 向微信公眾號平臺返回消息「登錄成功」
// 2. 如果該微信 openid 的用戶已不存在，表示尚未注冊
// 2.1 如果用戶未注冊寇漫，則從微信請求用戶基本信息
// 2.2 創(chuàng)建用戶
// 2.3 更新唯一請求參數(shù)狀態(tài)為「已驗證」
// 2.4 向微信公眾號平臺返回消息「注冊成功」
}
}
五刊殉、總結(jié)
今天介紹的以引導(dǎo)用戶關(guān)注微信公眾號的方式完成注冊的方法，已經(jīng)是一個成熟的方案州胳，有很多網(wǎng)站也已經(jīng)在使用這種方式了记焊。我認為它最大的優(yōu)點就是加強了和用戶的連接，用戶注冊后陋葡，即可以使用微信的「客戶消息」接口向用戶推送多條消息亚亲；也可以利用服務(wù)號的優(yōu)勢后續(xù)持續(xù)的為用戶服務(wù)。
本系列的下一篇腐缤，我會講一講如何利用微信代替手機短信驗證實名手機的方案和技術(shù)實現(xiàn)捌归，如果你感興趣的話，請持續(xù)關(guān)注「SaaS 產(chǎn)品派」接下來的系列文章岭粤。
