Ruoyi-vue前后端不分离集成微信小程序授权登录思路

背景

公司需要开发一个小程序,后台使用的是ruoyi-vue框架,前端使用uiapp开发。小程序登录采用手机号验证码登录。

思路

1、重新改写登录逻辑
ruoyi-vue采用的是spring security权限框架,默认使用用户名和密码进行登录,所以如果要改成手机号验证码登录,则需要重写改造权限框架

2、创建表用来绑定微信用户唯一标识openId和手机号
新建一张表,主要放用户的openId和userId,用来绑定用户信息

流程

1、登陆,未授权

用户输入手机号,发送验证码进行登录,后台根据手机号去数据库中查询,判断手机号是否绑定openId,如果没有,则页面弹窗 允许授权的提示。
后台在返回token的同时,也会返回一个没有绑定openId的标志,用于给前台判断是否要弹出授权页面。

注意:调用发送验证码接口时,后台先判断,该手机号是否在系统表中,如果不在,则直接返回手机号不在平台内,防止填错或恶意填写

2、登陆,已授权
用户进入小程序登录界面,输入手机号进行登录,后台根据手机号去数据库中查询,判断手机号是否绑定openId,如果已绑定,则页面不再弹窗 允许授权的提示。
后台返回token,以及已经绑定了openId的标志

3、授权操作,绑定手机号和openId(前台传参 code 和 手机号)
前台点击允许授权,前台传入code和手机号到后台,
后台根据code,调用微信官方接口,获得openId,然后将openId与手机号绑定入库,最后则授权成功

如果用户不点击 允许授权, 那么下一次再来登录的时候,继续提示他,因为手机号和openId没有绑定。

4、微信一键登陆

用户可以选择手机号验证码进行登录,也可以使用一键登录。

点击一键登录,前台传递code到后台,后台根据code,调用微信接口,获得openId,
后台根据openId,查询数据库,如果未查询到数据,

方案一:则直接提示该手机号非平台用户
方案二:调用微信接口,获取用户绑定微信的手机号,然后用手机号去数据库查询,如果查询不到,则说明非平台用户,
如果可以查到,则使用手机号进行登录,登录成功返回token给前端,并且将openId存入数据库。

如果可以查询到,则说明用户之前登陆过平台并进行了授权,接下来通过查询到的手机号,在平台直接进行登录,
登录成功,返回token和已绑定了openId的标志给前台。

猜你喜欢

转载自blog.csdn.net/weixin_43860634/article/details/129131233
今日推荐