angular - 从两个不同的 URL 验证 Keycloak token

Question

我有一个基于 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 但我得到了以下内容两种情况下的问题:

Answer 1

我刚刚找到了解决方案!

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/).