应用网站微信扫码登录处理逻辑解析
近日刚刚进行了网站应用微信扫码登录的功能开发。开发前看了不少文档,但感觉都很偏技术术语,太过于专业。对于刚刚想涉及这方面的菜鸟来说,看的一脸懵逼。
趁着自己刚刚动手的开发经验,给菜鸟们介绍下相关思路,让大家知道下入门的路。
老鸟们就不必看了,因为可能这篇文章的逼格太低。
基础概念
微信扫码登录的过程细分的话步骤很多,但是仔细了解就会发现每一个步骤都具有以下特点:
- 参与方只有两个:一个请求方,和一个响应方。
注:请求方类似提问方,响应方类似回答方。
- 数据的交换顺序:请求方先向响应方发送数据,响应方再向请求方返回数据。
注:必须先问后答,由提问方提问,回答方回答。
- 数据的一次交换原则:请求方向响应方发送数据后,必须等待响应方返回数据;响应方未返回数据前,请求方不在重复发送数据。
注:必须一问一答,请问方提问后,再回答方未回答问题前不能再次提问。
准备工作
注册微信开放平台账号。
账号申请开发者资质。
账号内创建网站应用。
搭建本框架模式的网站。注:网站分为网页前端(以下简称前端)和API后端(以下简称后端),前后端通过json报文做数据通信。
处理流程涉及各参与方
A. 客户方浏览器。
B. 客户方手机微信。
C. WEB应用前端。(以下简称WEB前端)
D. WEB应用后端API。(以下简称WEB后端)
E. 微信二维码前端页面。(向客户浏览器显示二维码)
F. 手机微信后台。(响应客户手机微信)
G. 微信主动后台。(主动调用回调地址)
H. 微信认证API。(响应WEB后端认证请求)
注:微信方后台可视为数据完全共享。
处理时序图
处理流程说明
1. 客户方浏览器请求并加载WEB前端的静态资源(包括html,js,css等),并进行页面渲染。
请求方:客户方浏览器。A
响应方:WEB前端。C
请求数据:应用网址。(url及参数)
响应数据:WEB前端的静态资源(包括html,js,css等)。
2. 客户方浏览器通过前端资源的js向WEB后台申请一个会话ID。该会话ID将在浏览器端和WEB后端各自保存。
请求方:客户方浏览器。A
响应方:WEB后端。D
请求数据:应用网址。(url及参数)
响应数据:json数据,含会话ID。
3. 客户方浏览器通过前端页面链接或按钮,发送微信扫码登录请求给WEB后端;WEB后端生成微信扫码的url链接地址返回给客户方浏览器。
请求方:客户方浏览器。A
响应方:WEB后端。D
请求数据:应用网址。(url及参数,参数中含会话ID)
响应数据:微信扫码的url链接地址(参数中含回调地址及会话ID)。
注:
a. url信息中含有WEB后端回调地址,该地址将在步骤8使用。
b. url信息中含有步骤2中生成的会话ID,该ID可使用url参数的state来保存,且可在步骤8中使用。
c. 步骤2和3的交互可以分两次完成,也可以集成到一次完成。
4. 客户方浏览器根据步骤2获取的url地址,打开微信前端扫码页面(二维码中含有认证用数据A)。
请求方:客户方浏览器。A
响应方:微信二维码前端页面。E
请求数据:应用网址。(url及参数,参数中含回调地址及会话ID)
响应数据:二维码页面(二维码中含有认证用数据A)。
5. 客户在扫码页面使用手机微信扫码,使手机微信获取到认证用数据A。
请求方:客户手机微信。B
响应方:客户方浏览器。A
请求数据:手机摄像头。
响应数据:二维码页面(二维码中含有认证用数据A)。
6. 客户手机微信将扫码得到的认证用数据A发送到微信后台,微信后台返回登录确认页面给手机微信。
请求方:客户手机微信。B
响应方:手机微信后台。F
请求数据:二维码中的认证用数据A。
响应数据:微信登录确认页面。
7. 客户在手机微信的登录确认页面上点击确认,手机微信将确认请问发往微信后台。
请求方:客户手机微信。B
响应方:手机微信后台。F
请求数据:微信登录确认页面中点击确认的消息。
响应数据:手机微信后台F已收到确认消息。
8. 微信后台调用步骤2中填写的WEB后端回调地址,告知WEB后端认证code信息和会话ID。
请求方:微信主动后台。G
响应方:WEB后端。D
请求数据:code消息和会话ID。
响应数据:扫码页面的重定向地址。
注:
可视为步骤7中的手机微信后台F将相关数据告知微信主动后台G。
步骤7与步骤8中间隐含了手机微信后台F向微信主动后台G共享数据的过程。
WEB后端将code与会话ID记录到数据库,并建立对应关系。
响应数据中的重定向地址为WEB前端应用地址,且地址中含有参数会话ID
微信后端D可在步骤10后再向微信主动后台G响应重定向地址消息。
9. WEB后端通过向微信后台发送code信息,获取access_token。
请求方:WEB后端。D
响应方:微信认证API。H
请求数据:code消息,appid,appsecret等。
响应数据:access_token。
注:WEB后端将记录下access_token,并将其与对跟code关联的会话ID关联,且将关系数据保存到数据库。
10. WEB后端通过向微信后台发送access___token和openid信息,获取个人信息。
请求方:WEB后端。D
响应方:微信认证API。H
请求数据:access___token和openid信息等。
响应数据:微信用户个人数据json。
注:WEB后端将记录下微信用户个人数据json,并将其与对应的会话ID关联,且将关系数据保存到数据库。
11.客户端浏览器从二维码扫码页面得到重定向地址。
请求方:客户端浏览器。A
响应方:微信二维码前端。E
请求数据:access___token和openid信息等。
响应数据:重定向地址(该重定向地址为步骤8响应消息中,由WEB后端D发送给微信主动后台G的,且重定向地址中包含会话ID)。
注:客户端浏览器获取重定向地址方式可能是轮询微信二维码前端页面;也可能是双方建立了WebSocket通讯后,由微信二维码前端通知。
12.客户端浏览器跳转至重定向地址(WEB前端)。
请求方:客户端浏览器。A
响应方:WEB前端。C
请求数据:重定向地址,含会话ID。
响应数据:WEB前端页面。
13.客户端浏览器通过会话ID向WEB后端请求微信个人信息。
请求方:客户端浏览器。A
响应方:WEB后端。D
请求数据:客户端浏览器调用WEB前端的js脚本将会话ID发送给WEB后端。
响应数据:WEB后端根据会话ID,从数据库中抓取对应的个人信息数据(该数据为步骤10时由WEB后端保存到数据库中)后,将数据组成json数据返回。
14.客户端浏览器JS处理获取的json数据。
客户浏览器调用WEB前端js脚本将步骤13获得的json数据加载到页面中显示,完成整个登录过程。