微信的网页版扫码登陆原理？

Web运用多账户系统设计方案及微信扫码登录完成1 引言简述

企业对软件性能测试，性能指标，安全性测试这些都干了比较好的自动化技术后，急必须一个MIS系统来统一管理方法这种結果及表格。

此MIS系统特性如下所示：

仅内部员工应用布署在外网地址

根据如上特性，显而易见让公司的人为因素那样一个内部结构系统而完成一个完全的账户不太实际，要兼具个人隐私性和便利性的要求，创作者想起了应用微信扫码登录来当做身份验证，随后后台管理管理者审批，那样就可以做到给出的实际效果：

可以达到无门坎申请注册（微信扫一扫就进行申请注册），确保了便利性系统对未审核根据的员工开展防护，确保了个人隐私性

随后在开发设计结束此系统后，感觉必须再汇总并且小提升一下，因此就有文中的创作动因。

2 多账户基本原理

原本文中的目的性是 “完成微信扫码登录” ，可是之后感觉只是是为了更好地达到这种作用，文中的构思又看起来太低。因此就在这里拓展一下为 “多账户授权登录系统” 。

在近几年来，伴随着互联网技术愈来愈开发设计和合作，现阶段的系统登陆方法也愈来愈多，早已大大超过了过去的多用户名的方法了。除开用户名密码外，一般网站还给予如下所示的登陆方法：

第三方受权手机微信/QQ/微博（中国）Google/Facebook/Github（海外）关联账户手机号邮箱号

根据以上的几类登陆方法，就建立了以下的 “多账户登录管理体系图”：

基本概念：

第三方受权可以从可靠第三方获得到对应的传参（客户信息）,随后和 user_id 关联不用附加再输入支付密码便进行鉴权全过程会建立一组将来可以调整的 user_id 做为 团块客户鉴权取得成功后设定session情况关联账户事前早已完成了 user_id 的申请注册完成了相对应手机绑定，即表明认同和 user_id 均能登陆应用和 user_id 一样的或是不一样的登陆密码管理体系（一般应用同样登陆密码）登陆进行鉴权鉴权取得成功后设定session情况

有关 关联账户 的方法非常简单，这里就不会再赘述。

根据 第三方受权 的方法，则较为精妙，可自主性较为强，由于根据互联网技术愈来愈对外开放的特点，此方法毫无疑问会很多的被运用，愈来愈成为了流行。下边将以 微信扫码 授权登录为案例来开展解读。

3 扫码登录逻辑性

应用 微信扫码 授权登录的逻辑图如下所示：

在其中关键解决的事儿如下所示：

向第三方进行鉴权要求第三方鉴权调整和MIS系统当地 user_id 管理体系关系（新创建客户）设定session登陆情况解决不一样結果的展示页面4 微信扫码全过程

应用过微信扫码登录系统的人有如下所示的全过程感受（以知名社交媒体网站 知乎问答 为事例）：

开启 知乎问答 首页，点一下 “微信登陆” 的标志电脑浏览器跳转到手机微信域（见下面的图标识1）下边的二维码网页页面客户拿出手机上进入微信，扫一扫在微信上点一下受权PC上边的二维码网页页面表明受权取得成功，并转为到 知乎问答 主页，认证成功

整个过程针对终端产品用户而言，仅有短短的几秒，并且无需键入一切登陆密码，可以算是一种十分安全性又方便的感受。

问题来了，根据微信扫描二维码，并进行MIS系统登录注册这一短短的几秒的时间段里边，究竟发生了什么事儿？

根据电脑浏览器抓包软件，对好多个重要通信全过程开展剖析。

PC电脑浏览器会先后进行2个长连接（较为长时处在 pending 情况）的要求：

等候手机上端微信扫码（上图标识2）等候微信点一下 “确定登陆” 按键（上图标识3）

这两个情况都是会意见反馈到PC端的二维码网页页面，在移动端进行确定后，PC电脑浏览器上边的网页页面便会生定项到受权后的网页页面（如 知乎问答 主页）。

实际多方通信状态图如下所示：

上图对整个过程中通信涉及到的目标开展了清晰的叙述，有关上图数据标明一部分注释如下所示：

网站网络服务器向手机微信API传到含有 调整url 的主要参数微信根据监控摄像头扫二维码，从 光学原理 上进行信息的传送PC电脑浏览器上查看扫二维码情况的长连接接到返还的状态值，并升级提醒PC电脑浏览器上查看手机app点一下确定按键的状态值，并升级提醒，随后跳转到 全过程1 中传送url地址上网站网络服务器在受权取得成功后，进行本系统的新用户注册或是登陆的领域模型网站网络服务器跳转到账号登录取得成功的操作界面中（假如针对新注册客户不用另外的审批得话）

