由于掃碼登錄比賬號(hào)密碼登錄更方便、快捷、靈活，在實(shí)際使用中更受到用戶的歡迎。在這個(gè)趨勢下，一些SAAS軟件也開始增加掃碼登錄的功能。本人在前幾天就對(duì)公司的地產(chǎn)中介管理系統(tǒng)的登錄功能進(jìn)行優(yōu)化，增加了掃碼登錄功能。在梳理的過程中發(fā)現(xiàn)這個(gè)小功能還是很有趣的。

背景

產(chǎn)品有手機(jī)端和PC端，PC端只有賬號(hào)密碼登錄，登錄方式比較單一。

產(chǎn)品的用戶是地產(chǎn)經(jīng)紀(jì)人，在實(shí)際工作中，他們沒有固定的使用的電腦，所以每次使用系統(tǒng)都需要重新輸入賬號(hào)和密碼，登錄過程不方便。所以需要增加掃碼登錄，方便用戶登錄。

掃碼登錄原理

1、web服務(wù)端需要生成了一個(gè)唯一KEY,代表此次用戶的登錄事件ID。

2、根據(jù)唯一KEY生成二維碼信息，顯示在網(wǎng)頁上。

3、用戶app掃描二維碼

4、掃描后App通知服務(wù)端我已經(jīng)掃描了二維碼。

5、服務(wù)端接收消息后，更新網(wǎng)頁提示說已經(jīng)掃描，把唯一KEY加入將要登錄列表，如果超時(shí)將會(huì)移除。

6、用戶app端主動(dòng)獲取當(dāng)前狀態(tài)，如果唯一KEY沒有超時(shí)或者沒有異常，將會(huì)跳轉(zhuǎn)到app端的確認(rèn)登錄頁面。

7、用戶點(diǎn)擊確認(rèn)登錄后，與服務(wù)端通信，提交用戶名和密碼驗(yàn)證值（可以考慮其他方案）。

8、web服務(wù)端接收后，判斷驗(yàn)證值是否與數(shù)據(jù)庫的驗(yàn)證值匹配，如果匹配確認(rèn)用戶登錄。

9、用戶app端檢測服務(wù)端返回值，處理當(dāng)前返回狀態(tài)，登錄成功，失敗。

掃碼登錄邏輯

PC端登錄頁面

進(jìn)入登錄頁面，默認(rèn)顯示賬戶登錄；

點(diǎn)擊“賬戶登錄”、“掃碼登錄”，可切換登錄模式；

點(diǎn)擊“掃碼登錄”，彈出二維碼；

點(diǎn)擊“返回”按鈕，或點(diǎn)擊“賬戶登錄”，切換到賬戶登錄模式

掃碼成功

點(diǎn)擊APP首頁的掃碼入口，彈出“掃一掃”頁面：

成功掃碼后，點(diǎn)擊“確認(rèn)登錄”按鈕，跳轉(zhuǎn)到APP首頁并提示“登錄成功”；

5秒鐘后提示語消失，首頁顯示PC端登錄狀態(tài)；

手機(jī)未綁定

當(dāng)APP處于未綁定狀態(tài)，打開APP首頁提示綁定

手機(jī)無網(wǎng)絡(luò)

當(dāng)手機(jī)沒有網(wǎng)絡(luò)連接時(shí)，掃碼后提示網(wǎng)絡(luò)連接失?。?/p>

點(diǎn)擊“確定”按鈕后回到“掃一掃”頁面

電腦無網(wǎng)絡(luò)

當(dāng)電腦沒有網(wǎng)絡(luò)連接，打開客戶端或者網(wǎng)頁，則提示網(wǎng)絡(luò)異常。

二維碼過期失效

當(dāng)在一分鐘內(nèi)未掃碼，或者掃碼后未確認(rèn)登錄，則二維碼過期失效。

如果手機(jī)端一直沒有確認(rèn)登錄，則一直是“確認(rèn)登錄”頁面；一分鐘后PC端的二維碼失效。

手機(jī)端掃了失效的二維碼，提示“二維碼”已失效；點(diǎn)擊“確定”按鈕后回到“掃一掃”頁面。

其他APP掃碼

用其他App掃碼后，跳轉(zhuǎn)到App Store的相應(yīng)下載頁面，或者跳轉(zhuǎn)到H5頁面，提示下載。

例如QQ的提示頁：

退出登錄

點(diǎn)擊App首頁中登錄狀態(tài)那一欄，彈窗退出頁面，點(diǎn)擊“退出”，PC端退出登錄，手機(jī)端的登錄狀態(tài)消失。

掃碼登錄的好處

避免密碼泄露

在不考慮電腦中毒的情況下，輸入密碼也有可能被攻擊者肉眼看到或者拍攝到。而掃碼登入，盡管二維碼是公開的，但只有你自己用手機(jī)APP掃描才有用。

