当前位置: 首页 > article >正文

若依整合 Gitee 登录

文章目录

  • 需求提出
  • 应用场景
  • 解决思路
  • 注意事项
  • 完整代码
    • 第一步:前端部分
    • 第二步:后端部分
  • 运行结果

需求提出

在现代应用中,集成第三方登录是提升用户体验的重要功能。本文将介绍如何在 若依(RuoYi)项目中集成 Gitee 登录。通过这一功能,用户可以使用 Gitee 账号快速登录系统,而不必创建新的账户,提高了便捷性和安全性。

应用场景

集成 Gitee 登录适用于需要支持 Git 仓库管理、开发协作和代码托管的企业级系统。通过集成 Gitee 登录,用户可以通过已有的 Gitee 账号直接访问后台管理系统,提升了用户注册和登录的便捷性。

解决思路

  1. 在前端页面添加 Gitee 登录按钮,并触发 Gitee 登录流程。
  2. 前端接收 Gitee 登录的授权信息,通过回调地址获取认证 token。
  3. 后端使用 Gitee 授权的 API 获取用户信息,并进行登录认证和注册。
  4. 后端生成用户 Token,并返回给前端用于后续的 API 调用。

注意事项

  1. 在 Gitee 登录集成过程中,需注意前端与后端的接口匹配,并确保回调 URL 配置正确。
  2. 为了支持第三方登录,后端需要在数据库中新增 source 字段,以便区分不同来源的用户。
  3. 请确保 Gitee 开发者账号和应用配置正确,尤其是 clientId 和 clientSecret 的配置。

完整代码

第一步:前端部分

  1. 在 login.vue 中添加 Gitee 登录按钮
    首先,在登录页面中添加 Gitee 登录按钮,点击后触发 mayun() 方法。
<el-button @click="mayun()">码云登陆</el-button>
  1. mayun 方法的实现
    当用户点击 Gitee 登录按钮时,前端会发起一个请求到后端,获取授权信息。
mayun() {
  loginMayun().then(res => {
    Cookies.set("user-uuid", res.uuid);
    console.log(res);
    location.href = res.authorize; // 跳转到 Gitee 授权页面
  });
},
  1. 创建 callback.vue 用于处理回调逻辑
    创建一个 callback.vue 页面来处理 Gitee 登录后的回调,将授权信息传递到后端进行登录。
<template>
  <div v-loading="loading" style="height: 100%;width: 100%;">
    正在加载中...
  </div>
</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "loginByGitee",
  data() {
    return {
      loading: true
    };
  },
  mounted() {
    this.loading = true;
    console.log("uuid", Cookies.get("user-uuid"));
    const formBody = {
      uuid: Cookies.get("user-uuid"),
      code: this.$route.query.code
    };
    this.$store.dispatch("LoginByGitee", formBody).then(() => {
      this.$router.push({ path: this.redirect || "/" }).catch(() => {});
    }).catch(() => {
      this.loading = false;
    });
  }
};
</script>
  1. 更新路由配置
    在路由配置中加入回调路径 /callback。
{
    path: '/callback',
    component: (resolve) => require(['@/views/callback'], resolve),
    hidden: true
},
  1. 添加 LoginByGitee 方法到 user.js
    在 user.js 中处理 Gitee 登录逻辑,接收从前端传来的授权信息,并生成用户 Token。
LoginByGitee({ commit }, body) {
  return new Promise((resolve, reject) => {
    loginByGitee(body.code, body.uuid).then(res => {
      setToken(res.token);
      commit('SET_TOKEN', res.token);
      resolve();
    }).catch(error => {
      reject(error);
      location.href = "/login";
    });
  });
},
  1. 在 login.js 中定义 Gitee 登录的 API 请求
    在 login.js 文件中,定义前端与后端交互的接口。
// 码云登陆
export function loginMayun() {
  return request({
    url: '/mayunLogin',
    method: 'get',
    headers: { isToken: false }
  });
}

export function loginByGitee(code, uuid) {
  const data = { code, source: "Gitee", uuid };
  return request({
    url: '/loginByGitee',
    method: 'post',
    headers: { isToken: false },
    data: data
  });
}

第二步:后端部分

  1. 创建 Gitee 登录接口
    在后端创建 /mayunLogin 和 /loginByGitee 两个接口。第一个接口用于获取 Gitee 授权信息,第二个接口用于处理 Gitee 登录。
@GetMapping("/mayunLogin")
public AjaxResult mayunLogin() throws Exception {
    AjaxResult result = new AjaxResult();
    AuthRequest authRequest = getAuthRequest();
    String uuid = IdUtils.fastUUID();
    String authorize = authRequest.authorize(uuid);
    result.put("uuid", uuid);
    result.put("authorize", authorize);
    return result;
}

