Avoid keycloak default login page and use project login page

Question

I am working on creating an angular.js web application and looking for how to integrate keycloak into the project. I have read and watched many tutorials and I see that most of them have users logging/registering through the default login page of keycloak which then redirects to the app.

I have designed my own login and registration page which I want to use. How do I use them instead of keycloak default. Are there any API that I can call or may be my backend would do that? I also read there are spring adapters available for keycloak, can I use them ? Any link to any example would be good.

The second question I have is while registering can I add more user details like address, dob, gender in keycloak? Because my registration page requires those information.

Answer 1

Expanding on the API roles

POST to your/keycloak/url/auth/realms/master/protocol/openid-connect/token

with data:

{

    client_id : 'Id_of_your_client',

    username : 'your_username',
    password : '@#$%^&',
    grant_type : "password"

}

will give you the initial access token and refresh token

and

POST to the same URL with

data:

{

    client_id : 'Id_of_your_client',

   // client_secret : 'optional depending on the type of client',

    grant_type : "refresh_token" ,

    refresh_token : refresh_token_you_got_earlier 

}

will give the new refresh and access tokens .These tokens are what keycloak checks for authorization/authentication.

You could make your own login and send the credentials to keycloak via a REST API and once you have the access token , just put it in the header of any ongoing request to a keycloak protected resource as

headers :{

  Authorization : 'Bearer ' +  access_token_you_got

}