ruoyi-vue接入keycloak

### Ruoyi-Vue 项目与 Keycloak SSO 单点登录集成 #### 背景介绍 Keycloak 是一款功能强大的开源身份认证和单点登录解决方案，支持多种协议（如 OAuth2 和 OpenID Connect）。通过将其与 RuoYi-Vue 进行集成，可以实现统一的身份管理和安全控制。 以下是关于如何将 RuoYi-Vue 项目与 Keycloak 集成的具体说明： --- #### 1. 准备工作 在开始之前，需完成以下准备工作： - **安装并配置 Keycloak**：下载并启动 Keycloak 实例[^3]。 - **创建 Realm 和 Client**：在 Keycloak 中新建一个 Realm 并注册一个新的 Client 应用程序。设置 `Access Type` 为 `confidential` 或其他适合选项，并记录下 `Client ID` 和 `Secret` 值。 - **RuoYi-Vue 环境准备**：确保已成功运行 RuoYi-Vue 项目，并能够正常访问前端页面[^4]。 --- #### 2. 后端调整 为了使后端兼容 Keycloak 的认证机制，需要修改以下几个方面： ##### (1) 添加依赖项 引入必要的 Maven 依赖来处理 JWT 解析以及 OAuth2 授权逻辑。例如，在 `pom.xml` 文件中加入如下内容[^2]: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-oauth2-resource-server</artifactId> </dependency> <!-- 如果需要额外的支持 --> <dependency> <groupId>com.nimbusds</groupId> <artifactId>nimbus-jose-jwt</artifactId> </dependency> ``` ##### (2) 修改 Security 配置类 更新 Spring Boot 安全框架中的配置文件以验证来自 Keycloak 的 Access Token。示例代码如下所示： ```java @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/oauth2/**").permitAll() // 放开 OAuth2 相关路径 .anyRequest().authenticated(); http.oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt); } } ``` ##### (3) 自定义 JwtDecoder Bean 为了让应用解析由 Keycloak 发放的 JSON Web Tokens (JWT)，可以通过自定义方式加载公钥资源。具体做法见下面片段： ```java @Bean public JwtDecoder jwtDecoder(RestTemplateBuilder restTemplateBuilder){ String jwkSetUri = "http://localhost:8080/auth/realms/{your-realm}/protocol/openid-connect/certs"; RestOperations restOperations = restTemplateBuilder.build(); JWKSource<SecurityContext> jwksSource = new RemoteJWKSet<>(jwkSetUri,restOperations); return new NimbusJwtDecoder(jwksSource); } ``` --- #### 3. 前端改造 对于 Vue.js 构建的前端部分，则主要集中在用户登录环节上做出相应改动。 ##### (1) 登录接口适配 利用 Axios 请求工具调用 `/loginSso` 方法发起 POST 请求至服务器端执行实际操作: ```javascript // user.js - 用户模块下的 API 封装函数 export function loginSso(queryParam) { return request({ url: '/loginSso', method: 'post', data: queryParam, }); } // 使用场景举例 const paramData = { username:"admin",password:"test@123"}; loginSso(paramData).then((response)=>{ console.log('Login Success:', response.data.token); }).catch(error=>{ alert(`Error occurred during Login:${error.message}`); }); ``` ##### (2) 替换默认表单提交行为 如果当前存在传统 HTML 表格形式的手动输入框设计，则建议替换为动态跳转到 Keycloak 提供的标准授权 URL 页面链接上去完成整个过程自动化程度更高一些[^1]. --- #### 4. 测试验证 最后一步就是进行全面的功能测试确认整体流程顺畅无误之后再部署上线正式环境当中去投入使用吧！ --- ###