我如何摆脱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> 

的公开页面可以像指数任何人访问.html，login.html。有些页面只能由用户和管理员访问，如dashboard.html，而admin.html只能由admin用户访问。

在我keycloak境界客户端设置，客户端sensorclout-2.2.1-SNAPSHOT，我有重定向URL作为

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

但每次当我尝试去dashboard.html，我将重定向keycloak默认登录页面。我想要重定向到我的自定义登录页面。

我该如何做到这一点？

感谢

Answer 1

当您设置客户端访问类型为“公共”，然后keycloak永远将用户重定向到其登录页面。您可以将访问类型设置为“bearer-only” - 在此情况下，keycloak不会重定向，但您需要通过身份验证才能访问受保护的资源。

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