我如何擺脫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，那麼當訪問受保護的頁面時，您需要實現一些過程，檢查用戶是否已經過身份驗證，如果沒有，則將其重定向到登錄頁面。