有关微信扫码验证一部分的开发设计，文中不会赘述，只得出如下所示常见问题：

微信公众平台的各种各样API插口请参照：微信开放平台给予的官方网文本文档微信扫码登录的开发设计管理权限必须在微信开放平台中开展公司认证（普通用户没法得到）调整url 的域必不可少在微信开放平台中开展填好报备，当地开发设计时传送的 调整url 主要参数务必和报备一致5 编码完成

依据如上基本原理,最终将给予实际完成编码以仅供参考 ，为了更好地简约，有一些通用性的专用工具函数公式的主要完成也不贴上去了。

应用 python3.5 完成 微信扫码登录Web应用软件 的参照编码如下所示所显示。

相匹配 上图标志1 中的源代码完成：

class WeChatAuth(MyBaseHandler): """ 点一下后立即跳转到微信登录界面 - wechat QR扫码登录,web端 - 立即跳转到手机微信的网页页面 """ def get(self): state = get_uuid1_key() # 转化成唯一的码 wx_qr_param = dict( appid=wx_webapp.appid, # redirect_uri=wx_webapp.qr_auth_cb_url, redirect_uri='http://your.do ** in.com/wechat/wechat-auth-callback/', response_type='code', scope=wx_webapp.login_scope, state=state ) ##wechat_redirect wx_qr_url = 'https://open.weixin.qq.com/connect/qrconnect?%s#wechat_redirect' % urllib.parse.urlencode(wx_qr_param) self.redirect(wx_qr_url)

相匹配 上图标志2 中的源代码完成：

class WeChatAuthCallback(MyBaseHandler): """ 微信第三方验证以后，逐渐将此客户在本系统沉积出来 - 用以微信服务器传到code的值 - 这里要再要求得到access_token """ async def get(self): wx_code = self.get_argument('code', '') wx_state = self.get_argument('state', '') if wx_code == '': res = ConstData.msg_forbidden dlog.debug(res) self.write(res) return dlog.debug('wx_code:%s,wx_state:%s' % (wx_code, wx_state)) access_token_res = wx_webapp.get_auth_access_token(code=wx_code, state=wx_state) user_info = wx_webapp.get_auth_user_info(auth_access_token_res=access_token_res) """:type:WeChatUser""" # 手机微信回到的客户信息串 if user_info is None: res = ConstData.msg_forbidden dlog.debug(res) self.write(res) return wechat_user = await MisWeChatUser.objects.get(openid=user_info.openid, unionid=user_info.unionid) """:type:MisWeChatUser""" # 一个Open_id下边全部的id全是靠union来区别账户 if wechat_user is not None: user = await User.objects.get(user_id=wechat_user.user_id) assert user is not None if user.active: if await user.is_online(): await self.update_session() # 更新 else: await self.create_session(user) # 新提升一个session self.write('in authorized page') # self.redirect('/') # todo 跳转到登陆受权后的首页 return # 假如不会有wechat备案信息查询,则必须报备wechat信息内容,并且新注册原始账户 default_new_user_id = 'u_' get_uuid1_key() new_wechat_user = MisWeChatUser( openid=user_info.openid, nickname=user_info.nickname, unionid=user_info.unionid, # user_id=wx_webapp.appid '_' user_info.unionid, # 根据微信号登录转化成的一个唯一的登录名，后边可以给予改动 user_id=default_new_user_id, appid=wx_webapp.appid ) new_wechat_user.set_default_rc_tag() # rand_salt = get_rand_salt() new_user = User( user_id=default_new_user_id, # salt=rand_salt, # 避免他人md5撞库反方向破译的随机数字 # passwd=StringField() # 登陆密码,根据第三方登录的默认设置不设定 first_name=user_info.nickname, status=FieldDict.user_status_init, # 表示是可更改状态 active=False, ) new_user.set_default_rc_tag() await new_wechat_user.save() await new_user.save() self.write('in unauthorized page') # self.redirect(URL_ROOT) # todo 导入到未授权的页面6 功能测试

设计两组测试用例。

检查微信用户扫码后能否完成上述流程:

用A微信账号扫码登录，查看是否自动注册是否提示重定向到 “未授权页面”

在数据库中修改A微信自动注册的用户状态为审核通过后再扫码登录:

修改A用户状态为 active=True是否提示重定向到 “授权页面”是否在数据库中看到登录的session状态

测试截图如下：

7 小结

如果我是一个产品经理，如果我做一个web应用的产品，那么在产品早期阶段，我肯定会选择微信登录的方式，因为这种方式的登录门槛实在是太低了，用户试用产品的门槛也降到了最低，后续的活跃程度至少不会受到登录的门槛的影响。

可惜，还有好多产品经理不懂这个，这么重要的入口都没有稍微花点心思去打磨。