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:
> ng serve
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:
- Add login/logout buttons
- Access user self service (account management)
- Guard protected routes instead of the whole app
- Work with roles
- Lots more
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.
Stan