深入理解微信二維碼掃碼登錄的原理

1、二維碼應用場景及安全問題

二維碼使用廣泛，生活處處都有二維碼的使用場景，

就拿我前幾天遇到的事情來說一說，那天我去騎共享單車出門，發現單車的二維碼上面貼著別的二維碼（不是，打廣告也不能這樣打吧 -_- …），用我在生活中遇到的一個小小的案例來引出主題，可見，二維碼現在已經被使用的非常廣泛了，所以一種東西的使用量到達一定程度之后，好不好用已經不是人們唯一關心的問題了，安全問題是現在用戶越來越重視的！

所以二維碼的安全性到底有沒有保障呢， 有朋友會問了，我掃了你的碼，你會不會把我銀行卡密碼給 “搞” 走了？ 這問題提的非常的好啊，接下來，我們就一起來分析一下，二維碼背后的原理和實作，就能輕松的得到這個問題的答案啦，Let’s Go！

2、二維碼登錄的本質

二維碼其實就是一種認證方式，比如我們電腦登錄微信，就需要我們用手機掃描電腦二維碼，掃描后手機微信就會彈出一個登錄確認視窗，詢問我們是否確認登錄，

你有沒有思考過，為什么毫無相干的兩個設備，會有如此的聯系呢，其實這就是這個二維碼發揮的作用了，

這個二維碼就是建立起手機和電腦的媒介（中介），抽象地來理解，我們掃描整個二維碼識別的程序中，二維碼就做了兩件事：

• “我” 是誰
• 如何證明 “我” 就是我

好了，那我們應該怎么理解這兩句話呢，

就拿我們掃描二維碼在電腦登錄微信這件事來舉例吧，

掃碼：

我們 “用手機掃描電腦的二維碼” 時，這個時候就是 “向電腦 (向系統) 說明 我是誰 ”，

掃描后，就會出現這個界面，系統已經識別到了我的微信號：

這一步就相當于 “我用手機告訴電腦系統 我是誰” 了，

但是現在手機微信和電腦微信還沒建立一個雙向的關系，現在手機告訴了電腦 “微信賬號”，但是還沒授權（認證），所以現在暫時無法登陸，

不理解 授權（認證）意思的朋友，可以把 授權（認證）理解為 “輸出密碼驗證”，也就是剛剛掃碼只是驗證了 “ 賬號 ”，還沒驗證 “ 密碼 ”，所以肯定還無法登陸（還無法建立連接），

現在就來到了第二步，“如何證明 我 就是 我”，也就是向系統證明我是誰，可以類比于 “輸入密碼” 的環節，此時電腦微信 “阻塞” 到這個視窗，在等待手機微信授權登陸：

若手機點擊 “登錄”，則相當于我們給了這個賬戶的密碼，賬號密碼都對了，那不自然就登錄成功了嗎，（注意這里只是類比，不是真的傳輸密碼！）

看到這里，小伙伴們對于二維碼的登錄認證的這個功能已經有了一定的理解了，

那小伙伴們又有疑問了，“我手機確認登錄的時候，是不是把我的密碼給傳過去了，那這樣我的密碼會不會在傳輸程序中被劫持了（害怕…）？”，這個問題問的好啊，接下來我們就針對這個問題再決議一波，跟大家一起深入理解一波，往下看，

3、二維碼驗證機制的原理決議

先回答一下上面的問題，我們需要知道，密碼是不會在客戶端被獲取的，密碼在網路中的傳播一般不可能是明文傳輸，所以在安全方面，是有保障的，

二維碼能夠掃碼登錄的原理，就是基于 token 機制，什么是 token 呢？這個概念暫且放一放，待會再來說，

我們現在先來想象一個場景，比如現在我們去某電商平臺買東西，我們購物的流程是 “打開平臺 -> 登錄賬號 -> 點擊商品 -> （加入購物車） -> 購買商品”，這個程序會跳轉到不同的頁面完成對應的功能服務，但是在系統實作層面來講，這里面一般會被拆分為多個微服務模塊，比如說登錄、購物車、購買頁…，一般都是作為不同的模塊 “去耦合 ” 來提供服務的，但是雖然在不同的模塊實作功能，但是這個操作流程 對于用戶來說是不可感知的，用戶只知道 “登錄 - 加購 - 購買 - 付款…”，所以這些不同模塊之間就需要建立起一個鏈接，將用戶資訊在不同模塊間 “共享”，那這個 “共享” 操作，我直接把用戶的資訊（包括密碼和其他敏感資訊）直接明文傳輸給另一個模塊可以嗎（比如現在有登錄模塊 A 與購買模塊 B，用戶登錄后，將 A 模塊就已經有了用戶資訊，A 模塊此時把用戶資訊明文傳輸給 B 模塊），這樣是有問題的，如果說有人在模塊間把你傳輸的資訊攔截掉了，資訊就會被竊取，這就不安全了，

