我有一个基于 Docker compose
的系统,包含后端和前端组件。后端用 Python Flask
编写,并在多个 docker 容器中运行,前端用 TypeScript
和 Angular
编写。前端通过 Restful API 与后端通信。代理是使用 Nginx
创建的。但是Keycloak
Token验证在前端和后端之间不起作用。
docker-compose.yml
文件的KeyCloak
(和MySQL
)部分:
mysql:
image: mysql:5.7.31
ports:
- 9988:3306
volumes:
- keycloak_data:/var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: keycloak
MYSQL_USER: keycloak
MYSQL_PASSWORD: password
networks:
- auth_net
keycloak:
image: jboss/keycloak:13.0.1
environment:
DB_VENDOR: MYSQL
DB_ADDR: mysql
DB_DATABASE: keycloak
DB_USER: keycloak
DB_PASSWORD: password
KEYCLOAK_USER: admin
KEYCLOAK_PASSWORD: admin
PROXY_ADDRESS_FORWARDING: "true"
ports:
- 8080:8080
- 8443:8443
depends_on:
- mysql
networks:
- auth_net
相关Nginx
配置部分:
location /api/auth/verify {
internal;
proxy_method POST;
proxy_intercept_errors on;
proxy_pass http://keycloak:8080/auth/realms/master/protocol/openid-connect/userinfo;
error_page 400 =401 /401.html;
}
我对每个端点都使用上面的 /api/auth/verify
URL 作为验证。例如:
location /api/users {
auth_request /api/auth/verify;
rewrite ^/api/(.*) /$1 break;
proxy_pass http://users:6000;
proxy_pass_request_headers on;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
我的 Keycloak
为 TypeScript
/Angular
配置:
export const environment = {
production: false,
keycloakConfig: {
url: 'http://localhost:8080/auth/',
realm: 'master',
clientId: 'frontend'
}
};
app-init.ts
:
import { KeycloakService, KeycloakOptions } from 'keycloak-angular';
import { environment } from 'src/environments/environment';
export function initializer(keycloak: KeycloakService): () => Promise<any> {
const options: KeycloakOptions = {
config: environment.keycloakConfig
};
return (): Promise<any> => keycloak.init(options);
}
我的 app.module.ts
文件包含以下部分:
providers: [
KeycloakService,
{
provide: APP_INITIALIZER,
useFactory: initializer,
multi: true,
deps: [KeycloakService]
}
]
获取错误:
Keycloak
中前端
客户端的配置:
我的问题点:
Nginx
使用http://keycloak:8080
URL 是docker 系统内部的网络(Nginx
没有从Docker
中查看localhost
。- 前端 (
TS
/Angular
) 使用从外部可见的http://localhost:8080
URL(来自用户的浏览器)(理论上前端不会从用户的浏览器中看到keycloak
网络) - 当我从调用我的 API 的前端发送请求时(它想根据上面的
Nginx
示例验证 token ),我收到Invalid Token
错误 - 根据我的调查,我收到此错误是因为我在
http://localhost:8080
URL 上获取了 token ,我想在http://keycloak 上验证它:8080
网址。
总结我使用过的网址:
- API 的 URL:
http://localhost
- Docker 中的 Keycloak URL:
http://keycloak:8080
- 前端Keycloak:
http://localhost:8080
- Fornt-end 的 URL :
http://localhost:4200
我的问题:
- 如何解决上述问题?我对想法非常开放。
<强>1。编辑:
如果我尝试将前端 URL 设置为 http://localhost:8080
和 http://localhost:4200
但我得到了以下内容两种情况下的问题:
最佳答案
我刚刚找到了解决方案!
Frontend URL
参数在Keycloak
通用配置中是一个相当具有误导性的参数。我的前端位于 http://localhost:4200
URL 但正如我在问题中提到的那样,URL 在 Keycloak 中没有用作前端 URL 参数(我已经测试了很多次) .
正如您在我的keycloak-angular
模块配置问题中看到的那样,Keycloak
URL 设置为url: 'http://localhost: 8080/授权/'
。如果我将该 URL 设置为 Keycloak
常规配置中的 Frontend URL
参数(或作为 docker-compose.yml
文件中的输入参数)我的系统很有魅力。
注意:
- 基本 URL (
http://localhost:8080
) 是不够的,因此还需要/auth
后缀(有效的完整 URL:http://localhost:8080/auth/
).
关于angular - 从两个不同的 URL 验证 Keycloak token ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67894298/