keycloak-angular初始化返回空白页及第三方校验超时如何解决？

问题原因 #

你遇到的Timeout when waiting for 3rd party check iframe message报错，是Keycloak第三方Cookie校验逻辑触发的问题：
Keycloak默认会在初始化时通过iframe写入带secure属性的第三方Cookie验证浏览器兼容性，你当前用HTTP协议访问Keycloak服务，secure属性的Cookie无法在HTTP场景下写入，导致step2页面的校验消息无法正常回传给父页面，直接触发超时。

解决步骤 #

1. 优先在Keycloak初始化配置中禁用第三方Cookie校验，修改init/keycloakinit.factory.ts的初始化参数：

import { KeycloakService } from "keycloak-angular";

export function initializeKeycloak(keycloak: KeycloakService) {
  console.log("Initializing Keycloak Service.");
  return () =>
    keycloak.init({
      config: {
        url: 'http://auth-service' + '/auth',
        realm: 'SpringBootKeycloak',
        clientId: 'SpringBootKeycloak',
      },
      // 新增以下两个配置
      enable3pCookies: false,
      onLoad: 'check-sso'
    });
}

2. 检查Keycloak控制台对应客户端的配置：

• 有效重定向URI需添加你Angular应用的访问地址，例如http://localhost:4200/*
• Web源需添加你Angular应用的访问地址，避免跨域拦截

3. 确认版本匹配：keycloak-angular、keycloak-js两个前端依赖的大版本，要和你部署的Keycloak服务端大版本保持一致，版本不兼容也会触发这类初始化异常。
4. 生产环境建议将Keycloak服务和Angular应用都切换为HTTPS协议，无需禁用第三方Cookie校验即可正常运行，安全性更高。

内容的提问来源于stack exchange，提问作者DrTeeth