? ? ? ?他山之石咐容，可以攻玉揉阎，你對(duì)產(chǎn)品和架構(gòu)思想都是來自于生活庄撮，也來自你對(duì)行業(yè)內(nèi)別的產(chǎn)品和架構(gòu)的學(xué)習(xí)，然后才有了創(chuàng)新毙籽。今天想從以下幾個(gè)方面去總結(jié)：
- 我們是否了解二維碼洞斯？
- 二維碼是什么？
- 二維碼實(shí)戰(zhàn)
- 微信網(wǎng)頁版登錄原理
我們是否了解二維碼坑赡？
? ? ? ?我們現(xiàn)在每天都在用二維碼烙如，比如微信支付，支付寶支付毅否，掃一掃加好友等亚铁，還有推廣等。這些沒有什么好說的螟加，但是我們平常有沒有見過這樣的事情徘溢，有些公司推廣了他們研發(fā)的產(chǎn)品，使用了IOS和安卓APP做UI交互的捆探，但是推廣APP時(shí)用了兩個(gè)二維碼然爆，一個(gè)是IOS APP的二維碼，一個(gè)是安卓APP的二維碼徐许，為什么會(huì)有這么另類的推廣施蜜，可否集成到一個(gè)二維碼呢？與之相反的是我們有見過一個(gè)二維碼沒雌隅，用安卓手機(jī)翻默、IOS手機(jī)、微信和支付寶掃描后得到的結(jié)果不一樣恰起，這些是怎么回事呢修械？
? ? ? ?還有我們使用微信網(wǎng)頁版去登錄時(shí)(wx.qq.com)，我們使用手機(jī)已經(jīng)登錄的微信去掃一掃检盼，就可以登錄成功了肯污，這是怎么回事？因?yàn)槲覀兤匠６际禽斎胭~號(hào)和二維碼之后登錄的吨枉，現(xiàn)在網(wǎng)頁版上是從哪里獲取到賬號(hào)和密碼的蹦渣，手機(jī)掃描二維碼后手機(jī)發(fā)送給網(wǎng)頁版的嗎？
二維碼是什么貌亭？
? ? ? ?我們?nèi)コ匈I東西時(shí)柬唯，商品上都會(huì)有一個(gè)條形碼，收銀員一掃描就知道了這個(gè)商品的編號(hào)和價(jià)格等圃庭，其實(shí)條形碼就是對(duì)物品的一個(gè)編號(hào)锄奢，有時(shí)候收銀員掃描不出條形碼失晴，還可以輸入物品上的數(shù)字，這就是一個(gè)明證拘央。那二維碼其實(shí)也是存儲(chǔ)了一些信息涂屁，只不過比起條形碼存的內(nèi)容更多而已，關(guān)于二維碼是如何編碼的灰伟，可以參考《二維碼的生成細(xì)節(jié)和原理》拆又，二維碼比起條形碼有以下優(yōu)勢(shì)：
- 存儲(chǔ)內(nèi)容更多；
- 二維碼圖上有三個(gè)定位矩形栏账，保證了我們可以從任意角度甚至是反面都可以識(shí)別二維碼遏乔；
- 二維碼增加了糾錯(cuò)機(jī)制，也就是說編碼了一些冗余信息发笔，這樣即使二維碼圖有破損和殘缺都可以識(shí)別出。
二維碼實(shí)戰(zhàn)
? ? ? ?比較著名的二維碼庫主要有zxing凉翻、qrcode和zbar了讨，zxing支持java、php制轰、js前计、python等語言的生成和識(shí)別，但是對(duì)c++僅支持識(shí)別不包含生成(詳見zxing-cpp)垃杖；qrcode支持c男杈、php、python调俘，但是對(duì)于c語言來講僅支持生成伶棒。具體實(shí)現(xiàn)可以參考我的https://github.com/zhiyong0804/qrcode，這里就不細(xì)講了彩库，從原理上肤无，我們還必須了解圖像識(shí)別等方面的算法，比如opencv骇钦。
微信網(wǎng)頁版登錄原理
? ? ? ?我們使用比較高頻的社交軟件就是QQ和微信了宛渐，當(dāng)然現(xiàn)在還有，其余的人可能是使用陌陌啊眯搭，估計(jì)這部分人是因?yàn)樾枨蟊容^大窥翩，或者上癮，使用微信或者QQ鳞仙，我們現(xiàn)在有沒有發(fā)現(xiàn)都可以使用二維碼進(jìn)行掃描登錄寇蚊，免去了輸入賬號(hào)和密碼的過程，但是通過掃描就能登錄繁扎，那他們的賬號(hào)信息是如何傳遞給客戶端（PC客戶端幔荒、網(wǎng)頁客戶端）的呢糊闽？而且我們仔細(xì)去分析，不管是誰去掃描都能登錄成功爹梁，下面我們就以網(wǎng)頁版微信（wx.qq.com）為例來分析:
? ? ? ?1. 當(dāng)我們?cè)跒g覽器輸入wx.qq.com后右犹，網(wǎng)頁前端向服務(wù)器發(fā)起了http請(qǐng)求，微信服務(wù)器返回了一個(gè)uuid一個(gè)字段姚垃，然后網(wǎng)頁前端發(fā)起http登錄請(qǐng)求念链，如下所示：
https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&uuid=IZEc0ZwH3w==&tip=0&r=-2022997859&_=1518146428000
同時(shí)前端把這個(gè)uuid信息編碼到了二維碼圖里，如果我們用在線掃碼識(shí)別工具可以看到它編碼的內(nèi)容是https://login.weixin.qq.com/l/IZEc0ZwH3w==积糯，此時(shí)前端發(fā)起的這個(gè)http請(qǐng)求是一個(gè)http的長連接請(qǐng)求（其實(shí)這個(gè)http長連接叫法有點(diǎn)不太準(zhǔn)掂墓，比較直觀的是服務(wù)端hold on了這個(gè)請(qǐng)求，一直沒有回應(yīng)看成，如果前端沒有收到這個(gè)回應(yīng)君编，大約每過25秒有會(huì)請(qǐng)求一次）。
? ? ? ?2. 我們使用已經(jīng)登錄微信賬號(hào)的掃描該二維碼川慌，就會(huì)獲取到uuid吃嘿，然后手機(jī)終端發(fā)起http請(qǐng)求，該請(qǐng)求里包含了uuid和token（用戶登錄授信令牌梦重，對(duì)應(yīng)了用戶賬戶信息）兑燥。
? ? ? ?3. 后臺(tái)服務(wù)收到了手機(jī)客戶端的http請(qǐng)求后，依據(jù)token信息琴拧，知道了用戶賬戶信息降瞳，于是再次生成一個(gè)token_b，并且通過uuid找到了是網(wǎng)頁前端的http的會(huì)話蚓胸，也就是我們說的http長連接挣饥，然后給前端http請(qǐng)求回復(fù)response（包含了token_b）。
? ? ? ?4. 前端拿到token_b（授信令牌）就可以與微信后臺(tái)服務(wù)間進(jìn)行通信了沛膳，包含獲取用戶信息亮靴，此時(shí)我們?cè)谇岸丝梢钥吹斤@示了頭像，同時(shí)也請(qǐng)求了很多的圖片和數(shù)據(jù)資源：
? ? ? ?5. 其實(shí)在第三步時(shí)微信服務(wù)器在回復(fù)手機(jī)客戶端的請(qǐng)求后于置，還會(huì)等待手機(jī)客戶端的確認(rèn)“登錄”信息茧吊，如果確認(rèn)了，前端才會(huì)進(jìn)行顯示八毯。
? ? ? ?微信的二維碼登錄是不是很酷按曛丁？反正我覺得從技術(shù)和產(chǎn)品上都比較庫话速，當(dāng)然現(xiàn)在其他的產(chǎn)品都已經(jīng)實(shí)現(xiàn)了這樣的功能讶踪，但是你現(xiàn)在清楚了沒？我相信你已經(jīng)明白了泊交。如果對(duì)于uuid和token還不是很明白可以看我的另一篇博客《安全開放性云平臺(tái)架構(gòu)與設(shè)計(jì)》乳讥。
? ? ? ?
