如何使用 Angular -> Spring Boot Oauth2 -> Keycloak 获取 keycloak 令牌
Posted
技术标签:
【中文标题】如何使用 Angular -> Spring Boot Oauth2 -> Keycloak 获取 keycloak 令牌【英文标题】:How to get keycloak token using Angular -> Spring Boot Oauth2 -> Keycloak 【发布时间】:2021-08-11 08:51:41 【问题描述】:我有一个 Angular 应用程序作为前端,Spring Boot 作为后端技术,作为授权服务器,我使用的是 keycloak 12.0.4。
我不想将 keycloak 适配器用于 angular 和 spring boot,我想使用普通的 oauth2 oauth/token 以便我可以更改我的授权服务器,例如从 keycloak 到 okta 而无需大量更改代码。
我可以使用 postman 直接点击 keycloak token_endpoint 并通过传递用户名、密码、client_credentials 来获取令牌
http://localhost:8080/auth/realms/dev/protocol/openid-connect/token
但是如果我点击 token_endpoint 使用 angular,那么我会得到一个不同的 CROS 问题,我在 angular 中尝试了 proxy.config.json 并且还在 keycloak 中设置了 web-origin * 但这不起作用但基本上我不想要直接点击keycloak我想通过spring boot oauth2
CORS 已阻止从源“http://127.0.0.1:4200”访问“http://127.0.0.1:8080/auth/realms/dev/protocol/openid-connect/token”处的 XMLHttpRequest策略:请求的资源上不存在“Access-Control-Allow-Origin”标头。 login.component.ts:37 .
下面是我的 application.yml 文件
server:
port: 8181
spring:
application:
name: cloudgateway
security:
oauth2:
client:
registration:
keycloak:
client-id: myadmin-service
client-secret: 4c7388e6-a8d9-403a-a5d4-416be4163b93
authorization-grant-type: authorization_code
redirect-uri: "baseUrl/login/oauth2/code/registrationId"
provider: keycloak
provider:
keycloak:
token-uri: http://localhost:8080/auth/realms/dev/protocol/openid-connect/token
issuer-uri: http://localhost:8080/auth/realms/dev
authorization-uri: http://localhost:8080/auth/realms/dev/protocol/openid-connect/auth
user-info-uri: http://localhost:8080/auth/realms/dev/protocol/openid-connect/userinfo
resourceserver:
jwt:
issuer-uri: http://localhost:8080/auth/realms/dev
jwk-set-uri: http://localhost:8080/auth/realms/dev/protocol/openid-connect/certs
Pom.xml
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-config</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-gateway</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-hystrix</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-oauth2-resource-server</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
我在上面的 spring boot 上缺少什么配置。
【问题讨论】:
【参考方案1】:您可以配置WebSecurity
以使用JwtAuthenticationToken
(示例here 和there)填充安全上下文,但这种实现相当糟糕。
我编写了一个可移植的 OIDC Authentication
实现,其接口几乎与 KeycloakAuthenticationToken
一样丰富,但与任何 OpenID Connect 授权服务器兼容:OidcAuthentication
(示例 here 和 there)
在 Angular 中,我使用 angular-auth-oidc-client,但 angular-oauth2-oidc 也应该没问题。
附:
这个 git repo 还包含注释,可以使用您选择的 Authentication
实现轻松填充 JUnit 安全上下文(请参阅 @WithMockOidcAuth
、@WithMockJwtAuth
或 @WithMockKeycloakAuth
)
【讨论】:
以上是关于如何使用 Angular -> Spring Boot Oauth2 -> Keycloak 获取 keycloak 令牌的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Spring Security + Angular 登录/验证
如何使用 Angular + Spring + JSON 自定义登录/身份验证
如何使用 Angular 消除 Spring Boot 中的 CORS 错误? [复制]