wechat QRCode login 機制流程

QRCode login 流程大剖析,我的瀏覽器怎麼會自己跳

最近開始使用些大陸的服務,發現大部分的大型網站例如當當網,Amazon China 都有提供微信登入,流程上十分方便,只需要透過手機掃描 QRCode 之後,會同時加入一個聯絡人(Service provider bot) ,立即提供一個連結,可以在 Wechat 內進行點擊,點擊後,會很神奇的發現 Browser 會直接進入到登入頁面中。

這也引起我的好奇心,開始想瞭解底層到底怎麼進行的,也因此找了一些文章及資料。

原本以為這個服務會是透過 Web API 或者透過 http2 的方式進行 server push 方式進行,但是沒想到 IE 老舊版本也可以同時支援,讓我覺得深深疑惑,因此開始了追流程之旅。

wechat login flow

wechat 在流程上,會將資訊隱含在 QRCode 上面,這些資訊並不是太神秘的資料,重點在於 uid 本身,似乎就是個唯一識別碼,當使用者透過這個連結進入後,此 uid 便會失效,似乎一段時間沒有連結也會失效。

Browser 到手機端流程

在 Browser wechat QRCode 掃描畫面,打開 debug tool 會發現其實 wechat 會偷偷開一個 long-pulling 採用最舊式的方式不斷的進行 pulling 機制。(這個時候更確定,當使用者掃描 QRcode 之後,電腦還是要停留在同一個 QRCode 掃描頁面,才有辦法完成認證流程)

這邊也進行測試,當我們在 QRCode 頁面,讓手機掃描完之後,回到電腦,切換到其他頁面,就會發現掃描完的 QRCODE 手機連結頁面會沒有任何作用,因為並沒有與瀏覽器端連結,瀏覽器就不會有任何反映。(一定要停留在 QRCode 頁面上)

如此一來就發現,其實 Wechat QRCode 認證並沒有大家所想的這麼複雜,大致流程入下。

QRCode login flow

  • 瀏覽器,透過 js 產生 QRCode , QRCode 產生同時,會把隱含資料寫入,並且與 uid 進行掛載
  • 瀏覽器,透過 js 與 server 進行 long-pulling connection.
  • 手機掃描 QRCode ,取得 uid 登入連結
  • 手機點擊掃描後的 link, 經由伺服器判斷,進行 user event trigger.
  • 瀏覽器收到 event trigger ,進行 callback 動作(此時 callback 可以讓客戶自訂,重新導向頁面,跳出 alert, 或者將使用者資訊寫入到 cookie 中等)

透過以上流程就會成 wechat QRCode 登入流程,基本上還蠻簡單的。

Open source for QRCode login flow

這邊為了證明整體流程合情合理,因此透過 express, socket.io 製作了一個簡易的 QRCode login reproduce 流程,讓大家可以瞭解底層的機制如何運作。

Souce code, 原始碼如下,如果想要直接看結果,歡迎直接到 live demo 頁面

當然你也可以透過 clone 將資料整個複製下來,自己在本機環境中進行測試,只要安裝 node 就可以快速安裝完成,歡迎試試看。

後記

仔細找了一下流程之後,就會發現實際實做比想像還要簡單,只是很難想像目前 wechat 的使用流量,這樣要多少伺服器才有辦法支持,實在是一個龐大的系統,同時也實際之撐了許多不同的服務之間的串接。

真的可以發現 wechat 的可怕之處,已經將 QRCode 發揮到一個淋漓盡致,台灣目前還不太習慣 QRCode 的掃描,不過隨著大陸服務逐漸來台,普及化整體流程後,相信從電商,網站,登入流程,服務都會有許多 QRCode 的變化流程,這樣的架構可以改變大家原本使用習慣,讓人們更願意使用 QRCode 。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn