避免keycloak默認登錄頁面，使用項目登錄頁面

Question

我正在創建一個 angular.js web 應用程序並尋找如何將keycloak集成到項目中。 我已經閱讀並觀看了許多教程，我發現其中大多數都有用戶通過keycloak的默認登錄頁面登錄/注冊，然后重定向到應用程序。

我已經設計了我自己想要使用的登錄和注冊頁面。 我如何使用它們而不是默認的keycloak 。 有沒有我可以打電話的 API 或者我的后端會這樣做？ 我還讀到有 spring 適配器可用於 keycloak，我可以使用它們嗎？ 任何示例的任何鏈接都會很好。

我的第二個問題是在注冊時我可以在keycloak中添加更多用戶詳細信息，如地址、出生日期、性別嗎？ 因為我的注冊頁面需要這些信息。

Answer 1

擴展 API 角色

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

有數據：

{

    client_id : 'Id_of_your_client',

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

}

將為您提供初始訪問令牌和刷新令牌

和

POST 到相同的 URL

數據：

{

    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 

}

將提供新的刷新和訪問令牌。這些令牌是 keycloak 檢查授權/身份驗證的內容。

您可以進行自己的登錄並通過 REST API 將憑據發送到 keycloak，一旦您獲得訪問令牌，只需將其放在對 keycloak 受保護資源的任何正在進行的請求的標頭中

headers :{

  Authorization : 'Bearer ' +  access_token_you_got

}

Answer 2

3個步驟：

1. 在keycloak/themes/目錄中創建名為 eg 的文件夾。 我的主題。

2. 在myTheme文件夾中放置您的自定義登錄頁面

   （結構必須與 base 或 keycloak 主題相同，我的建議是復制 base 主題，重命名並自定義它）。

3. 轉到 keycloak 的管理控制台進入Realm Settings > Themes > Login Theme並選擇myTheme 。

Answer 3

如果您想通過 Java 訪問 Keycloak 登錄頁面並獲得響應，請使用以下代碼：

String uri = "http://localhost:7080/auth/realms/{RealmName}/protocol/openid-connect/token";

            HttpClient client = HttpClientBuilder.create().build();
            HttpPost post = new HttpPost(uri);
            post.setHeader("User-Agent",
                    "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36");
            List<BasicNameValuePair> urlParameters = new ArrayList<BasicNameValuePair>();
            urlParameters.add(new BasicNameValuePair("grant_type", "password"));
            urlParameters.add(new BasicNameValuePair("client_id", {ClientName}));
            urlParameters.add(new BasicNameValuePair("username", {UserName}));
            urlParameters.add(new BasicNameValuePair("password", {Password}));
            post.setEntity(new UrlEncodedFormEntity(urlParameters));
            HttpResponse response = client.execute(post);
            System.out.println("Response Code : " + response.getStatusLine().getStatusCode());
            BufferedReader rd = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));
            StringBuffer result = new StringBuffer();
            String line1 = "";
            while ((line1 = rd.readLine()) != null) {
                result.append(line1);
            }
            System.out.println(result);

如果您的用戶名和密碼有效， response.getStatusLine().getStatusCode()將提供 HTTP 200 以及AccessToken和RefreshToken 的值。 否則response.getStatusLine().getStatusCode()會將值作為 HTTP 403 和數據作為： {"error":"invalid_grant","error_description":"Invalid user credentials"}

Answer 4

• 您可能應該堅持使用 Keycloack 的表格。 它們帶來了不錯的功能（SSO、密碼重置等）並且完全可定制（通過主題）。 但是，可以通過所謂的Direct Access Grant獲得訪問令牌。 它可以通過Keycloak REST API 完成。
• 存儲自定義用戶信息（性別、工作等）由用戶屬性完成

官方Keycloak Docs或多或少涵蓋了這兩個主題。

Answer 5

將您的登錄主題放在 keycloak 主題目錄中，然后通過管理員登錄更改登錄主題設置並從下拉列表中選擇您的主題。 您的登錄主題必須在 keycloak 默認主題格式中，因此要創建您的主題，請參考 keycloak 默認主題並根據該主題設計您的主題。

您可以參考以下Keycloak 主題配置

Answer 6

我創建了一個使用 Angular 13（不使用 FTL）創建自定義登錄頁面主題的示例： https<\/a> : \/\/github.com\/alexthelion\/keycloak-login-theme-angular<\/a>

"

Answer 7

從文檔中，您似乎擴展了主題或覆蓋了單個資源（模板、樣式表等）： https : //www.keycloak.org/docs/latest/server_development/#creating-a-theme

關於額外的用戶詳細信息，再次來自文檔： https : //www.keycloak.org/docs/latest/server_development/#_custom_user_attributes

Answer 8

您可以在中編寫自定義內聯 css

鑰匙斗篷/主題/基地/template.ftl

和

keycloak/themes/base/login.ftl

然后你將能夠使用keycloak登錄頁面，但ui就像項目登錄頁面