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 realm），並前往「客戶端」-->「新增客戶端」-->「選取檔案」。

選取「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 是向前邁進的一大步。

就這樣，感謝所有的魚。