How can I get rid of keycloak's default login page and use my own login page

Question

I am using wildfly 10.1.0.Final and keycloak 3.1.0.Final.

I want to use my own login page, I have created a login page with a submit button to get the token:

$('#submit').click(function(e) {
    var creds = "client_id=sensorcloud-2.2.1-SNAPSHOT&grant_type=password&client_secret=b6b4f0ec-9936-46a2-9f40-69c207e2e0f2&username=" + $('#username')[0].value +"&password=" + $('#password')[0].value;
    $.ajax({
      url: 'https://localhost:8445/auth/realms/sensorcloud-auth/protocol/openid-connect/token',
      data: creds,
      headers: {'Content-Type':'application/x-www-form-urlencoded'},
      type: 'POST',
      success: function(data){
        localStorage.setItem('currentUser', JSON.stringify(data));
        window.location.replace("https://localhost:8443/sensorcloud-2.2.1-SNAPSHOT/dashboard.html");
      },
      error: function() {
        alert("Invalid username or password");
      }
    });
  });

And it works.

Only with this code, dashboard.html doesn't have any security constraint at all,so I set up the web.xml as recommended:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>SensorCloud</display-name>

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

    <login-config>
        <auth-method>KEYCLOAK</auth-method>
        <realm-name>sensorcloud-auth</realm-name>
    </login-config>

    <context-param>
        <param-name>resteasy.role.based.security</param-name>
        <param-value>true</param-value>
    </context-param>

    <security-constraint>
        <web-resource-collection>
            <web-resource-name>sensorcloud-2.2.1-SNAPSHOT</web-resource-name>
            <url-pattern>/rest/*</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <role-name>user</role-name>
            <role-name>admin</role-name>
        </auth-constraint>
        <user-data-constraint>
            <transport-guarantee>CONFIDENTIAL</transport-guarantee>
        </user-data-constraint>
    </security-constraint>

    <security-constraint>
        <web-resource-collection>
            <web-resource-name>sensorcloud-2.2.1-SNAPSHOT</web-resource-name>
            <url-pattern>/index.html</url-pattern>
            <url-pattern>/help.html</url-pattern>
            <url-pattern>/register.html</url-pattern>
            <url-pattern>/login.html</url-pattern>
        </web-resource-collection>
        <user-data-constraint>
            <transport-guarantee>CONFIDENTIAL</transport-guarantee>
        </user-data-constraint>
    </security-constraint>

    <security-constraint>
        <web-resource-collection>
            <web-resource-name>sensorcloud-2.2.1-SNAPSHOT</web-resource-name>
            <url-pattern>/dashboard.html</url-pattern>      
            <url-pattern>/management.html</url-pattern>
            <url-pattern>/password.html</url-pattern>
            <url-pattern>/user.html</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <role-name>user</role-name>
            <role-name>admin</role-name>
        </auth-constraint>
        <user-data-constraint>
            <transport-guarantee>CONFIDENTIAL</transport-guarantee>
        </user-data-constraint>
    </security-constraint>

    <security-constraint>
        <web-resource-collection>
            <web-resource-name>sensorcloud-2.2.1-SNAPSHOT</web-resource-name>
            <url-pattern>/admin.html</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <role-name>admin</role-name>
        </auth-constraint>
        <user-data-constraint>
            <transport-guarantee>CONFIDENTIAL</transport-guarantee>
        </user-data-constraint>
    </security-constraint>

    <security-role>
        <role-name>admin</role-name>
    </security-role>
    <security-role>
        <role-name>user</role-name>
    </security-role>
</web-app>

Some public pages can be accessed by anyone like index.html, login.html. And some pages should be accessed only by user and admin, like dashboard.html, and admin.html should only be accessed by admin user.

And in my keycloak realm client setting, for client sensorclout-2.2.1-SNAPSHOT, I have redirect url as

https://localhost:8443/sensorcloud-2.2.1-SNAPSHOT/*

But every time when I try to go to dashboard.html, I will be redirect the keycloak default login page. I want to be redirect to my customized login page.

How can I achieve this?

Thanks

Answer 1

when you set Access Type of your client to "public", then keycloak will always redirect a user to its login page. You can set Access Type to "bearer-only" - in this case keycloak would NOT redirect, but you need to be authenticated to access secured ressources.

If you configure keycloak like this, then, when accessing secured pages, you will need to implement some process, which checks, if user is already authenticated, and if not, redirect it to your login page.