KeycloakとAngular CLI

2018年2月9日 Stan Silvert 著

そこで、Angular CLIアプリケーションにKeycloakをインストールおよび設定するschematicを作成しました(Keycloak in any Angular CLI applicationを参照)。

試してみたい場合は、コマンドラインから以下を実行してください。

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レルム）に移動し、[Clients] --> [Add Client] --> [Select File]に移動します。

"ng generate keycloak"コマンドが/myAppに作成したclient-import.jsonファイルを選択します。

Keycloakサーバーがlocalhost:8080で実行されていると仮定すると、準備完了です。アプリケーションを起動してください。

ng serve

ブラウザでアプリケーションを起動して、以下を確認してください。

やった！myAppはKeycloakで保護されています！

keycloak-schematicは、KeycloakServiceとKeycloakGuardをインストールします。これにより、簡単に以下のことが可能になります。

• ログイン/ログアウトボタンの追加
• ユーザーセルフサービス（アカウント管理）へのアクセス
• アプリケーション全体ではなく、保護されたルートの保護
• ロールの操作
• その他多数

こちらをクリックして、包括的な入門ガイド、完全なドキュメント、およびサンプルコードをご覧ください。

現在、これは初期のアルファ版であることに注意してください。そして、間もなく@ssilvertから@keycloakに移行する予定です。それまでの間、フィードバックをお待ちしています。Keycloak/Angularの統合をさらに改善するためにやるべきことはたくさんありますが、keycloak-schematicは大きな前進だと考えています。

それでは、また。そして、魚に感謝を。