February 09 2018 by Stan Silvert
If you want to try it out, do this from the command line:
npm install -g @ssilvert/keycloak-schematic ng new myApp cd myApp ng generate keycloak --collection @ssilvert/keycloak-schematic --clientId=myApp
Now Keycloak is integrated into your app. Of course, you can do this with any existing Angular CLI application. It doesn't have to be a new one.
Then, go to the Keycloak Admin console (master realm) and go to Clients --> Add Client --> Select File.
Select the client-import.json file that the "ng generate keycloak" command created in /myApp.
Assuming your Keycloak server is running on localhost:8080, you are ready to go. Start your application:
Go to your browser to start the app and see this:
Oh joy! myApp is protected with Keycloak!
The keycloak-schematic installs a KeycloakService and a KeycloakGuard. So you can easily:
Click here for a comprehensive getting started guide, full documentation, and sample code.
Note that this stuff is early alpha right now. And it will move from @ssilvert to @keycloak before long. In the mean time, I'd love to get feedback. There is a lot to do to make Keycloak/Angular integration even better, but I think the keycloak-schematic is a big step forward.
So long, and thanks for all the fish.