避免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就像项目登录页面