微信授权登录-前后端分离

简介

在前后端分离情况下实现微信服务号和订阅号授权登录，项目使用springboot+Vue前后端分离的开发模式。

备注：目前只提供后端代码实现以及业务逻辑

流程图

服务号

开发逻辑

进入活动页面根据code和state参数判断，如果参数为空则调用微信授权URL路径接口，否则就调用获取用户授权信息接口，通过code和state就能够获取到当前授权用户的用户信息。

步骤

1、首次进入页面，获取微信重定向URL

首次进入页面，如果地址中没有code和state，那么就表示当前活动没有授权用户信息，所以此时需要获取后台拼接好的微信重定向URL接口，然后通过URL跳转授权。

接口返回如下字符串：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri= redirectURL&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

APPID ：服务号APPID
redireURL ：重定向页面地址

具体参考AuthorizedLoginController类中的authorizedLoginUrl方法

2、通过微信接口重定向到活动页面

通过用户确认授权，微信再重定向到活动页面，并且返回code和state参数，通过这两个参数再次调后台接口，获取用户授权信息。

http://m.ershouhui.com/yf/201710/finger/activity/?code=021ieRZt1CVY3a0GqNZt175QZt1ieRZE&state=STATE

根据返回的code和state，处理之后调用获取授权信息方法

3、通过code和state获取用户信息

根据code和state参数，获取用户授权信息。

具体参考AuthorizedLoginController类中的getWxAuthorizedUser方法

订阅号

由于订阅号无法从网页直接授权登录，所以需要借助于服务号APPID来关联实现用户授权等操作。

想获取当前用户是否关注订阅号，需要通过https://api.weixin.qq.com/cgi-bin/user/info?access_token=%s&openid=%s&lang=zh_CN来获取用户信息，返回的参数中有一个字段叫subscribe，为1表示已经关注，为0表示未关注。

参考资料

微信JS-SDK开发的Demo
微信JS-SDK开发文档
申请微信公众平台接口测试账号

参与者

pengcheng3211@gmail.com