验证来自两个不同 URL 的 Keycloak 令牌

我有一个Docker compose具有后端和前端组件的基于系统。后端写的是Python Flask并在多个 docker 容器中运行，前端编写为TypeScript with Angular。前端通过Restful API与后端进行通信。代理是用以下命令创建的Nginx。但是Keycloak前端和后端之间不能进行token验证。

My KeyCloak (and MySQL) 部分docker-compose.yml file:

  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

Related 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;
    }

My 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);
}

My app.module.ts文件包含以下部分：

  providers: [
    KeycloakService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializer,
      multi: true,
      deps: [KeycloakService]
    }
  ]

获取错误：

配置为frontend客户在Keycloak:

我的问题点：

• The Nginx使用http://keycloak:8080URL是docker系统内部的网络（Nginx没有看到localhost from Docker).
• 前端（TS/Angular）使用http://localhost:8080从外部（从用户的浏览器）可见的 URL（理论上前端看不到keycloak来自用户浏览器的网络）
• 当我从调用我的 API 的前端发送请求时（想要根据上面验证令牌）Nginx示例），我得到Invalid Token error
• 根据我的调查，我收到此错误，因为我获得了令牌http://localhost:8080URL，我想验证它http://keycloak:8080 URL.

总结一下我用过的网址：

• API 的网址：http://localhost
• Docker 内的 Keycloak URL：http://keycloak:8080
• 前端的钥匙斗篷：http://localhost:8080
• 前端网址：http://localhost:4200

我的问题：

• 我该如何解决上述问题？我对想法非常开放。

1. EDIT:

如果我尝试将前端 URL 设置为http://localhost:8080, and http://localhost:4200但我在这两种情况下都遇到了以下问题：

我刚刚找到了解决方案！

The Frontend URL参数是一个相当具有误导性的Keycloak通用配置。我的前端已开启http://localhost:4200URL，但正如我在问题中提到的，URL 不能作为 Keycloak 中的前端 URL 参数（我已经测试过很多次）。

正如您在我的问题中看到的配置keycloak-angular模块Keycloak网址设置为url: 'http://localhost:8080/auth/'。如果我将该 URL 设置为Frontend URL中的参数Keycloak通用配置（或作为输入参数docker-compose.yml文件）我的系统很有魅力。

Note:

• 基本 URL (http://localhost:8080）还不够，所以/auth还需要后缀（有效的完整 URL：http://localhost:8080/auth/).