当前位置:手机游戏 > 手游资讯 > 新手问答 > 手机扫码登录(IM要做手机扫码登录?先看看微信的扫码登录功能技术原理)

手机扫码登录(IM要做手机扫码登录?先看看微信的扫码登录功能技术原理)

作者:佚名 来源:哪吒游戏网 2020-03-29 06:02:42

手机扫码登录(IM要做手机扫码登录?先看看微信的扫码登录功能技术原理),哪吒游戏网给大家带来详细的手机扫码登录(IM要做手机扫码登录?先看看微信的扫码登录功能技术原理)介绍,大家可以阅读一下,希望这篇手机扫码登录(IM要做手机扫码登录?先看看微信的扫码登录功能技术原理)可以给你带来参考价值。

如上图所示,操作过程如下:

1)第一步:电脑上打开PC端(出现2维码);

2)第二步:拿出手机,扫码2维码;

3)第三步:PC端显示扫码成功;

4)第四步:手机端“确认”登录;

5)第五步:成功登陆PC端。

上述实际操作过程,用户体验相当顺滑,也难怪刚出来那会,能惊艳到很多人。

那么,对于上述操作过程的技术实现原理是什么样的呢?

想起来之前听过的前后端的概念,知道账户的数据信息一般都是放在服务器上手机扫码登录,前端负责向后端 “讨要数据” 并显示,后端则是对前端的 “讨要” 做出反应。

这样一来,猜测微信登录的过程可能就是:

1)网页前端向微信后台请求账号数据;

2)微信后台接受网页前端的请求,然后将他的账号数据返回;

3)网页前端接收到了数据后,在浏览器里进行显示。

于是,手脚麻利的画了个示意图:

当我正准备沾沾自喜的时候,突然看到桌面上的手机。咦,如果就只是这么个过程,那手机的作用是啥。于是才开始意识到,问题没这么简单。

好吧,我们城要再深入一点探秘微信扫码登录的过程。

为了更深入的分析整个过程,我们可以去看看微信网页版,地址是:wx.qq.com/。

login.weixin.qq.com/l/gfF89u2sAw== (二维码自动识别)

笔者看着网页中硕大的二维码陷入了沉思——这个二维码跟手机账号有没有什么对应关系呢?如果没有,那它又是怎么生成的呢?

思考间,于是打开了浏览器的开发者工具。

在网络监控一览找到了这幅二维码,与之对应的链接是:

login.weixin.qq.com/qrcode/gaO8cOQweA==

如下图所示:

login.weixin.qq.com/l/gaO8cOQweA== (二维码自动识别)

然后习惯性地,尝试多次刷新页面,发现二维码不断发生变化,链接也不断更改:

login.weixin.qq.com/qrcode/AencxgKNFQ==

login.weixin.qq.com/qrcode/YcD7f_DxvA==

login.weixin.qq.com/qrcode/QblN8lCn2g==

似乎发现了些东西:二维码不断变化,其对应的链接尾的代码也相应变化,并且是随机性的变化。

这也就是说,每一次页面刷新都会随机且唯一地生成一个二维码。这或许可以与手机登录的过程联系起来。

似乎开始明白了,于是再次拿起手机,熟练的使用微信扫描了此时的二维码。

“叮” 的一声,网页上的二维码顿时变成了我帅气的微信头像。这个时候,我才突然意识到,是扫码之后网页才与他的微信账号建立起了联系。

如下图所示:

也就是说:

1)没有扫码之前,页面上的二维码只是随机生成的且与用户无关的码;

2)而当用户扫码之后,二维码便与用户帐号绑定在了一起。

原来手机扫码的用处是这样!

此时注意到,手机微信上弹出了『微信登录确认』的提醒。这个时候谨慎地点击了下方的登录按钮。

如下图所示:

随着平滑的动画一闪而过,网页上已经显示出了我的微信账号信息,显示微信账号已经登录。再一次体验这个过程,心中开始思索手机微信在登录过程中所起到的具体作用。

首先需要明白几个过程:

1)进入网页登陆界面,随机生成一个二维码;

2)通过手机扫描二维码,将微信账号与二维码绑定;

3)在手机微信点击登录按钮,授权网页登录微信账号;

4)网页获得的账号信息,将数据显示。

回顾上述过程,结合最开始的原理猜测,开始思索整个环节,是哪里理解的不对。。。

1)网页的二维码到底从何而来?

2)是谁向微信后台请求了账号数据?

实际上:不同的网站可能都需要通过微信后台进行数据的获取,那么每一个网站必然也存在它的后台来给微信后台发送请求。

这样一来,整个过程就能解释得通了:

1)网站页面刷新手机扫码登录,网页后台向微信后台请求授权登录;

2)微信后台返回登录所需二维码;

3)用户通过手机扫描二维码,并在手机上授权登录后,微信后台告知网页后台已授权;

4)网页后台向微信后台请求微信账号数据;

5)微信后台返回账号数据;

6)网页后台接收数据并通过浏览器显示;

正如上节所述,想清楚了整个过程后,我们应该对整个过程的技术实现进行进一步的探究。

在微信开发官方文档中,我找到了第三方网站应用微信登录开发指南:

developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

我将整个过程梳理了一遍,画出了这个图:

如上图所示,整个技术实现如下。

(1)二维码的获得:

(2)微信客户端授权登录:

(3)网站后台请求数据:

在上述过程中,有几个参数值得解释一下(来源官方文档):

整个过程从网站后台向微信开发平台请求授权登录开始,最终目的是为了获得access_token:

access_token:用户授权第三方应用发起接口调用的凭证

在获得了access_token后就可以解析用户的一些基本信息,包括头像、用户名、性别、城市等。这样一来,整个微信扫描登录的过程就完成了。

研究到这,终于大体上对微信扫码登录的整个过程有了清晰的认知。看起来似乎也不难,开发者只需要在网页后端做好对微信公众平台的接口调用即可实现扫码登录。

伸了伸懒腰,忽然又想到在整个过程中还需要考虑超时的问题。比如二维码超时未扫描、二维码扫描后超时授权、获得access_token后超时等等问题。

我发现一个简单的功能实现起来还是需要考虑许多细节,真的是纸上得来终觉浅呀。于是我下定决心,下次得少上网冲浪了,花点时间搭个服务器先把微信扫码登录过程实现看看。

不过,还得先去在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret才行。

想了想,还是让我先趟一会儿吧。。。

[1] IM开发热门文章:

《新手入门一篇就够:从零开发移动端IM》

《移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”》

《移动端IM开发者必读(二):史上最全移动弱网络优化方法总结》

《从客户端的角度来谈谈移动端IM的消息可靠性和送达机制》

《现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障》

总结:以上内容就是针对手机扫码登录(IM要做手机扫码登录?先看看微信的扫码登录功能技术原理)详细阐释,如果您觉得有更好的建议可以提供给哪吒游戏网小编,手机扫码登录(IM要做手机扫码登录?先看看微信的扫码登录功能技术原理)部分内容转载自互联网,有帮助可以收藏一下。



上一篇: 英雄联盟如何转区(lol怎么转区 lol转区方法介绍)

下一篇: 手机扫码登录(淘宝网手机扫描电脑二维码扫码登录怎么弄?淘宝扫码登陆图文教程[多图])

本文标签: 手机扫码登录 手机淘宝怎么扫码登录 手机淘宝扫码登录不了
猜你喜欢