所以現在怎么做的呢？現在使用的是 token 的機制，

token：

token 就是按照一定規則生成的 字串 ，字串可以包含用戶資訊（包括密碼等），

這里說的 “一定規則”，可以自定義，其實可以把它理解為一種加密演算法，只要加密演算法和解密演算法統一即可，舉個例子，我們可以使用 JWT 規則，（由 JWT 規則生成的字串包含三部分資訊：（1）jwt 頭資訊；（2）有效載荷，包含主體資訊（用戶資訊）；（3）簽名哈希（防偽標志），jwt 規則生成的 token 字串是一個很長的字串，字符之間通過. 分隔符分為三個子串）

我們從 A 模塊，跳轉到 B 模塊時，用戶的資訊就以 token 的形式攜帶過去，B 模塊決議這個 token 字串，就能獲取到用戶資訊（這里就涉及到一套 token 的決議規則了，篇幅原因，這里先暫時不講），其實就很像一套加密 / 解密的流程，

那會不會有人有這樣的疑惑呢，如果 token 被別人截取了怎么辦？ 用戶資訊不是照樣泄露了嗎？其實 token 只能屬于某個客戶端私有，其他人或者其他客戶端是用不了的，也就是我們在掃了 PC 端的二維碼后，手機端不會直接將 token 馬上傳輸給 PC 端，而是中間有經過一步系結階段，先將手機端與 PC 端兩者系結起來，再將用戶資訊生成這個 token 字串發送給 PC 端，然后 PC 端決議 token 后獲取到用戶信息，然后就能進行后續操作了，

這里的系結操作就是通過一個 uuid（全球唯一），

我們通過一個序列圖來了解整個程序：

注：關注公眾號 “啊澤Coding” ，后臺回復 “0501” 獲取上圖源檔案，

注意：

• 第 6 步的系結身份資訊不包括密碼等資訊，只是簡單的一些對外的資訊，比如頭像，昵稱等，
• 上圖中還有一些狀態資訊沒畫出來，比如 PC 端對二維碼的定期更新（二維碼有過期時間），如果 PC 端顯示的二維碼長時間未被掃描，則會出現如下情況：
  

這樣就完成了整個登錄的全流程，不知道堅持看到這里的你會不會有些啟發呢，

這個整個登錄驗證程序在客戶端和服務器間形成倍訓，可以有效杜絕木馬和病毒等危害，

4、深入理解二維碼在登錄的互動程序

看完前面的決議，已經對微信的掃碼登錄機制比較清晰了，下面為幫助小伙伴更好的理清里面一些細節，我們再進入深入理解下，

剛剛說了，PC 端與手機端是通過 一個全球唯一的 uuid 系結的，而且還有過期時間，怎么驗證這一說法呢，我們可以打開” 微信網頁版 “（https://wx.qq.com/），點開 F12查看

如果過了 30s 未掃碼，界面就會更新二維碼的資訊，并回傳錯誤碼408

408 錯誤碼代表 “請求超時”，

如果我們完成掃碼登錄，則頁面會系結到我們傳輸的用戶基本資訊（頭像、昵稱等），并顯示在頁面，同時回傳 201 狀態碼，表示請求成功并且服務器創建了新的資源，（此時二維碼已經和手機端的微信建立了系結關系了）

此時網頁正在等待用戶在手機確認登錄，如果用戶確認登錄，頁面就會回傳狀態碼 200，表示服務器已經成功處理了請求，

此時用戶就登錄操作完成，接著就會跳轉到網頁版微信頁面，包含用戶資訊的 token 字串也成功傳輸到了網頁版的微信，網頁版微信也就完成了整個登錄程序了，

5、總結感悟

二維碼在生活中的應用非常廣泛，上面所講的二維碼的登錄驗證場景只是我們常接觸的一類應用場景，還有其他很多的場景，比如掃碼付款，掃了這個付款碼在付款程序會不會造成一些個人敏感資訊的泄漏呢，這也是我們可以深入探究的一個問題，安全問題在現在社會越來越得到重視，但是安全漏洞事件還總是頻頻發生，這也是我們未來需要不斷進步的一個方面之一，安全問題有保障了，用戶在使用產品的程序中才更有幸福感，

如果這篇文章有幫助到你，別忘了關注點贊在看一鍵三連哦！
我是啊澤，一枚在 鵝廠 搬磚的實習生，關注我，不斷為你分享各種干貨，我的經歷經驗，或許可以給你帶來意想不到的幫助，更多干貨內容請關注本公眾號：“啊澤Coding”，掃描下方二維碼關注我吧！