微信小程序登录流程（包含前端、后端代码）

是江迪呀2023-08-10 11:24

一、前言

在微信小程序的开发过程中，如果想要保留用户的数据（比如：操作记录、购物车信息等等）就必须要用户登陆。为什么呢？比如说，数据库中有一条数据你如何知道这条数据属于谁？属于那个用户呢？这就需要用户登录来获取用户的唯一标识从而确定这条数据是属于哪个用户的，那么如何做微信小程序的登陆功能呢？让我们使用Springboot框架+AOP一起来学习吧！

二、流程

微信小程序登录流程：

开发者服务器处理流程：

1.1 获取用户Code

通过wx.login来获取临时登录code：

javascript 复制代码 
wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

1.2 获取appid

在注册微信开发者账后，可以在微信小程序管理后台获取appid：

1.3 获取appsecret

小程序密钥同样是在注册微信开发者平台账号后，在管理后台获取的： 由于微信小程序密钥不以明文的方式展示，如果忘记了，重置下就可以了。

1.4 开发者服务向微信接口服务发起请求

拿着微信code、appid、appsecret在开发者服务器去请求微信接口服务 换取 openId和secretKey（这里我们使用ApiPost工具来进行请求，当然PostMan工具也行）：

调用微信接口服务接口（注意是Get请求）：

javascript 复制代码 
https://api.weixin.qq.com/sns/jscode2session?

1.5 返回值

java 复制代码 
{
	"session_key": "xxxxx",
	"openid": "xxxxx"
}

拿到返回值后，应该入库，保存一下。 数据库结构如下： 等下次该用户登录时，走完1.4流程后，可以根据返回值中的openid在我们库中找到该用户，然后进行后续的操作。

1.6 自定义token

所谓token就是用来确认用户的身份证，拿到下面的返回值后，我们有下面两种方式生成自定义token：

（1）使用业务ID生成token（推荐使用，后续的内容都是以用户ID作为例子的）：

（2）使用session_key生成token：

java 复制代码 
{
	"session_key": "xxxxx"
}

（3）生成token的工具：

使用md5加密工具来生成token，工具类如下：

java 复制代码 
import cn.hutool.crypto.Mode;
import cn.hutool.crypto.Padding;
import cn.hutool.crypto.symmetric.AES;

import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;

public class AESUtil {

    /**
     * 加密密钥
     */
    private static final String ENCODE_KEY = "test_key_secret_";
    /**
     * 偏移量
     */
    private static final String IV_KEY = "0000000000000000";

