Day: May 21, 2015

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

扫码登录操作过程 浏览器输入: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(服务器创建新资源成功),表示客户端扫描了该二维码。… Read More “微信扫码登录网页实现原理”

改变浏览器视角大小:Viewport Resizer

Viewport Resizer的开发背景 现在开发人员如果要开发一个同时支持PC端与手机端的网站的话,由于电脑和手机显示屏肯定不一样大小的,所以要跟对手机等移动设备进行单独地测试,而对于 电脑上的浏览器来说,其视角一般比电脑的分辨率稍微小一点,但是肯定比手机设备要大得多了,如果我们每次测试的时候手动地调整浏览器进行缩放的效果和手机 中显示的效果并一定是一样的,因为电脑上的浏览器缩放到一定程度就会出现滚动条,无法达到逼真的测试效果,所以我们需要一款能够改变PC机中浏览器的视角 的谷歌浏览器插件。 Viewport Resizer的简介 Viewport Resizer是一款可以自由调整当前浏览器视角大小的谷歌浏览器插件,在chrome浏览器中安装了Viewport Resizer插件以后,开发人员可以很方便地在电脑的浏览器中模拟手机等移动设备的视角大小,通过这些相对真实的视角模拟开发人员可以更加及时地调整移动设备中网站的显示效果。 Viewport Resizer为开发人员提供了集中常见的视角大小,其中包括手机等移动设备、平板设备、大屏PC浏览器等常见的浏览器视角大小,用户可以点击这些按钮轻松切换到相应的视角大小,除此之外,用户还可以在浏览器的上方自定义当前的视角大小来获得更加个性化的浏览器视角调整。 Viewport Resizer的使用方法 1.在谷歌浏览器中安装Viewport Resizer插件,并在chrome的扩展管理器中启动调整浏览器视角大小的功能,Viewport Resizer的下载地址可以在本文的下方找到,安装离线chrome插件的方法可以参考:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?… Read More “改变浏览器视角大小:Viewport Resizer”