原先的核心驗(yàn)證信息是賬號(hào)密碼，是暴露在外界的。現(xiàn)在的核心驗(yàn)證信息變成了手機(jī)里的app_token,而這是外界看不到的，只有手機(jī)APP自己知道。就這點(diǎn)來說，安全性確實(shí)提高了。

避免撞庫攻擊

許多人在設(shè)置密碼時(shí)，為了省事，會(huì)在多個(gè)網(wǎng)站設(shè)置相同的密碼。這樣一旦任何一個(gè)網(wǎng)站被攻破，攻擊者拿到了你的密碼，他就可以嘗試并成功登入其他網(wǎng)站。

而掃碼登入的話，就算攻擊者拿到了?app_token，也找到了偽造請(qǐng)求的正確方法，他也只能登入一個(gè)網(wǎng)站，對(duì)其他網(wǎng)站束手無策。

便捷性

隨著現(xiàn)在App越來越多，用戶需要設(shè)置的密碼也越來越多，很多人是記不住自己的密碼。以我個(gè)人為例，我的QQ被盜過幾次，改過幾次密碼，每次登錄時(shí)都要試好幾遍，這導(dǎo)致整個(gè)登錄過程很繁瑣。

還有就是有人用戶的密碼設(shè)置的比較復(fù)雜，大小寫+數(shù)字+符號(hào)等，在輸入密碼時(shí)非常容易出錯(cuò)。在這種時(shí)候，掃碼登錄真的是非常讓人愉悅又便捷的選擇了。

提高手機(jī)端的使用率

使用掃碼登錄的一個(gè)前提就是手機(jī)端處于登錄狀態(tài)。對(duì)于微信來說，這個(gè)舉動(dòng)確實(shí)可以保證微信用戶必是移動(dòng)客戶端用戶，有利于微信移動(dòng)端戰(zhàn)略。

目前的SAAS產(chǎn)品以PC端為主，但地產(chǎn)中介的SAAS產(chǎn)品也在積極地推動(dòng)移動(dòng)端的使用。如果掃碼登錄功能上線，移動(dòng)端的下載和活躍使用也會(huì)有增長。

掃碼登錄的弊端

用戶習(xí)慣的改變

大部分用戶習(xí)慣了賬戶密碼登錄，突然強(qiáng)制掃碼登錄，強(qiáng)行改變用戶習(xí)慣，這容易導(dǎo)致用戶的反對(duì)心理。以淘寶為例，之前淘寶在推廣掃碼登錄之初，直接取消掃碼登錄，遭到廣大用戶的投訴。在改進(jìn)后，賬戶密碼登錄到一半時(shí)，強(qiáng)行跳出掃碼登錄彈框。這個(gè)操作也遭到很多用戶的吐槽。在不斷地改進(jìn)后，淘寶目前還是以推廣掃碼登錄為主?？梢钥吹?，淘寶的的默認(rèn)登錄方式還是掃碼登錄，點(diǎn)擊右上角進(jìn)行切換。

當(dāng)然有比較好的解決方法，就是掃碼登錄和賬號(hào)密碼登錄并存，只給用戶多個(gè)選擇，不綁架用戶。這樣的話，用戶更容易接納掃碼登錄，時(shí)間長了，也愿意使用它。

在某些情況下并不方便快捷

如果用戶是使用固定的個(gè)人電腦，網(wǎng)站上的賬戶密碼都自動(dòng)記住，在登錄時(shí)只需點(diǎn)擊“確定”即可登錄?；蛘哂脩舻拿艽a簡單好記，無需太多時(shí)間輸入。此時(shí)如果使用掃碼登錄的話，還需要掏出手機(jī)，解鎖屏幕，找到對(duì)應(yīng)app，打開，找到掃一掃的按鈕，點(diǎn)一下，慢慢等手機(jī)相機(jī)啟動(dòng)，掃一下，然后登錄成功。相比之下，掃碼登錄的過程更繁瑣，并沒有幫助用戶方便快捷地登錄。

總結(jié)

由于掃碼登錄現(xiàn)在被廣泛應(yīng)用，微信、QQ、釘釘這些軟件都做得很不錯(cuò)。所以在思考這個(gè)功能的時(shí)候有比較成熟的參考例子。在梳理掃碼過程中，不同情況也能夠思考地更完整。

SAAS產(chǎn)品的掃碼登錄比較特殊的一點(diǎn)是，關(guān)于權(quán)限的問題。但由于各個(gè)SAAS產(chǎn)品的登錄權(quán)限都不同，所以這里就沒展開講。

總而言之，在查找資料、梳理邏輯的過程中，發(fā)現(xiàn)每天使用的掃碼登錄功能背后還是很有趣的。這也正是產(chǎn)品工作的樂趣所在，將最復(fù)雜的邏輯考慮清楚，將最簡單的產(chǎn)品呈現(xiàn)給用戶。

作者：異彩，產(chǎn)品新人。公眾號(hào)：一只蝸牛慢慢跑

本文由 @異彩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自?Pixabay，基于?CC0?協(xié)議