微信登录

原理

案例

服务端

@RestController
@RequestMapping("/api")
@Api(tags = "微信登录接口")
public class WechatController {

    @Autowired
    private IUserService userService;

    @ApiOperation("认证")
    @GetMapping("/login")
    public ResponseEntity<?> wechatLogin(@RequestParam String code) throws JSONException {
        String appId = "你的appId";
        String secret = "你的secret";
        String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appId + "&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code";

        RestTemplate restTemplate = new RestTemplate();
        String response = restTemplate.getForObject(url, String.class);

        JSONObject jsonObject = new JSONObject(response);
        String openid = jsonObject.getString("openid");
        String sessionKey = jsonObject.getString("session_key");
        User user = new User();
        user.setOpenId(openid);
        return ResponseEntity.ok(user);
    }

    @ApiOperation("保存用户信息")
    @PostMapping("/saveUserInfo")
    public ResponseEntity<?> saveUserInfo(@RequestBody User user) {
        // 根据openid查找用户
        User foundUser = userService.getOne(new QueryWrapper<User>()
                .eq("open_id", user.getOpenId()));
        if (foundUser != null) {
            // 更新用户信息
            foundUser.setNickname(user.getNickname());
            foundUser.setAvatar(user.getAvatar());
            userService.updateById(user);
            return ResponseEntity.ok("用户信息更新成功");
        } else {
//            新增用户
            userService.save(user);
            return ResponseEntity.badRequest().body("用户不存在");
        }
    }
}

查询用户是否存在

public interface IUserService extends IService<User> {

    User findByOpenid(String openid);
}

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {


    @Autowired
    UserMapper userMapper;

    @Override
    public User findByOpenid(String openid) {
        return userMapper.selectOne(new QueryWrapper<User>()
                .eq("open_id", openid));
    }
}

用户实体

@Getter
@Setter
@TableName("tb_user")
public class User implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 用户ID
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    /**
     * 昵称
     */
    private String nickname;

    /**
     * 唯一id
     */
    private String openId;

    /**
     * 头像
     */
    private String avatar;


}

对应表结构

-- ----------------------------
-- Table structure for tb_user
-- ----------------------------
DROP TABLE IF EXISTS `tb_user`;
CREATE TABLE `tb_user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户ID',
  `nickname` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '昵称',
  `open_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '唯一id',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '头像',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 21 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

小程序端

检查用户状态：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 在页面加载时检查用户登录状态
    wx.getStorage({
      key:'openid',
      success(res){
        console.log(res.data)
      }
    })
    
    this.checkLoginStatus();
  },

  checkLoginStatus() {
    // 检查用户是否已登录
    const userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      console.log('已经登录')
      console.log('从本地存储读取的用户信息:', wx.getStorageSync('userInfo'));
      this.setData({
        userInfo:userInfo
      })
      this.setData({
        isLoggedIn: true,
        userInfo: userInfo
      });
    } else {
      console.log('未登录')
      this.setData({
        isLoggedIn: false
      });
      this.promptLogin();
    }
  },
  promptLogin() {
    wx.showModal({
      title: '未登录',
      content: '您尚未登录，是否授权登录？',
      confirmText: '授权登录',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          this.userLogin();
        } else {
          wx.showToast({
            title: '您取消了登录',
            icon: 'none'
          });
        }
      }
    });
  },

登录请求发起：

  userLogin() {
    // 先获取用户信息
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (profileRes) => {
        // 保存用户信息到本地存储
        wx.setStorageSync('userInfo', profileRes.userInfo);
        wx.setStorageSync('demo', '123');
        this.setData({
          userInfo:profileRes.userInfo
        })
        // 获取用户信息成功后，再进行登录
        wx.login({
          success: (loginRes) => {
            wx.request({
              url: `${config.baseURL}/api/login`,
              method: 'GET',
              data: {
                code: loginRes.code
              },
              success: (data) => { // 使用箭头函数
                if (data.statusCode === 200) {
                  // 保存openid
                  console.log(data.data.openId)
                  wx.setStorageSync('openId', data.data.openId)
                  this.setData({
                    openid:data.data.openId
                  })
                  wx.showToast({
                    title: '登录成功！',
                  })
                  // 提交用户信息
                  wx.request({
                    url: `${config.baseURL}/api/saveUserInfo`,
                    method: 'POST',
                    data: {
                      openId: data.data.openId,
                      nickname: this.data.userInfo.nickName,
                      avatar: this.data.userInfo.avatarUrl,
                    },
                    success: (saveRes) => {
                      console.log('用户信息提交成功:', saveRes);
                    },
                    fail: (saveErr) => {
                      console.error('用户信息提交失败:', saveErr);
                    }
                  });
                }
              },
              fail: (loginErr) => {
                console.error('登录失败:', loginErr);
              }
            });
          },
          fail: (loginErr) => {
            console.error('wx.login 失败:', loginErr);
          }
        });
      },
      fail: (profileErr) => {
        console.error('获取用户信息失败:', profileErr);
      }
    });
  },

效果