Keycloak 和 Angular CLI

2018 年 2 月 9 日 由 Stan Silvert

所以我做了一个 schematic，它可以安装和配置 任何 Angular CLI 应用程序中的 Keycloak.

如果你想尝试一下，从命令行执行以下操作

npm install -g @ssilvert/keycloak-schematic
ng new myApp
cd myApp
ng generate keycloak --collection @ssilvert/keycloak-schematic --clientId=myApp

现在 Keycloak 已集成到您的应用程序中。当然，您可以对任何现有的 Angular CLI 应用程序执行此操作，它不必是新的。

然后，转到 Keycloak 管理控制台（主 realm）并转到 Clients -> Add Client -> Select File。

选择 "ng generate keycloak" 命令在 /myApp 中创建的 client-import.json 文件。

假设您的 Keycloak 服务器正在 localhost:8080 上运行，您就可以开始了。启动您的应用程序

ng serve

转到您的浏览器启动应用程序并查看以下内容

太好了！myApp 由 Keycloak 保护！

该 keycloak-schematic 安装了一个 KeycloakService 和一个 KeycloakGuard。因此您可以轻松地

• 添加登录/注销按钮
• 访问用户自助服务（帐户管理）
• 保护整个应用程序之外的受保护路由
• 使用角色
• 更多功能

点击这里 获取全面的入门指南、完整文档和示例代码。

请注意，这些内容目前处于早期 Alpha 阶段。并且它将很快从 @ssilvert 迁移到 @keycloak。在此期间，我非常乐意收到您的反馈。要使 Keycloak/Angular 集成变得更好还有很多工作要做，但我认为 keycloak-schematic 是一个巨大的进步。

一路顺风，谢谢你们的鱼。