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 管理控制台（master 域），然后转到 “客户端” --> “添加客户端” --> “选择文件”。

选择 "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 是向前迈出的一大步。

再见，感谢所有的鱼。