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

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

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

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

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

基础概念

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

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

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

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

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

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

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

准备工作

注册微信开放平台账号。

账号申请开发者资质。

账号内创建网站应用。

搭建本框架模式的网站。注：网站分为网页前端（以下简称前端）和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数据加载到页面中显示，完成整个登录过程。