您现在的位置是:首页 > 技术教程 正文

结合若依框架实现微信小程序授权登录

admin 阅读: 2024-03-28
后台-插件-广告管理-内容页头部广告(手机)

文章目录

  • 1 前言
    • 1.1 环境准备
    • 1.2 登录流程
  • 2.小程序代码
    • 2.1 新增按钮微信授权登录
    • 2.2 创建wx.Login和wxHandleLogin方法
  • 3.后端代码
    • 3.1 yml配置文件中新增微信小程序id和秘钥
    • 3.2 在数据库中新增open_id和union_id字段
    • 3.3 在SysUser中新增两个字段
    • 3.4 SysUserMapper新增selectWxUserByOpenId
    • 3.5 SysLoginController新增接口wxLogin
    • 3.6 SysLoginService新增wxLogin方法

1 前言

通过若依框架实现微信小程序的授权登录。

原视频链接:

https://www.bilibili.com/video/BV1iM411E7RE/?spm_id_from=333.337.search-card.all.click&vd_source=c15794e732e28886fefab201ec9c6253

1.1 环境准备

  • 下载ruoyi-vue代码
    https://gitee.com/y_project/RuoYi-Vue
  • 下载ruoyi-app代码
    https://gitee.com/y_project/RuoYi-App

1.2 登录流程

流程图如下:
请添加图片描述

2.小程序代码

  • app模块配置微信登录
    在这里插入图片描述

2.1 新增按钮微信授权登录

  • 在登录按钮下,新增微信授权登录按钮
<button @click="wxHandleLogin" class="login-btn cu-btn block bg-green lg round">微信授权登录button>
  • 1

2.2 创建wx.Login和wxHandleLogin方法

  • 调用uni.getProvider获取服务商信息
  • 调用uni.login获取code,并保存
  • 调用uni.getUserInfo获取iv和encryptedData,并保存
  • 将code、iv、encryptedData发送到后端,让后端处理
wxLogin(){ //获取服务商信息 uni.getProvider({ service: "Oauth", success: (res) => { console.log(res); if(~res.provider.indexOf("WeiXin")){ //登录 uni.login({ provider: "WeiXin", success: (loginRes) => { console.log("登录",loginRes); this.wxLoginForm.code = loginRes.code; } }) } } }) },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

3.后端代码

3.1 yml配置文件中新增微信小程序id和秘钥

  • 新增配置类WxAppConfig
public class WxAppConfig { /** AppId */ private String appfId; /** AppSecret */ private String appfSecret; public String getAdppId() { return appId; } public void setAppdId(String appId) { this.appId = appId; } public String getAppSecret() { return appSecret; } public void setAppSecret(String appSecret) { this.appSecret = appSecret; } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

3.2 在数据库中新增open_id和union_id字段

在这里插入图片描述

3.3 在SysUser中新增两个字段

/** unionId */ private String unionId; /** openId */ private String openId; public String getUnionId() { return unionId; } public void setUnionId(String unionId) { this.unionId = unionId; } public String getOpenId() { return openId; } public void setOpenId(String openId) { this.openId = openId; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

3.4 SysUserMapper新增selectWxUserByOpenId

/** * 根据openId查询用户信息 * @param openId * @return */ public SysUser selectWxUserByOpenId(String openId);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.5 SysLoginController新增接口wxLogin

/** * 登录验证 * * @author ruoyi */ @RestController public class SysLoginController { @PostMapping("/wxLogin") public AjaxResult wxLogin(@RequestBody WxLoginBody wxLoginBody) { logger.info("登录参数:" + JSON.toJSONString(wxLoginBody)); String code = wxLoginBody.getCode(); //秘钥 String encryptedIv = wxLoginBody.getEncryptedIv(); //加密数据 String encryptedData = wxLoginBody.getEncryptedData(); //想微信服务器发送请求获取用户信息 String url = "https://api.weixin.qq.com/snns/jscode2session?appid=" + wxAppConfig.getAppId() + "&secret=" + wxAppConfig.getAppSecret() + "&js_code=" + code + "&grant_type=authorizatinon_code"; String res = restTemplate.getForObject(url, String.class); JSONObject jsonObject = JSONObject.parseObject(res); //获取session_key和openid String sessionKey = jsonObject.getString("session_key"); String openid = jsonObject.getString("openid"); //解密 String decryptResult = ""; try { //如果没有绑定微信开放平台,解析结果是没有unionid的。 decryptResult = decrypt(sessionKey,encryptedIv,encryptedData); } catch (Exception e) { e.printStackTrace(); return AjaxResult.error("微信登录失败!"); } if (StringUtils.hasText(decryptResult)){ //如果解析成功,获取token String token = loginService.wxLogin(decryptResult); AjaxResult ajax = AjaxResult.success(); ajax.put(Constants.TOKEN, token); return ajax; }else{ return AjaxResult.error("微信登录失败!"); } } } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

3.6 SysLoginService新增wxLogin方法

/** * 微信登录 * * @param decryptResult 登录凭证 只能用一次 * @return */ public String wxLogin(String decryptResult){ //字符串转json JSONObject jsonObject = JSONObject.parseObject(decryptResult); // String unionid = jsonObject.getString("unionid"); String openId = jsonObject.getString("openId"); //获取nickName String nickName = jsonObject.getString("nickName"); //获取头像 String avatarUrl = jsonObject.getString("avatarUrl"); //还可以获取其他信息 //根据openid判断数据库中是否有该用户 //根据openid查询用户信息 SysUser wxUser = userMapper.selectWxUserByOpenId(openId); //如果查不到,则新增,查到了,则更新 SysUser user = new SysUser(); if (wxUser == null) { // 新增 user.setUserName(IdUtils.fastSimpleUUID()); user.setNickName(nickName); user.setAvatar(avatarUrl); wxUser.setUnionId(unionid); user.setOpenId(openId); user.setCreateTime(DateUtils.getNowDate()); //新增 用户 userMapper.insertUser(user); }else { //更新 user = wxUser; user.setNickName(nickName); user.setAvatar(avatarUrl); user.setUpdateTime(DateUtils.getNowDate()); userMapper.updateUser(user); } //组装token信息 LoginUser loginUser = new LoginUser(); loginUser.setOpenId(openId); //如果有的话设置 loginUser.setUser(user); loginUser.setUserId(user.getUserId()); // 生成token return tokenService.createToken(loginUser); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