如何摆脱 keycloak 的默认登录页面并使用我自己的登录页面

Question

我使用的是wildfly 10.1.0.Final 和keycloak 3.1.0.Final。

我想使用我自己的登录页面，我创建了一个带有提交按钮的登录页面来获取令牌：

$('#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");
      }
    });
  });

它有效。

仅使用此代码，dashboard.html 根本没有任何安全约束，因此我按照建议设置了 web.xml：

<?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>

任何人都可以访问某些公共页面，例如 index.html、login.html。并且有些页面应该只有用户和管理员才能访问，例如dashboard.html，而admin.html只能由管理员用户访问。

在我的 keycloak 领域客户端设置中，对于客户端 sensorclout-2.2.1-SNAPSHOT，我将 url 重定向为

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

但是每次当我尝试访问dashboard.html 时，我都会重定向keycloak 默认登录页面。我想重定向到我的自定义登录页面。

我怎样才能做到这一点？

谢谢

Answer 1

当您将客户端的访问类型设置为“公共”时，keycloak 将始终将用户重定向到其登录页面。您可以将访问类型设置为“仅承载” - 在这种情况下，keycloak 不会重定向，但您需要通过身份验证才能访问受保护的资源。

如果您像这样配置 keycloak，那么在访问受保护的页面时，您将需要实现一些过程，该过程检查用户是否已通过身份验证，如果没有，则将其重定向到您的登录页面。