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

绝地灬酷狼 2024-03-26 11:39 70阅读 0赞

### 背景 ###

公司需要开发一个小程序，后台使用的是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的标志给前台。

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

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

背景公司需要开发一个小程序，后台使用的是ruoyi-vue框架，前端使用uiapp开发。小程序登录采用手机号验证码登录。思路 1、重新改写登录逻辑 ruo

绝地灬酷狼/ 2024年03月26日 11:39/ 0 赞/ 71 阅读

相关 SpringSecurity实现前后端分离登录授权详解

> 在介绍完SpringSecurity实现前后端分离认证之后，然后就是SpringSecurity授权，在阅读本文章之前可以先了解一下作者的上一篇文章SpringSecuri

淩亂°似流年/ 2023年10月12日 15:12/ 0 赞/ 94 阅读

相关微信小程序授权登录

1.流程首先在用户打开小程序的时候，通过`wx.openSetting`判断用户是否已授权，如果没有授权的话，显示button按钮下面是wxml的相关代码

末蓝、/ 2022年12月24日 15:54/ 0 赞/ 295 阅读

相关微信小程序授权登录

微信的详细登录流程如下图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

小灰灰/ 2022年10月23日 08:26/ 0 赞/ 403 阅读

相关微信小程序授权登录

现在微信小程序非常火爆，很多常规的APP都推出了自己的微信小程序。说到微信小程序，不可避免会触及到微信账号的授权登录，现在来说说一下哈！首先需要自己的一个小程序，可以到微

古城微笑少年丶/ 2022年03月27日 06:28/ 0 赞/ 598 阅读

相关微信小程序授权登录

现在微信小程序非常火爆，很多常规的APP都推出了自己的微信小程序。说到微信小程序，不可避免会触及到微信账号的授权登录，现在来说说一下哈！首先需要自己的一个小程序，可以到微

左手的ㄟ右手/ 2022年03月25日 16:14/ 0 赞/ 618 阅读

相关微信小程序---强制用户授权登录

wxml页面：  <view class="login" wx:if="{ {!hasUserInfo &&

小鱼儿/ 2022年03月20日 10:59/ 0 赞/ 851 阅读

相关微信小程序登录授权处理（mpvue）

本项目使用的是mpvue（使用微信小程序原生开发一个道理）在app.vue文件create钩子函数里： // 主要是为了获取code wx.login(

素颜马尾好姑娘i/ 2021年11月23日 04:24/ 0 赞/ 645 阅读

相关 uniapp微信小程序授权登录

<template> <view> <LotusLoading :lotusLoadingData="lotusLoadingData" styl

本是古典何须时尚/ 2021年07月24日 23:16/ 0 赞/ 1032 阅读

相关前后端分离微信登录实现思路

微信第三方登录前后端分离实现思路前端实现这里说一下前后端的思路，页面加载时声明一个变量state=‘时间戳+6位随机数’, 前端路径生成二维码，其中有个state参...

小灰灰/ 2021年05月03日 03:53/ 0 赞/ 736 阅读