应用网站微信扫码登录处理逻辑解析

近日刚刚进行了网站应用微信扫码登录的功能开发。开发前看了不少文档，但感觉都很偏技术术语，太过于专业。对于刚刚想涉及这方面的菜鸟来说，看的一脸懵逼。

趁着自己刚刚动手的开发经验，给菜鸟们介绍下相关思路，让大家知道下入门的路。

老鸟们就不必看了，因为可能这篇文章的逼格太低。

基础概念

微信扫码登录的过程细分的话步骤很多，但是仔细了解就会发现每一个步骤都具有以下特点：

参与方只有两个：一个请求方，和一个响应方。

注：请求方类似提问方，响应方类似回答方。

数据的交换顺序：请求方先向响应方发送数据，响应方再向请求方返回数据。

注：必须先问后答，由提问方提问，回答方回答。

数据的一次交换原则：请求方向响应方发送数据后，必须等待响应方返回数据；响应方未返回数据前，请求方不在重复发送数据。

注：必须一问一答，请问方提问后，再回答方未回答问题前不能再次提问。

准备工作

注册微信开放平台账号。
账号申请开发者资质。
账号内创建网站应用。
搭建本框架模式的网站。注：网站分为网页前端（以下简称前端）和API后端（以下简称后端），前后端通过json报文做数据通信。

处理流程涉及各参与方

A. 客户方浏览器。

B. 客户方手机微信。

C. WEB应用前端。（以下简称WEB前端）

D. WEB应用后端API。（以下简称WEB后端）

E. 微信二维码前端页面。（向客户浏览器显示二维码）

F. 手机微信后台。（响应客户手机微信）

G. 微信主动后台。（主动调用回调地址）

H. 微信认证API。（响应WEB后端认证请求）

注：微信方后台可视为数据完全共享。

处理时序图

Created with Raphaël 2.1.0 客户浏览器客户浏览器 WEB前端 WEB前端 WEB后端 WEB后端微信后台微信后台手机微信手机微信应用网址(步骤1请求) 静态资源(步骤1响应) 请求会话ID(步骤2请求) 生成一个会话ID 返回会话ID(步骤2响应) 请求扫码地址(步骤3请求) 将扫码地址作为重定向地址返回(步骤3响应) 请求扫码地址(步骤4请求) 返回扫码页面(步骤4响应) 摄像头扫码二维码(步骤5请求) 手机微信识别二维码(步骤5响应) 二维码中的认证数据(步骤6请求) 微信登录确认页面(步骤6响应) 点击确认并提交(步骤7请求) 收到确认消息(步骤7响应) code消息和会话ID(步骤8请求) code，appid，appsecret等(步骤9请求) access_token，openid(步骤9响应) 保存会话ID与access_token，openid的关系 access_token，openid等(步骤10请求) 微信个人数据(步骤10响应) 保存会话ID与微信个人数据的关系返回含会话ID的WEB前端重定向地址(步骤8响应) 刷新扫码地址(步骤11请求) 返回含会话ID的WEB前端重定向地址(步骤11响应) 请求含会话ID的WEB前端重定向地址(步骤12请求) 返回WEB前端资源(步骤12响应) 会话ID(步骤13请求) 根据会话ID提取微信个人数据返回微信个人数据(步骤13响应) 客户浏览器根据js脚本加载微信个人数据，并显示在页面上。

处理流程说明

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数据加载到页面中显示，完成整个登录过程。