(转)微信扫码登录网页实现原理

扫码登录操作过程

  • 浏览器输入:https://wx.qq.com/?lang=zh_CN
  • 手机登录微信,利用“扫一扫”功能扫描网页上的二维码
  • 手机扫描成功后,提示“登录网页版微信”;网页上显示“成功扫描 请在手机点击确认以登录”
  • 手机端点击“登录网页版微信”,网页跳转到用户的微信操作界面

整个扫码登录的操作过程还是挺简单的,而且交互地实时性比较好,如果网络不是非常阻塞,整个过程还是非常快的。

扫码登录原理

扫码登录大概的思路是:微信手机客户端从网页二维码里面得到一些信息,然后发送给网页微信的服务器,网页服务器验证信息并响应。下面,我们借助火狐浏览器提供的Firebug工具看看,到底是怎么一回事儿吧!

1.每次打开微信网页版的时候,都会生成一个含有唯一uid的二维码,而且每次刷新后都会改变。这样可以保证一个uid只可以绑定一个账号和密码,确定登录用户的唯一性。可以通过手机上的UC浏览器提供的扫码功能查看二维码里面的信息,但并不会自动打开该地址。我刷新三次,扫描结果如下,其中最后面那串数字就是uid

1) https://login.weixin.qq.com/l/48e24d66bdbc4f
2) https://login.weixin.qq.com/l/0787fb4fa7ad4c
3) https://login.weixin.qq.com/l/92781a4a7f1c47

通过查看网页源码,这个页面在加载完毕时,已经把很多登录后才需要的相关资源都预先加载进来了,所以登录用户得到确认后展示用户信息的速度很快。

2.除了返回唯一的uid,实际上打开这个页面的时候,浏览器跟服务器还创建了一个长连接,请求uid的扫描记录。如果没有,在特定时长后(目前是27秒左右)会接到状态码408(请求超时),表示应该继续下一次请求;如果接到状态码201(服务器创建新资源成功),表示客户端扫描了该二维码。

请求超时:返回408

扫码成功:返回201

长轮询代码结构:

 1       function _poll(_asUUID) {
 2         // ....
 3         $.ajax({
 4           type: "GET",
 5           url: "https://login." + _sBaseHost + "/cgi-bin/mmwebwx-bin/login?uuid=" + _asUUID + "&tip=" + show_tip,
 6           dataType: "script",
 7           cache: false,
 8           timeout: _nAjaxTimeout,
 9           success: function(data, textStatus, jqXHR) {
10             switch (_aoWin.code) {
11             case 200:
12               // ....
13               break;
14             case 201:
15               // ....
16               break;
17             case 408:
18               // ....
19               break;
20             case 400:
21             case 500:
22               // ....
23               break;
24             }
25           },
26           error: function(jqXHR, textStatus, errorThrown) {
27               // ....
28           }
29         });
30       }

3.当用户使用登录后的微信扫描二维码的时候,会将uid和手机微信产生的token进行绑定,并上传到服务器。这个时候,浏览器通过长轮询查询到uid扫描记录,立即得到201响应码,然后通知服务器,客户端由此也进入一个新的页面(就是那个要你点确认的按钮)。在客户端点击确认后,获得服务器授信的令牌,进行随后的信息交互过程。

结语

总的来说,微信扫码登录核心过程应该是这样的:浏览器获得一个唯一的、临时的uid,通过长连接等待客户端扫描带有此uid的二维码后,从长连接中获得客户端上报给服务器的帐号信息进行展示。并在客户端点击确认后,获得服务器授信的令牌,进行随后的信息交互过程。 在超时、网络断开、其他设备上登录后,此前获得的令牌或丢失、或失效,对授权过程形成有效的安全防护。

参考

源自:http://www.chenjunxyf.me/wei-xin-sao-miao-er-wei-ma-deng-lu-wang-ye-yuan-li/

justcode.ikeepstudying.com

