我正在尝试使用 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;
}
}
当然我错过了一些东西,但我无法让它发挥作用。我尽量简洁,所以如果缺少一些重要信息,请询问我。