如何使用 Keycloak 和 Angular 避免“等待第 3 方检查 iframe 消息时超时”

Question

我正在尝试使用 Keycloak 服务器保护 Angular 应用程序的安全。我遵循了一些教程，它们或多或少提供了相同的说明，但我遇到了以下错误：

等待第 3 方检查 iframe 消息时超时。

我使用以下 docker-compose 配置启动 keycloak 服务器：

auth:
  container_name: nerthus-tech-auth
  image: quay.io/keycloak/keycloak:17.0.1
  command: start-dev
  environment:
    KEYCLOAK_ADMIN: admin
    KEYCLOAK_ADMIN_PASSWORD: admin
    KC_DB: postgres
    KC_DB_URL: jdbc:postgresql://database:5432/keycloak
    KC_DB_USERNAME: keycloak
    KC_DB_PASSWORD: str0ngP@ssword
  ports:
    - 10010:8080

我创建了一个领域（nerthus）和一个公共客户端（博客），并具有以下配置：

• 根 URL：http://localhost:4200
• 有效的重定向 URL：http://localhost:4200/* （根据我的理解，我应该能够缩写为 *）
• 网络起源：+

在 Angular 应用程序方面，我安装了 keycloak-angular 和 keycloak-js 依赖项：

"keycloak-angular": "^9.1.0",
"keycloak-js": "^16.1.1"

我还为 Keycloak 注册了一个初始化程序：

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

function initializeKeycloak(keycloakService: KeycloakService) {
  return () => keycloakService.init({
                                      config: {
                                        url: 'http://localhost:10010',
                                        realm: 'nerthus',
                                        clientId: 'blog'
                                      }
                                    });
}

对于这一点，我还尝试使用 initOptions.onLoad （带有“login-required”和“check-sso”），但这会导致应用程序需要身份验证才能访问任何页面，这不是预期的行为。

我只希望受保护的页面需要身份验证。因此我设置了警卫：

@Injectable({
  providedIn: 'root'
})
export class AuthGuard extends KeycloakAuthGuard {
  constructor(protected override readonly router: Router,
              protected override readonly keycloakAngular: KeycloakService) {
    super(router, keycloakAngular);
  }

  async isAccessAllowed(route: ActivatedRouteSnapshot,
                        state: RouterStateSnapshot): Promise<boolean | UrlTree> {
    if (!this.authenticated) {
      await this.keycloakAngular.login({ redirectUri: window.location.origin + state.url });
    }

    return this.authenticated;
  }
}

当然我错过了一些东西，但我无法让它发挥作用。我尽量简洁，所以如果缺少一些重要信息，请询问我。

Answer 1

我的解决方案是将 checkLoginIframe 设置为 false。下面是我的配置：

 keycloak.init({
  config: {
      url: 'http://localhost:10010',
      realm: 'nerthus',
      clientId: 'blog'
  },
  initOptions: {
    
    pkceMethod: 'S256', 
    // must match to the configured value in keycloak
    redirectUri: 'http://localhost:4200/your_url',   
    // this will solved the error 
    checkLoginIframe: false
  }});

希望它会有所帮助。=)