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

是江迪呀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并返回。

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

相关推荐
VXbishe27 分钟前
（附源码）基于springboot的“我来找房”微信小程序的设计与实现-计算机毕设 23157
java·python·微信小程序·node.js·c#·php·课程设计
大前端爱好者1 小时前
React 19 新特性详解
前端
随云6321 小时前
WebGL编程指南之着色器语言GLSL ES（入门GLSL ES这篇就够了）
前端·webgl
寻找09之夏2 小时前
【Vue3实战】：用导航守卫拦截未保存的编辑，提升用户体验
前端·vue.js
大三觉醒push亡羊补牢女娲补天版2 小时前
微信小程序常见问题
微信小程序·小程序
多多米10053 小时前
初学Vue（2）
前端·javascript·vue.js
柏箱3 小时前
PHP基本语法总结
开发语言·前端·html·php
漏刻有时3 小时前
微信小程序学习实录9：掌握wx.chooseMedia实现多图片文件上传功能（选择图片、预览图片、上传图片）
学习·微信小程序·notepad++
新缸中之脑3 小时前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8563 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04【极空间NAS】使用WebDAV服务 + DDNSTO内网穿透 实现思源笔记的内外网同步05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10Coze扣子平台完整体验和实践（附国内和国际版对比）