private AuthRequest getAuthRequest() {
    return new AuthGiteeRequest(AuthConfig.builder()
            .clientId("")
            .clientSecret("")
            .redirectUri("http://localhost:80/callback")
            .build());
}
  1. 创建 loginByGitee 接口
    该接口用于接收前端传来的授权信息并登录。
@PostMapping("/loginByGitee")
public AjaxResult loginByGitee(@RequestBody LoginByOtherSourceBody loginByOtherSourceBody) {
    if (StringUtils.isBlank(loginByOtherSourceBody.getSource())) {
        loginByOtherSourceBody.setSource("gitee");
    }
    String token = loginService.loginByOtherSource(loginByOtherSourceBody.getCode(), loginByOtherSourceBody.getSource(), loginByOtherSourceBody.getUuid());
    AjaxResult ajax = AjaxResult.success();
    ajax.put(Constants.TOKEN, token);
    return ajax;
}
  1. 创建业务层 loginByOtherSource 方法
    在 SysLoginService.java 中,获取 Gitee 用户信息并进行登录或注册。
public String loginByOtherSource(String code, String source, String uuid) {
    AuthRequest authRequest = new AuthGiteeRequest(AuthConfig.builder()
            .clientId("")
            .clientSecret("")
            .redirectUri("http://localhost:80/callback")
            .build());
    AuthResponse<AuthUser> login = authRequest.login(AuthCallback.builder().state(uuid).code(code).build());
    if (login.getCode() != 2000) {
        throw new CustomException("登录失败");
    }
    SysUser sysUser = sysUserMapper.checkUserIsExist(login.getData().getUsername(), login.getData().getNickname(), source);
    if (sysUser == null) {
        sysUser = new SysUser();
        sysUser.setUserName(login.getData().getUsername());
        sysUser.setNickName(login.getData().getNickname());
        sysUser.setEmail(login.getData().getEmail());
        sysUser.setAvatar(login.getData().getAvatar());
        sysUser.setSource(source);
        sysUserMapper.insertUser(sysUser);
    }
    LoginUser user = new LoginUser();
    user.setUser(sysUser);
    return tokenService.createToken(user);
}
  1. 修改 SysUserMapper.xml 以支持源字段
<result property="source" column="source"/>
<select id="checkUserIsExist" resultType="com.ruoyi.common.core.domain.entity.SysUser">
    select *
    from sys_user
    where user_name = #{userName}
    and nick_name = #{nickName}
    and source = #{source}
</select>

运行结果

通过以上步骤,若依系统成功集成了 Gitee 登录。用户可以在登录界面通过 Gitee 账号进行授权登录,后端完成用户认证并生成 Token,最终将用户重定向到首页。

前端:用户点击 Gitee 登录按钮,跳转到 Gitee 授权页面,授权成功后跳转回系统并完成登录。

后端:通过 Gitee 授权的 code 和 uuid 获取用户信息,进行登录或注册,生成 Token 并返回给前端。

通过集成 Gitee 登录,若依系统提供了更加便捷的登录方式,提升了用户体验。


http://www.kler.cn/a/457292.html

相关文章:

  • 纯前端实现将pdf转为图片(插件pdfjs)
  • 基于JSP的健身俱乐部会员管理系统的设计与实现【源码+文档+部署讲解】
  • 2、redis的持久化
  • DevOps流程CICD之Jenkins使用操作
  • Python 青铜宝剑十六维,破医疗数智化难关(上)
  • 1、Jmeter、jdk下载与安装
  • BGP路由常用的属性
  • C语言-详细讲解-给定数字n,生成共有n个括号的所有正确的形式
  • Stream `Collectors.toList()` 和 `Stream.toList()` 的区别(Java)
  • python 不应该将列表作为函数的默认参数
  • 工业大数据分析算法实战-day14
  • 【每日学点鸿蒙知识】节点析构问题、区分手机和pad、 Navigation路由问题、Tabs组件宽度、如何监听Map
  • Sql Sqserver 相关知识总结
  • 【每日学点鸿蒙知识】Web组件加载空白、C++回调ArkTS、底部横幅隐藏显示、构建warn过多、ArkTS与C++实时通信
  • 深入了解SpringIoc(续篇)
  • Docmatix:突破性的文档视觉问答数据集
  • 从头开始学SpringMVC—01MVC介绍和入门案例
  • ​Python数据序列化模块pickle使用
  • 如何快速又安全的实现端口转发【Windows MAC linux通用】
  • yolov8算法及其改进
  • Golang的文件加密工具
  • Word批量更改题注
  • Pytorch | 利用DTA针对CIFAR10上的ResNet分类器进行对抗攻击
  • 问题-01
  • 学习C++:数据类型
  • Jmeter录制https请求