微信小程序官方登录流程图
主要的流程就是调用wx.getUserProfile向微信服务器发送请求获取code和其他的一些信息，然后再通过wx.login向我们的后台发送请求获取session_key和openid等其他信息
个人实现登录流程
1️⃣首先去我们的微信公众号平台拿到AppId和AppSecret。等一下我们会用到😉
2️⃣数据库设计
CREATE TABLE `user` (
`pk_id` bigint(20) NOT NULL COMMENT '主键',
`nickname` varchar(50) DEFAULT NULL COMMENT '用户昵称',
`service_man_id` bigint(20) DEFAULT NULL,
`avatarUrl` varchar(200) DEFAULT NULL COMMENT '用户头像',
`openid` varchar(50) DEFAULT NULL,
`unionid` varchar(50) DEFAULT NULL COMMENT '用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
`update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`pk_id`) USING BTREE,
UNIQUE KEY `user_unionid_uindex` (`unionid`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;
这里service_man_id和unioinid可以不用
3️⃣Springboot后端
3.1 将我们刚才从微信公众号平台获取到的appld定义一个常量类
package com.ruoyi.gas.constant;
/**
* @Description 系统常量
* @Author TuNan
* @Date 2023/10/15
*/
public class SystemConstant {
/**
* 应用唯一标识，在微信开放平台提交应用审核通过后获得
*/
public static final String APPLETS_APPID="wx98935fbf9774bf5a";
/**
* 应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
*/
public static final String APPLETS_SECRET ="adbecc45d036d4ba52aab8285c159216";
}
3.2实体类
package com.ruoyi.gas.domain;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Getter;
import lombok.Setter;
import lombok.experimental.Accessors;
import java.io.Serializable;
/**
* 移动端用户对象 gas_xcx_user
*
* @author TuNan
* @date 2023-09-17
*/
@Getter
@Setter
@TableName("user")
@Accessors(chain = true)
public class User implements Serializable {
private static final long serialVersionUID = 1L;
@TableId("pk_id")
private Long pkId;
/**
* 用户昵称
*/
@TableField("nickname")
private String nickname;
/**
* 用户头像
*/
@TableField("avatarUrl")
private String avatarUrl;
/**
* 用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。
*/
@TableField("unionid")
private String unionId;
@TableField("openid")
private String openid;
private Long ServiceManId;
}
3.3 controller层
package com.ruoyi.gas.controller;
import com.ruoyi.gas.domain.dto.UserDTO;
import com.ruoyi.gas.domain.vo.ReWxUserInfoVO;
import com.ruoyi.gas.service.UserService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.Map;
/**
* <p>
* 前端控制器
* </p>
*
* @author TuNan
* @since 2023/10/13
*/
@RestController
@RequestMapping("/gas/user")
public class UserController {
@Resource
private UserService userService;
/**
* 微信小程序登录
*
* @param requestData 请求参数
* @return ReWxUserInfoVO
*/
@PostMapping("/getUserLoginByApplets")
@SuppressWarnings("unchecked") // 用于抑制编译器产生警告信息。
public ReWxUserInfoVO getUserLoginByApplets(@RequestBody Map<String, Object> requestData) {
String code = (String) requestData.get("code");
Map<String, Object> userMap = (Map<String, Object>) requestData.get("user");
UserDTO userDTO = new UserDTO();
userDTO.setAvatarUrl((String) userMap.get("avatarUrl"));
userDTO.setCity((String) userMap.get("city"));
userDTO.setCountry((String) userMap.get("country"));
userDTO.setGender((Integer) userMap.get("gender"));
userDTO.setLanguage((String) userMap.get("language"));
userDTO.setNickName((String) userMap.get("nickName"));
System.out.println("userDTO = " + userDTO);
return userService.loginByWxApplets(code , userDTO);
}
}
3.4 服务层及实现
package com.ruoyi.gas.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.ruoyi.gas.domain.User;
import com.ruoyi.gas.domain.dto.UserDTO;
import com.ruoyi.gas.domain.vo.ReWxUserInfoVO;
/**
* <p>
* 服务类
* </p>
*
* @author TuNan
* @since 2023-09-18
*/
public interface UserService extends IService<User> {
/**
* 微信登录 小程序版
*/
ReWxUserInfoVO loginByWxApplets(String code, UserDTO userDTO);
}
package com.ruoyi.gas.service.impl;
import cn.dev33.satoken.stp.StpUtil;
import cn.hutool.core.bean.BeanUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.ObjectUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.common.enums.DeviceType;
import com.ruoyi.common.helper.LoginHelper;
import com.ruoyi.gas.domain.User;
import com.ruoyi.gas.domain.dto.UserDTO;
import com.ruoyi.gas.domain.ro.AppletsWxLoginRO;
import com.ruoyi.gas.domain.vo.ReWxUserInfoVO;
import com.ruoyi.gas.mapper.UserMapper;
import com.ruoyi.gas.service.UserService;
import com.ruoyi.gas.utils.WxLoginUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
/**
* <p>
* 服务实现类
* </p>
*
* @author xiahaike
* @since 2023/10/13
*/
@Service
@Slf4j
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
@Override
public ReWxUserInfoVO loginByWxApplets(String code, UserDTO userDTO) {
// 1.通过code 获取到用户的微信信息
AppletsWxLoginRO getWxUserInfoRO = WxLoginUtil.toAppletsWxLogin(code);
// 2.数据库对比 unionid 是否已有信息 如果没有就保持数据库
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
// 3.通过查询pk_id 索引优化查询 无需回表查询用户信息 索引 openid
queryWrapper.eq("openid", getWxUserInfoRO.getOpenid());
User user = getOne(queryWrapper);
log.info("数据库查询用户是否已有账号==空则没有==={}====", user);
// 4.如果用户不存在则创建用户
if (ObjectUtil.isEmpty(user)) {
long userId = IdUtil.getSnowflakeNextId();
String nickName = userDTO.getNickName();
save(new User().setPkId(userId).setNickname(nickName).setOpenid(getWxUserInfoRO.getOpenid()).setAvatarUrl(userDTO.getAvatarUrl()).setServiceManId(0L));
LoginUser loginUser = BeanUtil.toBean(new User().setPkId(userId).setNickname(nickName), LoginUser.class);
loginUser.setUserType("sys_user");
loginUser.setUserId(IdUtil.getSnowflakeNextId());
LoginHelper.loginByDevice(loginUser, DeviceType.XCX);
return new ReWxUserInfoVO().setPkId(userId).setNickname(nickName)
.setSession_key(getWxUserInfoRO.getSession_key()).setOpenid(getWxUserInfoRO.getOpenid())
.setToken(StpUtil.getTokenValue()).setAvatarUrl(userDTO.getAvatarUrl()).setServiceManId(0L);
}
// 5.如果用户存在则直接登录
LoginUser loginUser = BeanUtil.toBean(user, LoginUser.class);
loginUser.setUserType("sys_user");
loginUser.setUserId(IdUtil.getSnowflakeNextId());
LoginHelper.loginByDevice(loginUser, DeviceType.XCX);
return new ReWxUserInfoVO().setPkId(user.getPkId()).setNickname(user.getNickname())
.setAvatarUrl(user.getAvatarUrl()).setSession_key(getWxUserInfoRO.getSession_key())
.setOpenid(getWxUserInfoRO.getOpenid()).setToken(StpUtil.getTokenValue())
.setServiceManId(user.getServiceManId());
}
}
3.5微信登录工具包
package com.ruoyi.gas.utils;
import cn.hutool.core.text.StrFormatter;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONUtil;
import com.ruoyi.gas.Enum.WxApiType;
import com.ruoyi.gas.constant.SystemConstant;
import com.ruoyi.gas.domain.ro.AppletsWxLoginRO;
import lombok.extern.slf4j.Slf4j;
/**
* @Description 微信登录工具包
* @Author TuNan
* @Date 2023/10/16
*/
@Slf4j
public class WxLoginUtil {
/**
*微信登录
* @param code 前端请求获取=>微信code
* @return void
* @author zhangjunrong
* @date 2022/12/19 20:16
*/
public static AppletsWxLoginRO toAppletsWxLogin(String code){
//1.通过前端给的code获取openid和access_token还有unionid
String getTokenOpenid = StrFormatter.format(WxApiType.APPLETS_GET_TOKEN_OPENID.getValue(), SystemConstant.APPLETS_APPID,SystemConstant.APPLETS_SECRET, code);
String data = HttpUtil.get(getTokenOpenid);
log.info("微信获取获取openid和unionid,返回结果======{}=====",data);
//json=>bean
//todo 获取用户信息失败 抛异常
return JSONUtil.toBean(data, AppletsWxLoginRO.class);
}
}
3.6 Ro及Vo
package com.ruoyi.gas.domain.ro;
import lombok.Data;
/**
* @Description 微信用户基础信息
* @Author TuNan
* @Date 2023/10/16
*/
@Data
public class WxUserInfoRO {
/**
* 用户昵称
*/
private String nickname;
/**
* 用户头像
*/
private String avatarUrl;
/**
* 用户微信统一标识
*/
private String unionid;
private String session_key;
private String openid;
}
package com.ruoyi.gas.domain.ro;
import lombok.Data;
/**
* @Description TODO
* @Author TuNan
* @Date 2023/09/18
*/
@Data
public class AppletsWxLoginRO {
/**
*普通用户标识，对该公众帐号唯一
*/
private String openid;
/**
*用户在开放平台的唯一标识符
*/
private String unionid;
private String session_key;
}
package com.ruoyi.gas.domain.vo;
import lombok.Data;
import lombok.experimental.Accessors;
/**
* @Description 返回前端微信个人信息
* @Author TuNan
* @Date 2023/9/17 15:27
*/
@Data
@Accessors(chain = true)
public class ReWxUserInfoVO {
/**
* 用户id
*/
private Long pkId;
/**
* 用户昵称
*/
private String nickname;
/**
* 用户头像
*/
private String avatarUrl;
private String unionid;
private String session_key;
private String openid;
private String token;
private Long ServiceManId;
}
以下就是我们后端的所有代码，接下来是小程序端的代码
4️⃣小程序实现
4.1首先我们在app.js中定义全局变量
// app.js
App({
globalData: {
token: '',
openid: null,
sessionKey: null,
serviceManId: 0,
pkId:0, // 用于判断用户是否登录
}
})
4.2 然后是我们在主页调用wx.logind的js代码
const app = getApp()
// 点击登录按钮
login() {
if (this.data.pkId != 0) {
Toast.fail("您已登录，请勿重复提交")
} else {
console.log('执行了登录操作');
wx.getUserProfile({
desc: 'Wexin',
// 这里应该是向微信发送请求获取用户名和头像
success: (res) => {
this.setData({
userInfo: res.userInfo
})
let user = this.data.userInfo // user里面保存从微信获取的信息（用户名和头像）
// 向后台发送请求 将code、用户头像、用户名一起发送至后台
console.log(user)
wx.login({
success: (res) => {
console.log(res)
const code = res.code;
wx.request({
url: baseUrl + '/gas/user/getUserLoginByApplets',
method: "POST",
data: {
user,
code
},
success: (res) => {
// 后端返回的数据
var Mydata = res.data
// 将从服务器获取的token、session_key等保存到globalData中
app.globalData.token = Mydata.token
app.globalData.session_key = Mydata.session_key
app.globalData.serviceManId = Mydata.serviceManId
app.globalData.openid = Mydata.openid
app.globalData.pkId = Mydata.pkId
// 将serviceId和pkid保存到当前页面中
this.setData({
serviceManId: app.globalData.serviceManId,
pkId: res.data.pkId
});
}
})
},
})
}
})
}
},
到此我们所有流程就结束了🤞，出现以上效果说明就成功登录了😉