    public static String encryptFromString(String data, Mode mode, Padding padding) {
        AES aes;
        if (Mode.CBC == mode) {
            aes = new AES(mode, padding,
                    new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"),
                    new IvParameterSpec(IV_KEY.getBytes()));
        } else {
            aes = new AES(mode, padding,
                    new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"));
        }
        return aes.encryptBase64(data, StandardCharsets.UTF_8);
    }

    public static String decryptFromString(String data, Mode mode, Padding padding) {
        AES aes;
        if (Mode.CBC == mode) {
            aes = new AES(mode, padding,
                    new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"),
                    new IvParameterSpec(IV_KEY.getBytes()));
        } else {
            aes = new AES(mode, padding,
                    new SecretKeySpec(ENCODE_KEY.getBytes(), "AES"));
        }
        byte[] decryptDataBase64 = aes.decrypt(data);
        return new String(decryptDataBase64, StandardCharsets.UTF_8);
    }
}

注意：ENCODE_KEY加密密钥不是固定的可以自己设置，但是！！！ENCODE_KEY和IV_KEY 偏移量的字符数量一定要保持一致！！！否者解密失败！！！

测试：

java 复制代码 
String encryptData = AESUtil.encryptFromString("test123456..", Mode.CBC, Padding.ZeroPadding);
System.out.println("加密：" + encryptData);
String decryptData = AESUtil.decryptFromString(encryptData, Mode.CBC, Padding.ZeroPadding);
System.out.println("解密：" + decryptData);

结果：

java 复制代码 
加密：UYKwmVTh39qvwHsQ+tkFow==
解密：test123456..

（5）将生成好的token放入到Redis（不重要，可以省略）

之所以放入Redis是因为它可以设置过期时间，可以实现token过期重新登录的功能。比如：如果接收到微信小程序请求所携带的token后先去Redis查询是否存在，如果不存在则判定过期，直接返回让再次用户登录。

java 复制代码 
@Autowired
private RedisTemplate redisTemplate;
....
//微信用户的唯一标识
private String userId= 'xxxxx'
//将token放入redis并设置3天过期
redisTemplate.opsForValue().set(userId,JSONObject.toJSONString(userInfo),3, TimeUnit.DAYS);

（6）返回token给微信小程序

将token放到返回体中返回给微信端。

java 复制代码 
...
return returnSuccess(token);

1.7 将token放到本地

在开发者服务器返回给微信小程序结果后，将token放入到本地存储。

javascript 复制代码 
...
//将token放到本地
 wx.setStorageSync('token', result.sessionKey)
...

1.8 请求带上token

向开发者服务器发起请求时，在header中带上token

javascript 复制代码 
...
wx.request({
 url: 'https://xxxx.com/api/method',
  header:{"token":wx.getStorageSync('token')},
  success:function(res){},
  fail:function(res){}
})
...

1.9 开发者服务器验证token

开发者服务器在接收到微信端发起的业务请求时，通过AOP进行拦截获取header中的token：

（1）AOP统一拦截：

使用Spring的AOP来拦截请求获取token。

java 复制代码 
 //获取token
 String token = request.getHeader("token");
 log.info("token:{}",token);

（2）解密token

java 复制代码 
...
String token = 'xxxx';
log.info("解密前：{}",decryptData);
String decryptData = AESUtil.decryptFromString(token, Mode.CBC, Padding.ZeroPadding);
log.info("解密结果：{}",decryptData);
//拿到用户ID
String userId = decryptData;
...

（3）验证是否过期（不重要，可以省略的步骤）

java 复制代码 
@Autowired
private RedisTemplate redisTemplate;
...
//用户ID
String userId = decryptData
ValueOperations valueOperations = redisTemplate.opsForValue();
String userInfoRedis = (String)valueOperations.get(userId);
...

三、前后端完整代码

2.1 前端代码

（1）登陆

javascript 复制代码 
 wx.login({
   success(res){
       if(res.code){
         wx.request({
           url:'https://xxxx.com/login/wxLogin',
           method:"POST",
           data:{"code":res.code} ,
           dataType:"json",
           success:function(res){
             result = res.data.result
             wx.setStorageSync('token', result.token)
             //页面跳转
            	...
           },
           fail:function(res){},
         })
       }
   }
 })

（2）发起业务请求

javascript 复制代码 
 wx.request({
      url: "https://xxxx.com/test/test",
      method: "GET",
      dataType:"json",
      data:{},
      //在heard中戴上token
      header:{"token":wx.getStorageSync('token')},
      success:function(res){
       ...
      },
      fail:function(res){}
    });

2.2 后端代码

后端使用的Java语言，框架是Springboot + AOP实现。 目录结构如下： yml配置文件：

（1）依赖

xml 复制代码 
<dependency>
   <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <version>2.1.2.RELEASE</version>
</dependency>

<dependency>
 	<groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
    <version>2.3.7.RELEASE</version>
</dependency>

<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
   <version>1.16.16</version>
</dependency>

<dependency>
  <groupId>org.slf4j</groupId>
  <artifactId>slf4j-api</artifactId>
  <version>1.7.30</version>
</dependency>

<dependency>
  <groupId>cn.hutool</groupId>
   <artifactId>hutool-all</artifactId>
   <version>5.6.3</version>
</dependency>

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-aop</artifactId>
   <version>3.0.4</version>
</dependency>

（2）切面相关代码

java 复制代码 
import lombok.extern.slf4j.Slf4j;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.After;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Pointcut;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import javax.servlet.http.HttpServletRequest;

@Aspect
@Component
@Slf4j
public class TestAspect {
    @Autowired
    private HttpServletRequest request;

    @Pointcut("execution(* xx.xxx.controller.*.*(..))"
    		  +"&& !execution(* xx.xxx.controller.WxLogin.*(..)"	)
    public void pointCut(){}
    @Around(value = "pointCut()")
    public Object Around(ProceedingJoinPoint joinPoint) throws Throwable {
        //获取token
        String token = request.getHeader("token");
        log.info("token:{}",token);
        //不存在token直接抛出异常
        if(StringUtils.isEmpty(token)){
            throw new AopException();
        }
        //解析token
        String userId = AESUtil.decryptFromString(token, Mode.CBC, Padding.ZeroPadding);
        log.info("解析token:{}",userId);
        //将token 放入到 Base基础类
        Base base = new Base();
        base.setUserId(userId);
        //放到Base中
        final Object[] args = joinPoint.getArgs();
        for (Object arg : args) {
            if(arg instanceof Base){
                BeanUtils.copyProperties(base, arg);
            }
        }
        //放到ThreadLocal中
        User user = new User();
        user.setUserId(userId);
        UserContent.setUserContext(user);
        return joinPoint.proceed();
    }

    @After(value = "pointCut()")
    public void controllerAfter() throws Throwable {
        log.info("后置通知");
        log.info("移除ThreadLocal中的用户信息:{}",UserContent.getUserContext());
        UserContent.removeUserContext();
    }
}

知识点：

从上面代码中我们可以看到。我们通过解密可以拿到UserId，这个值我们是频繁使用的，那么如何做到随用随取呢？

  • 第一种方式：使用Base基础类，然后让Controller需要传递参数的DTO都继承Base然后就可以随时使用UserId了。

