Member-only story
Authenticate users in your webapp with Azure Active Directory as IDP and Keycloak as SP
Learn how to use Keycloak to authenticate users in a javascript client application and delegate authentication to Azure Active Directory, GitHub, LinkedIn, Google or any identity provider. Quick login page example built with Vue.js v3 using keycloak js adapter.
The article mainly targets Azure Active Directory as delegate Identity Provider.
Realm configuration
Keycloak version 12.0.2 is used in this example. First we need to create a realm in Keycloak and configure it accordingly.
To launch a keycloak server locally, use this docker compose file and execute the following command docker-compose -f keycloak.yml
version: '2'
services:
keycloak:
image: jboss/keycloak:12.0.2
command:
[
'-b',
'0.0.0.0',
'-Djboss.socket.binding.port-offset=1000',
'-Dkeycloak.migration.strategy=OVERWRITE_EXISTING'
]
environment:
- KEYCLOAK_USER=admin
- KEYCLOAK_PASSWORD=admin
- DB_VENDOR=h2
ports:
- 9080:9080
- 9443:9443
- 10990:10990
Then connect to Keycloak administration console (http://localhost:9080/auth
, credentials are admin/admin), create a realm and name it my-realm.