java后端接入微信小程序登录功能
前言
此文章是Java后端接入微信登录功能,由于项目需要,舍弃了解密用户信息的session_key
,只保留openid
用于检索用户信息
后端框架:spring boot
小程序框架:uniapp
流程概括
- 官方流程:通过自定义登录态与openid,session_key关联,之后的前后端交互通过自定义登录态来识别
- 只保留登录流程:使用 spring boot 的session进行交互,openid存入数据库,用来检索用户信息(可以理解为 openid 作为账号,只保留此小程序的登录功能)
官方小程序登录流程图解(图取自官网)
- 通过wx.login()获取code
- 将code发送给后端服务器,后端会返回一个token,这个token将作为你身份的唯一标识。
- 将token通过wx.setStorageSync()保存在本地存储。
- 用户下次进入⻚面时,会先通过wx.getStorageSync() 方法判断token是否有值,如果有值,则可以请求其它数据,如果没有值,则进行登录操作。
- openid:用来唯一标识用户的一个字符串,通过
openid
可以获取用户的基本信息(不同小程序中拥有不同openid) - code:
code
是用户登录凭证,由微信服务器颁发给小程序;后端通过code向微信服务器请求用户的openid
和session_key
等信息。(code是一次性的,且时效为5分钟) - unionid:用于标识同一微信开放平台账号下多个应用的用户,多个小程序中的
unionid
是相同的
接入小程序登录(只保留 openid 登录功能)
- 通过wx.login()获取code
- 将code发送给后端服务器,后端保存openid到数据库并返回sessionId
- 将sessionId通过wx.setStorageSync()保存在本地存储
- 用户下次进入⻚面时,会先通过wx.getStorageSync() 方法判断sessionId是否有值,如果有值,则可以请求其它数据,如果没有值,则进行登录操作。
后端代码
工具类
import cn.hutool.core.util.StrUtil;
import cn.hutool.http.HttpRequest;
import cn.hutool.json.JSONObject;
import com.redapple.project.common.ErrorCode;
import com.redapple.project.exception.ThrowUtils;
public class RequestUtils {
// 获取AccessToken
public static JSONObject getAccessToken(String appId, String appSecret) {
String apiUrl = StrUtil.format(
"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={}&secret={}",
appId, appSecret
);
String body = HttpRequest.get(apiUrl).execute().body();
ThrowUtils.throwIf(body == null, ErrorCode.OPERATION_ERROR);
return new JSONObject(body);
}
// 获取session_key和openid
public static String getOpenIdByCode(String appId, String secret, String code) {
String apiUrl = StrUtil.format(
"https://api.weixin.qq.com/sns/jscode2session?appid={}&secret={}&js_code={}&grant_type=authorization_code",
appId, secret, code
);
String body = HttpRequest.get(apiUrl).execute().body();
ThrowUtils.throwIf(body == null, ErrorCode.OPERATION_ERROR);
return body;
}
}
登录实现
主要接收三个参数,分别是小程序的appi、appSecret、前端传来的code
这里通过工具类向微信接口服务发送jscode,返回openid
- openid存在:登录,返回用户信息
- openid不存在:注册,将openid存入数据库并返回用户信息
public LoginUserVO WeChatLogin(String appid, String secret, String code, HttpServletRequest request) {
// 获取session_key和openid
String result = RequestUtils.getOpenIdByCode(appid, secret, code);
System.out.println("result:" + result);
// 提取openid
String openid = new JSONObject(result).getStr("openid");
// 这里是自己封装的方法,流程是如果openid为空则抛异常
ThrowUtils.throwIf(openid == null, ErrorCode.NOT_FOUND_ERROR, "openid为空");
// 查询openid是否存在
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("openid", openid);
User oldUser = this.baseMapper.selectOne(queryWrapper);
// openid不存在
if (oldUser == null) {
// 添加用户
User user = new User();
user.setOpenid(openid);
user.setPhone("手机号未填写");
user.setUserName("默认用户");
boolean saveResult = this.save(user);
if (!saveResult) {
// 这里也是自己封装的方法,流程是抛自定义异常
throw new BusinessException(ErrorCode.SYSTEM_ERROR, "注册失败,数据库错误");
}
// 记录用户的登录态
request.getSession().setAttribute(USER_LOGIN_STATE, user);
return getLoginUserVO(user);
}
// 记录用户的登录态
request.getSession().setAttribute(USER_LOGIN_STATE, oldUser);
// 用户存在,返回用户数据
return getLoginUserVO(oldUser); // 自己封装的方法,返回脱敏的用户数据
}
前端代码
uniapp框架
<template>
<view>
<button class="loginbutton" @click="login">微信一键登录</button>
</view>
</template>
<script setup lang="ts">
const login = () => {
uni.login({
provider: 'weixin', //使用微信登录
success: function (loginRes) {
if (loginRes.code !== null) {
console.log("获取code:" + loginRes.code)
loginUser(loginRes.code);
} else {
console.log("code为空");
}
}
})
}
const loginUser = (code: any) => {
uni.request({
url: "http://localhost:8066/api/wechat/login",
method: 'POST',
data: {
code: code,
},
success: (res : any) => {
//每次登录时清楚缓存
uni.removeStorageSync('JSESSIONID');
// 保存Cookie到Storage
uni.setStorageSync("JSESSIONID", res.header['Set-Cookie'])
if (res.data.code === 1) {
uni.switchTab({
url: "/pages/index/index"
})
} else {
console.log(res);
}
}
})
}
</script>
<style>
</style>
热门相关:亿万盛宠只为你 名门天后:重生国民千金 朕是红颜祸水 自由夫人 女教授的隐秘魅力