时间: 2024-08-26 07:40:48

(转)微信扫码登录网页实现原理的相关文章

微信开放平台开发——网页微信扫码登录(OAuth2.0)

.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据.每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频).这样,OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要分享他们的访问

网站使用微信扫码登录流程

微信扫码登录是一个标准的oauth 2.0的过程. 1.用户请求访问网站,选择微信登录. 2.redirect到微信二维码页面 3.获取微信登录二维码,请求参数包括本网站的appId和登录成功后跳转回的地址,即relaystate. 4.返回二维码网页. 5.二维码扫入手机. 6.微信客户端将微信用户信息和二维码内的信息传给微信后台. 7.微信后台返回给浏览器授权成功,并附带授权码. 8.浏览器重定向到relaystate的地址,并将授权码作为参数传给网络后台. 9.网站将授权码和自己的地址发给

Web应用多账号系统设计及微信扫码登录实现

Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内部人员使用 部署在公网 基于如上特点,显然让公司的人为这样一个内部系统而实现一个完整的账号不太现实,要兼顾隐私性和便捷性的需求,作者想到了使用微信扫码登录来做为身份认证,然后后台管理员审核,这样就可以达到如下的效果: 可以实现无门槛注册(微信扫一扫就完成注册),保证了便捷性 系统对未审核通过的人员进

微信扫码登录asp微信扫码登陆代码

网站接入微信扫码登录并获取用户基本信息(完美绕过微信开放平台) 电脑版网站实现微信扫码登录,注册会员还要设密码太麻烦,会员也记不住密码,采用微信扫码登录网站更方便,会员无需设密码,用他的微信做为系统登录用户名,全程自动操作更方便.源码是用asp写的,mdb的数据库,微信扫描电脑网页上的二维码实现登录. 只需要用微信扫一下二维码,这个网站就可以展示你的微信昵称和头像,免去注册账号和输入密码登录的步骤,还免去设置头像和昵称的步骤,所以是挺方便的.我这个asp写好的代码和微信开放平台不同,微信开放平台

微信扫码登录

一.微信官方参考文档地址: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN 首先你需要在微信开放平台申请一个微信网站应用,获取 AppID:aaaaaaaaabbcc AppSecret: sfasfsafsafsafsads 二.jsp页面代码 <%@

[小小造梦]个人应用实现微信扫码登录

效果预览demo测试: https://ninetyteam.79px.com/ 原型地址 https://minapp.79px.com/demand/ 需求梳理解析 https://mp.weixin.qq.com/s?__... 个人应用实现微信扫码登录.需求梳理与具体实现方案.下面这篇,可以联合起来看-.- 迭代 http://mp.weixin.qq.com/s?__b... 实际的代码,我已经把流程梳理完毕了.有需要的可以找我要源码.或者我们可以合作完善.不过我的重心放在自己的另外一

微信扫码登录实现原理

扫码登录是如何实现的? 网页版微信刚推出时,无数人被它的登录方式惊艳了一下,不需要输入用户名密码,打开手机微信扫一扫,便自动登录.从原理上讲,二维码只能是一段文本的编码,如何用它实现快捷登录的呢? 打开网页版微信,可以看到如下的页面: 微信扫码界面 如果你用我查查.支付宝.新浪微博等软件扫码二维码,你会发现此二维码解析出来是如下的网址: https://login.weixin.qq.com/l/obsbQ-Dzag== 接下来详细介绍一下扫码登录具体的每个步骤: 第一步:用户 A 访问微信网页

php微信开放平台--第三方网页微信扫码登录(OAuth2.0)

第一.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据.每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频).这样,OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要分享他们的

微信 之网页第三方微信扫码登录

一.方式一(网站内嵌二维码微信登录JS) <?php /** * Created by PhpStorm. * User: 25754 * Date: 2019/6/4 * Time: 11:15 */ $state = md5("yangs"); include './login.html'; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT