若依整合 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() 方法。
<el-button @click="mayun()">码云登陆</el-button>
- mayun 方法的实现
当用户点击 Gitee 登录按钮时,前端会发起一个请求到后端,获取授权信息。
mayun() {
loginMayun().then(res => {
Cookies.set("user-uuid", res.uuid);
console.log(res);
location.href = res.authorize; // 跳转到 Gitee 授权页面
});
},
- 创建 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>
- 更新路由配置
在路由配置中加入回调路径 /callback。
{
path: '/callback',
component: (resolve) => require(['@/views/callback'], resolve),
hidden: true
},
- 添加 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";
});
});
},
- 在 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
});
}
第二步:后端部分
- 创建 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());
}
- 创建 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;
}
- 创建业务层 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);
}
- 修改 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 登录,若依系统提供了更加便捷的登录方式,提升了用户体验。