IM要作手机扫码登陆？先看看微信的扫码登陆功能技术原理
本文原文由做者Amazing10原创发布于公众号业余码农，收录时有改动，感谢原做者的技术分享。php
一、引言
某天中午，吃完午餐，摊在本身的躺椅上，想趁吃饱喝足的午后时间静静享受独自的静谧。html
干点什么好呢？因而单手操做鼠标打开了一个陌生而隐秘的网站。正开着某个视频起劲。。。前端
忽然浏览器弹出了一个提示：算法
请使用微信扫码登陆帐号，继续观看数据库
这...小程序
可是因为强烈的好奇驱使，迫于无奈，只好选择登陆再继续观看。因而熟练的掏出手机，打开微信扫一扫对准上面的二维码，只听见 “叮” 的一声，网页上的二维码放佛活过来了，直接刷新出了本尊的微信头像，同时手机上也弹出登陆的提醒。后端
心中略微惊叹，但没来得及多想。忙点击手机界面中登陆按钮。此时网页刷新，恢复了正常，表示能够继续观看。微信小程序
上网冲浪的时间老是过得很快，很快就有些疲倦。因而闭上眼睛，脑海中却浮现出了刚刚微信扫描二维码，而后登陆网页的场景，心中再次惊叹，并开始思考起其中的原理来。。。跨域
言归正传，本文将以轻松活泼的语言形式，为你分析和讲解微信手机扫码登陆的技术原理，但愿在你的IM中开发此功能时有所启发。浏览器
推荐阅读：另外一篇同类文章《IM的扫码登陆功能如何实现？一文搞懂主流的扫码登陆技术原理》也值得一读。
学习交流：
- 即时通信/推送技术开发交流5群：215477170[推荐]
- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》
（本文同步发布于：http://www.52im.net/thread-2941-1-1.html）
二、IM开发干货系列文章
本文是系列文章中的第23篇，总目录以下：
《IM消息送达保证机制实现(一)：保证在线实时消息的可靠投递》
《一种Android端IM智能心跳算法的设计与实现探讨（含样例代码）》
《IM开发基础知识补课(一)：正确理解前置HTTP SSO单点登陆接口的原理》
《IM开发基础知识补课(二)：如何设计大量图片文件的服务端存储架构？》
《IM开发基础知识补课(三)：快速理解服务端数据库读写分离原理及实践建议》
《IM开发基础知识补课(四)：正确理解HTTP短链接中的Cookie、Session和Token》
《IM群聊消息到底是存1份(即扩散读)仍是存多份(即扩散写)？》
《IM开发基础知识补课(五)：通俗易懂，正确理解并用好MQ消息队列》
《IM开发基础知识补课(六)：数据库用NoSQL仍是SQL？读这篇就够了！》
《IM里“附近的人”功能实现原理是什么？如何高效率地实现它？》
《IM开发基础知识补课(七)：主流移动端帐号登陆方式的原理及设计思路》
《IM开发基础知识补课(八)：史上最通俗，完全搞懂字符乱码问题的本质》
三、原理解析
微信扫码登陆如今在平常生活中已是常见不能再常见的场景之一了，可是要知道微信首次公开这项功能时，倒是惊艳众人。移动端与PC端以这样一种巧妙的方式连接在了一块儿，的确是让人惊叹。
如下是一个典型的微信扫码登陆全过程：
原本想在Web版微信上截图，但扫码登录后出现了下面的提示（貌似不少人都碰到过）：
好吧，这很微信，反正就是不想让你好好用，用户爱咋咋滴。。。
如上图所示，操做过程以下：
1）第一步：电脑上打开PC端（出现2维码）；
2）第二步：拿出手机，扫码2维码；
3）第三步：PC端显示扫码成功；
4）第四步：手机端“确认”登陆；
5）第五步：成功登录PC端。
上述实际操做过程，用户体验至关顺滑，也难怪刚出来那会，能惊艳到不少人。
那么，对于上述操做过程的技术实现原理是什么样的呢？
想起来以前听过的先后端的概念，知道帐户的数据信息通常都是放在服务器上，前端负责向后端 “讨要数据” 并显示，后端则是对前端的 “讨要” 作出反应。
这样一来，猜想微信登陆的过程可能就是：
1）网页前端向微信后台请求帐号数据；
2）微信后台接受网页前端的请求，而后将他的帐号数据返回；
3）网页前端接收到了数据后，在浏览器里进行显示。
因而，手脚麻利的画了个示意图：
当我正准备沾沾自喜的时候，忽然看到桌面上的手机。咦，若是就只是这么个过程，那手机的做用是啥。因而才开始意识到，问题没这么简单。
好吧，咱们城要再深刻一点探秘微信扫码登陆的过程。
四、过程分析
为了更深刻的分析整个过程，咱们能够去看看微信网页版，地址是：https://wx.qq.com/。
笔者看着网页中硕大的二维码陷入了沉思——这个二维码跟手机帐号有没有什么对应关系呢？若是没有，那它又是怎么生成的呢？
思考间，因而打开了浏览器的开发者工具。
在网络监控一览找到了这幅二维码，与之对应的连接是：
https://login.weixin.qq.com/qrcode/gaO8cOQweA==
以下图所示：
而后习惯性地，尝试屡次刷新页面，发现二维码不断发生变化，连接也不断更改：
https://login.weixin.qq.com/qrcode/AencxgKNFQ==
https://login.weixin.qq.com/qrcode/YcD7f_DxvA==
https://login.weixin.qq.com/qrcode/QblN8lCn2g==
彷佛发现了些东西：二维码不断变化，其对应的连接尾的代码也相应变化，而且是随机性的变化。
这也就是说，每一次页面刷新都会随机且惟一地生成一个二维码。这或许能够与手机登陆的过程联系起来。
彷佛开始明白了，因而再次拿起手机，熟练的使用微信扫描了此时的二维码。
“叮” 的一声，网页上的二维码顿时变成了我帅气的微信头像。这个时候，我才忽然意识到，是扫码以后网页才与他的微信帐号创建起了联系。
以下图所示：
也就是说：
1）没有扫码以前，页面上的二维码只是随机生成的且与用户无关的码；
2）而当用户扫码以后，二维码便与用户账号绑定在了一块儿。
原来手机扫码的用处是这样！
此时注意到，手机微信上弹出了『微信登陆确认』的提醒。这个时候谨慎地点击了下方的登陆按钮。
以下图所示：
随着平滑的动画一闪而过，网页上已经显示出了个人微信帐号信息，显示微信帐号已经登陆。再一次体验这个过程，心中开始思索手机微信在登陆过程当中所起到的具体做用。
首先须要明白几个过程：
1）进入网页登录界面，随机生成一个二维码；
2）经过手机扫描二维码，将微信帐号与二维码绑定；
3）在手机微信点击登陆按钮，受权网页登陆微信帐号；
4）网页得到的帐号信息，将数据显示。
五、原理解释
回顾上述过程，结合最开始的原理猜想，开始思索整个环节，是哪里理解的不对。。。
1）网页的二维码到底从何而来？
2）是谁向微信后台请求了帐号数据？
实际上：不一样的网站可能都须要经过微信后台进行数据的获取，那么每个网站必然也存在它的后台来给微信后台发送请求。
这样一来，整个过程就能解释得通了：
1）网站页面刷新，网页后台向微信后台请求受权登陆；
2）微信后台返回登陆所需二维码；
3）用户经过手机扫描二维码，并在手机上受权登陆后，微信后台告知网页后台已受权；
4）网页后台向微信后台请求微信帐号数据；
5）微信后台返回帐号数据；
6）网页后台接收数据并经过浏览器显示；
六、技术剖析
正如上节所述，想清楚了整个过程后，咱们应该对整个过程的技术实现进行进一步的探究。
在微信开发官方文档中，我找到了第三方网站应用微信登陆开发指南：
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
我将整个过程梳理了一遍，画出了这个图：
如上图所示，整个技术实现以下。
（1）二维码的得到：
- 1）用户打开网站后，网站后台根据微信OAuth2.0协议向微信开发平台请求受权登陆，并传递事先在微信开发平台中审核经过的AppID和AppSecrect等参数；
- 2）微信开发平台对AppID等参数进行验证，并向网站后台返回二维码；
- 3）网站后台将二维码传送至网站前端进行显示。
（2）微信客户端受权登陆：
- 1）用户使用微信客户端扫描二维码并受权登陆；
- 2）微信客户端将二维码特定的uid与微信帐号绑定，传送至微信开发平台；
- 3）微信开发平台验证绑定数据，调用网站后台的回调接口，发送受权临时票据code；
（3）网站后台请求数据：
- 1）网站后台接收到code，代表微信开发平台赞成数据请求；
- 2）网站后台根据code参数，再加上AppID和AppSecret请求微信开发平台换取access_token；
- 3）微信开发平台验证参数，并返回access_token；
- 4）网站后台收到access_token后便可进行参数分析得到用户帐号数据。
在上述过程当中，有几个参数值得解释一下（来源官方文档）：
- 1）AppID：应用惟一标识，在微信开放平台提交应用审核经过后得到；
- 2）AppSecret：应用密钥，在微信开放平台提交应用审核经过后得到；
- 3）code：受权临时票据，第三方经过code进行获取access_token的时候须要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token即失效。code的临时性和一次性保障了微信受权登陆的安全性。
整个过程从网站后台向微信开发平台请求受权登陆开始，最终目的是为了得到access_token：
access_token：用户受权第三方应用发起接口调用的凭证
在得到了access_token后就能够解析用户的一些基本信息，包括头像、用户名、性别、城市等。这样一来，整个微信扫描登陆的过程就完成了。
七、写在最后
研究到这，终于大致上对微信扫码登陆的整个过程有了清晰的认知。看起来彷佛也不难，开发者只须要在网页后端作好对微信公众平台的接口调用便可实现扫码登陆。
伸了伸懒腰，突然又想到在整个过程当中还须要考虑超时的问题。好比二维码超时未扫描、二维码扫描后超时受权、得到access_token后超时等等问题。
我发现一个简单的功能实现起来仍是须要考虑许多细节，真的是纸上得来终觉浅呀。因而我下定决心，下次得少上网冲浪了，花点时间搭个服务器先把微信扫码登陆过程实现看看。
不过，还得先去在微信开放平台注册开发者账号，并拥有一个已审核经过的网站应用，并得到相应的AppID和AppSecret才行。
想了想，仍是让我先趟一下子吧。。。
附录：更多IM开发相关文章
[1] IM开发热门文章：
《移动端IM开发者必读(一)：通俗易懂，理解移动网络的“弱”和“慢”》
《移动端IM开发者必读(二)：史上最全移动弱网络优化方法总结》
《现代移动端网络短链接的优化手段总结：请求速度、弱网适应、安全保障》
《小白必读：闲话HTTP短链接中的Session和Token》
《开源IM工程“蘑菇街TeamTalk”的现状：一场虎头蛇尾的开源秀》
《QQ音乐团队分享：Android中的图片压缩技术详解（上篇）》
《QQ音乐团队分享：Android中的图片压缩技术详解（下篇）》
《腾讯原创分享(一)：如何大幅提高移动网络下手机QQ的图片传输速度和成功率》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）》
《腾讯原创分享(三)：如何大幅压缩移动网络下APP的流量消耗（下篇）》
《如约而至：微信自用的移动端IM网络层跨平台组件库Mars已正式开源》
《基于社交网络的Yelp是如何实现海量用户图片的无损压缩的？》
《腾讯技术分享：腾讯是如何大幅下降带宽和网络流量的(图片压缩篇)》
《腾讯技术分享：腾讯是如何大幅下降带宽和网络流量的(音视频技术篇)》
《字符编码那点事：快速理解ASCII、Unicode、GBK和UTF-8》
《子弹短信光鲜的背后：网易云信首席架构师分享亿级IM平台的技术实践》
《微信技术分享：微信的海量IM聊天消息序列号生成实践（算法原理篇）》
《自已开发IM有那么难吗？手把手教你自撸一个Andriod版简易IM (有源码)》
《适合新手：从零开发一个IM服务端（基于Netty，有完整源码）》
>> 更多同类文章 ……
[2] 有关WEB端即时通信开发：
《Web端即时通信技术盘点：短轮询、Comet、Websocket、SSE》
《Comet技术详解：基于HTTP长链接的Web端实时通讯技术》
《WebSocket详解（一）：初步认识WebSocket技术》
《WebSocket详解（二）：技术原理、代码演示和应用案例》
《WebSocket详解（三）：深刻WebSocket通讯协议细节》
《WebSocket详解（四）：刨根问底HTTP与WebSocket的关系(上篇)》
《WebSocket详解（五）：刨根问底HTTP与WebSocket的关系(下篇)》
《WebSocket详解（六）：刨根问底WebSocket与Socket的关系》
《LinkedIn的Web端即时通信实践：实现单机几十万条长链接》
《Web端即时通信技术的发展与WebSocket、Socket.io的技术实践》
《Web端即时通信安全：跨站点WebSocket劫持漏洞详解(含示例代码)》
《开源框架Pomelo实践：搭建Web端高性能分布式IM聊天服务器》
《详解Web端通讯方式的演进：从Ajax、JSONP 到 SSE、Websocket》
《MobileIMSDK-Web的网络层框架为什么使用的是Socket.io而不是Netty？》
《理论联系实际：从零理解WebSocket的通讯原理、协议格式、安全性》
《微信小程序中如何使用WebSocket实现长链接(含完整源码)》
《八问WebSocket协议：为你快速解答WebSocket热门疑问》
《快速了解Electron：新一代基于Web的跨平台桌面技术》
>> 更多同类文章 ……
（本文同步发布于：http://www.52im.net/thread-2941-1-1.html）
- 1. IM要作手机扫码登陆？先看看微信的扫码登陆功能技术原理
- 2. IM的扫码登陆功能如何实现？一文搞懂主流的扫码登陆技术原理
- 3. 微信扫码登陆功能实现
- 4. 浅析微信扫码登陆原理
- 5. 扫码登陆技术原理
- 6. 微信扫码登陆
- 7. 微信扫码登陆_JAVA
- 8. WinForm微信扫码登陆
- 9. JAVA微信扫码登陆
- 10. thinkcmf5 微信扫码登陆
- 更多相关文章...
- • MyBatis的工作原理 - MyBatis教程
- • SVN 查看历史信息 - SVN 教程
- • ☆技术问答集锦（13）Java Instrument原理
- • 漫谈MySQL的锁机制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解决方法
- 2. Qt5.7以上调用虚拟键盘(支持中文)，以及源码修改(可拖动，水平缩放)
- 3. 软件测试面试- 购物车功能测试用例设计
- 4. ElasticSearch（概念篇）：你知道的, 为了搜索…
- 5. redux理解
- 6. gitee创建第一个项目
- 7. 支持向量机之硬间隔（一步步推导，通俗易懂）
- 8. Mysql 异步复制延迟的原因及解决方案
- 9. 如何在运行SEPM配置向导时将不可认的复杂数据库密码改为简单密码
- 10. windows系统下tftp服务器使用
- 1. IM要作手机扫码登陆？先看看微信的扫码登陆功能技术原理
- 2. IM的扫码登陆功能如何实现？一文搞懂主流的扫码登陆技术原理
- 3. 微信扫码登陆功能实现
- 4. 浅析微信扫码登陆原理
- 5. 扫码登陆技术原理
- 6. 微信扫码登陆
- 7. 微信扫码登陆_JAVA
- 8. WinForm微信扫码登陆
- 9. JAVA微信扫码登陆
- 10. thinkcmf5 微信扫码登陆