避免密钥斗篷默认登录页面，并使用项目登录页面

我正在创建一个 angular.js 网络应用程序，并寻找如何将 keycloak集成到项目中。我已经阅读和观看了许多教程，我看到他们中的大多数都有用户登录/注册通过默认登录页面的 keycloak，然后重定向到应用程序。

我已经设计了我自己的登录和注册页面，我想使用。如何使用它们而不是 keycloak默认值。有没有什么 API 我可以调用或者我的后端可以做到这一点？我还看到有弹簧适配器可用于密钥斗篷，我可以使用它们吗？任何示例的链接都是好的。

第二个问题，我有注册时，我可以添加更多的用户详细信息，如地址，出生日期，性别在 keycloak？因为我的注册页面需要这些信息。

98017 次浏览
小开
  • 也许你应该坚持使用 Keycloack 的表单。它们带来了很好的特性(SSO、重置等) ，并且是完全可定制的(通过主题)。然而，有可能通过所谓的 直接进入津贴获得 访问令牌。它可以通过 密钥斗篷 REST API完成。
  • 存储自定义用户信息(性别、工作等)是由 用户属性完成的

这两个主题或多或少都包含在官方的 钥匙斗篷文档中。

小开

将您的登录主题放在密钥斗篷主题目录中，并通过管理员登录更改登录主题设置，然后从下拉列表中选择您的主题。 您的登录主题必须在密钥斗篷默认主题格式，以创建您的请参考密钥斗篷默认主题和设计您的根据。

你可参考以下资料 钥匙斗篷主题配置

小开

3个步骤:

  1. 在 < strong > 密钥斗篷/主题/目录中，创建名为 eg.我的主题的文件夹。

directory structure

  1. 在 我的主题文件夹中放置您的自定义登录页面

    (结构必须与基本主题或密钥斗篷主题相同，我的建议是复制基本主题，重命名并自定义它)。

  2. 转到管理控制台的密钥斗篷到 域设定 > 主题 > 登入主题，并选择 我的主题。

enter image description here

小开

扩展 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"


}

将为您提供初始访问令牌和刷新令牌

还有

发送到相同的 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


}

将提供新的刷新和访问令牌。

您可以进行自己的登录，并通过 REST API 将凭据发送到密钥斗篷，一旦您拥有了访问令牌，只需将其放在任何正在进行的对密钥斗篷保护资源的请求的标头中，如下所示

headers :{


Authorization : 'Bearer ' +  access_token_you_got


}
小开

使用下面的代码，如果你想通过 Java 点击 Key 介登录页面并得到响应:

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()将以 HTTP200和 访问令牌、 RefreshToken的形式给出该值。否则，response.getStatusLine().getStatusCode()将给出 HTTP 403的值和 {"error":"invalid_grant","error_description":"Invalid user credentials"}的数据

小开

从文档中可以看出，您似乎扩展了主题或覆盖了单独的资源(模板、样式表等) : Https://www.keycloak.org/docs/latest/server_development/#creating-a-theme

关于额外的用户详细信息，同样来自文档: Https://www.keycloak.org/docs/latest/server_development/#_custom_user_attributes

小开

您可以将自定义的内联 css 写入

密钥斗篷/主题/基础/模板

还有

密钥斗篷/主题/基础/login.ftl

然后您将能够使用密钥斗篷登录页面，但 UI 喜欢项目登录页面


提交答案