  • 第二种方式：使用ThreadLocal，这种是比上一种优雅一些，也可以完全做到随用随取。但是需要注意在会话结束后一定要移除ThreadLocal中的用户信息，否则会导致内存溢出（这很重要），一般使用切面的后置通知来做这件事情。

execution(* xx.xx.controller.*.*(..))解释：在方法执行时，xx.xx.controller包下的所有类下面的所有带有任何参数的方法都需要走这个切面。

@PointCut注解值的规则：

  • execution：方法执行时触发。
  • 第一个 *：返回任意类型。
  • xx.xx.controller：具体的报路径。
  • 第二个*：任意类。
  • 第三个*：任意方法。
  • (..)：任意参数。

如果想要排除xxController类可以这样写： @Pointcut("execution(* xx.xxx.xxxx.controller.. (..)) " + "&& !execution(* xx.xxx.xxxx.controller.xxController.*(..))") 比如 登陆的时候就需要放行登陆的接口。

java 复制代码 
public class AopException extends Exception {
    public AopException() {
        super("登录超时，请重新登录");
    }
}

（3）控制层代码

登陆Controller代码：

java 复制代码 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/login")
public class WxLogin {

    @Autowired
    private IWxLoginService iWxLoginService;

    @PostMapping("/wxLogin")
    public Response wxLogin(@RequestBody WxLoginRequestDto requestDto){
        WxLoginResponseDto wxLoginResponseDto = iWxLoginService.wxLogin(requestDto);
        return returnSuccess(wxLoginResponseDto);
    }
}

业务逻辑Controller代码：

java 复制代码 
import cn.trueland.model.Base;
import cn.trueland.model.UserContent;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/test")
public class TestController {
    @GetMapping("/test")
    public String test(Base base){
        return base.getUserId();
    }
    @GetMapping("/test2")
    public String test2(){
        return UserContent.getUserContext().getUserId();
    }

}

（4）Service层代码：

这里我只帖登陆的Service层代码，业务的没有必要。

java 复制代码 
public String wxLogin(WxLoginRequestDto requestDto) {
        if(StringUtils.isBlank(requestDto.getCode())){
            throw new BusinessException("code为空!");
        }
        //获取微信服务接口地址
        String authCode2Session = wxConfig.getAuthCode2Session(requestDto.getCode());
        //请求微信服务接口获取 openId
        String result = HttpClientUtil.doGet(authCode2Session);
       	String openId = JSONObject.parseObject(result).getString("openid");
        String sessionKey = JSONObject.parseObject(result).getString("session_key");
        //入库 并返回  userId (逻辑省略)
		String userId = ...;
        //将用户信息存入redis
        redisTemplate.opsForValue().set(userId,userId ,3, TimeUnit.DAYS);
        String token = AESUtil.encryptFromString(userId, Mode.CBC, Padding.ZeroPadding);
        return token;
    }

（4）实体类相关代码

登录请求DTO:

java 复制代码 
import lombok.Data;
@Data
public class WxLoginRequestDto {
    /**
     * code
     */
    private String code;
}

基础类Base:

java 复制代码 
import lombok.Data;

@Data
public class Base {
    private String userId;
}

用户实体类User:

java 复制代码 
import lombok.Data;

@Data
public class User {
    private String userId;
}

用户信息实体UserContent:

java 复制代码 
public class UserContent {
    private static final ThreadLocal<User> userInfo = new ThreadLocal();

    public static User getUserContext(){
        return userInfo.get();
    }

    public static void setUserContext(User userContext){
        userInfo.set(userContext);
    }

    public static void removeUserContext(){
        userInfo.remove();
    }
}

（5）配置类

java 复制代码 
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

@Data
@Component
@ConfigurationProperties(prefix = "wx")
public class WxConfig {
    /**
     * 小程序AppId
     */
    private String appId;
    /**
     * 小程序密钥
     */
    private String appSecret;
    /**
     * 授权类型
     */
    private String grantType;
    /**
     * auth.code2Session 的 url
     */
    private String authCodeSessionUrl;
}

（6）yml配置信息

xml 复制代码 
wx:
  app-id: xxxx
  app-secret: xxxx
  auth-code-session-url: https://api.weixin.qq.com/sns/jscode2session?
  grant-type: authorization_code

测试结果

都可以拿到UserId并返回。

下面就可以开心的处理业务逻辑啦！！！

相关推荐
秦jh_2 分钟前
【Linux】多线程（概念，控制）
linux·运维·前端
蜗牛快跑21314 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy15 分钟前
vue 依赖注入（Provide、Inject ）和混入（mixins）
前端·javascript·vue.js
涔溪1 小时前
Ecmascript（ES）标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
小泽呀x2 小时前
微信小程序中使用离线版阿里云矢量图标
微信小程序·小程序
热门推荐
01玄机平台应急响应—webshell查杀02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04新版微信小程序获取用户手机号05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【软件工程】UML用例图介绍和实例说明