如何在 Ruoyi-Vue-Pro 项目中集成 Gitee 码云 OAuth2 登录功能。主要步骤包括准备 Gitee 账号并创建应用获取凭证，修改数据库字段大小以存储原始用户信息，在 Java 后端枚举中新增 GITEE 类型，配置 application-local.yaml 中的客户端信息，在前端 constants.js 中添加登录图标，以及修改登录逻辑中的 redirect 参数和路由白名单。解决了回调地址不一致导致的报错问题。
这个过程就是 OAuth2 的 code 验证过程，ruoyi-vue-pro 已经支持。
这个比较简单，可以直接跳过。需要注册的访问 https://gitee.com/signup 进行注册，把下面的信息填完提交就可以了。
登录后点击【我的】-【设置/账号设置】
在左侧导航找到并点击【第三方应用】
点击右上方的【创建应用】填写应用信息。
这里需要注意【应用回调地址】要填写正确并与后端配置一致，否则无法通过。提交表单完成应用创建。
在应用详情页面右侧即可看到 client_id, client_secret。
否则获取到 Gitee 授权信息后数据库报错。
ALTER TABLE `ruoyi-vue-pro`.`system_social_user` MODIFY COLUMN `raw_user_info` varchar(4000) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '原始用户数据，一般是 JSON 格式' AFTER `avatar`;
ruoyi-vue-pro\yudao-module-system\yudao-module-system-api\src\main\java\cn\iocoder\yudao\module\system\enums\social\SocialTypeEnum.java
GITEE(10, "GITEE"),
复制 client_id, client_secret，将其配置到 ruoyi-vue-pro\yudao-server\src\main\resources\application-local.yaml 中如下位置：
justauth:
enabled: true
type: DINGTALK:
# 钉钉
client-id: dingaxxxxxxxxxxxxxxx
client-secret: dQQcXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
redirect-uri: http://localhost/social-login/20
ignore-check-redirect-uri: true
GITEE:
# gitee
client-id: 1abffccxxxxxxxxxxxxxxxxxxxxxxxxxx
client-secret: 6e77a8d0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
redirect-uri: http://127.0.0.1/social-login/10
ignore-check-redirect-uri: true
redirect-uri: http://127.0.0.1/social-login/10 必须与创建应用时填写的配置的一样，源码中是没有配置的，会提示没有正确配置回调地址，郁闷了好久
yudao-ui-admin-vue2\src\utils\constants.js 中新增码云登录，界面会新增一个可以点击登录的图标。
export const SystemUserSocialTypeEnum = {
DINGTALK: { title: "钉钉", type: 20, source: "dingtalk", img: "https://s1.ax1x.com/2022/05/22/OzMDRs.png", },
GITEE: { title: "码云", type: 10, source: "gitee", img: "https://gitee.com/static/images/logo-black.svg", },
WECHAT_ENTERPRISE: { title: "企业微信", type: 30, source: "wechat_enterprise", img: "https://s1.ax1x.com/2022/05/22/OzMrzn.png", }
}
yudao-ui-admin-vue2\src\views\login.vue 中找到函数 doSocialLogin，将 redirect 参数丢掉，因为这个参数会变，而 Gitee 中配置的回调地址不可变，如果两者不同回报错。
async doSocialLogin(socialTypeEnum) {
// 设置登录中
this.loading = true;
let tenant = false;
if (this.tenantEnable) {
await this.$prompt('请输入租户名称', "提示", { confirmButtonText: "确定", cancelButtonText: "取消" }).then(async ({value}) => {
await getTenantIdByName(value).then(res => {
const tenantId = res.data;
tenant = true
if (tenantId && tenantId >= 0) {
setTenantId(tenantId)
}
});
}).catch(() => {
// 取消登录按钮 loading 状态
this.loading = false;
return false
})
} else {
tenant = true
}
if(tenant){
// 计算 redirectUri
const redirectUri = location.origin + '/social-login?' + encodeURIComponent('type=' + socialTypeEnum.type );
(socialTypeEnum.).( {
.. = res.;
});
}
},
查看地址，发现就是这个 redirect 的问题。
ruoyi-vue-pro\yudao-module-system\yudao-module-system-biz\src\main\java\cn\iocoder\yudao\module\system\controller\admin\auth\AuthController.java 从这个类开始改，全部改掉就 ok 了，这里注意一下：
ruoyi-vue-pro\yudao-module-system\yudao-module-system-biz\src\main\java\cn\iocoder\yudao\module\system\service\social\SocialClientServiceImpl.java
public String getAuthorizeUrl(Integer socialType, Integer userType) {
// 获得对应的 AuthRequest 实现
AuthRequest authRequest = buildAuthRequest(socialType, userType);
// 生成跳转地址
String authorizeUri = authRequest.authorize(AuthStateUtils.createState());
// return HttpUtils.replaceUrlQuery(authorizeUri, "redirect_uri", redirectUri);
return authorizeUri;
}
E:\yudao\yudao-ui-admin-vue2\src\router\index.js 代码如下：
{ path: '/social-login/:type(\\d+)', component: (resolve) => require(['@/views/socialLogin'], resolve), hidden: true },
修改 yudao-ui-admin-vue2\src\views\socialLogin.vue，两处做替换
// this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
this.$router.push({ path: "/index" }).catch(()=>{});
修改路由拦截 yudao-ui-admin-vue2\src\permission.js 中找到 whiteList 后加入/social-login/ 的处理
// 没有 token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登录白名单，直接进入
next()
} else if (to.path.indexOf('/social-login/') !== -1) {
// 在免登录白名单，直接进入
next()
} else {
const redirect = encodeURIComponent(to.fullPath)
// 编码 URI，保证参数跳转回去后，可以继续带上
next(`/login?redirect=${redirect}`)
// 否则全部重定向到登录页
NProgress.done()
}
在登录页点击【码云图标】会提示输入租户名称，点击提交后会跳转进行登录。
首次登录会提示绑定系统中已有的账号，如下，输入后登录，以后登录就会自动跳转了。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online