若依整合 Gitee 登录

文章目录

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

需求提出

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

应用场景

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

解决思路

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

注意事项

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

完整代码

第一步：前端部分

在 login.vue 中添加 Gitee 登录按钮
首先，在登录页面中添加 Gitee 登录按钮，点击后触发 mayun() 方法。

html 复制代码

<el-button @click="mayun()">码云登陆</el-button>

mayun 方法的实现
当用户点击 Gitee 登录按钮时，前端会发起一个请求到后端，获取授权信息。

javascript 复制代码

mayun() {
  loginMayun().then(res => {
    Cookies.set("user-uuid", res.uuid);
    console.log(res);
    location.href = res.authorize; // 跳转到 Gitee 授权页面
  });
},

创建 callback.vue 用于处理回调逻辑
创建一个 callback.vue 页面来处理 Gitee 登录后的回调，将授权信息传递到后端进行登录。

html 复制代码

<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>

更新路由配置
在路由配置中加入回调路径 /callback。

js 复制代码

{
    path: '/callback',
    component: (resolve) => require(['@/views/callback'], resolve),
    hidden: true
},

添加 LoginByGitee 方法到 user.js
在 user.js 中处理 Gitee 登录逻辑，接收从前端传来的授权信息，并生成用户 Token。

js 复制代码

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";
    });
  });
},

在 login.js 中定义 Gitee 登录的 API 请求
在 login.js 文件中，定义前端与后端交互的接口。

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
  });
}

第二步：后端部分

创建 Gitee 登录接口
在后端创建 /mayunLogin 和 /loginByGitee 两个接口。第一个接口用于获取 Gitee 授权信息，第二个接口用于处理 Gitee 登录。

java 复制代码

@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());
}

创建 loginByGitee 接口
该接口用于接收前端传来的授权信息并登录。

java 复制代码

@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;
}

创建业务层 loginByOtherSource 方法
在 SysLoginService.java 中，获取 Gitee 用户信息并进行登录或注册。

java 复制代码

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);
}

修改 SysUserMapper.xml 以支持源字段

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 登录，若依系统提供了更加便捷的登录方式，提升了用户体验。