javascript - 如何使用 Keycloak 获取当前用户头像？

Question

我正在尝试使用 Keycloak 身份验证在我的 AngularJs 应用程序中使用 Google 或 Facebook 等身份提供商登录的用户个人资料图片和其他信息。

Answer 1

我不确定 Facebook 是否或如何支持此功能，但对于 Google，您可以简单地将映射器添加到您的 IdP 配置中，如下所示：

这会将pictureGoogle 配置文件中的属性映射到名为 的 Keycloak 用户属性picture。然后，用户属性包含个人资料图片的 URL。

为了让 Angular 可以访问它，User Attribute向你的客户端添加一个类型的客户端协议映射器，如下所示：

您可以将picture声明添加到您的令牌或 userinfo 端点。然后，Angular 可以从令牌中提取属性或查询 userinfo 端点。

Answer 2

constructor(private keycloakservice:KeycloakService){}

const details = {
      'userName': this.keycloakservice.getKeycloakInstance().tokenParsed['preferred_username'],
      'userId': this.keycloakservice.getKeycloakInstance().tokenParsed['preferred_username'],
      'firstName': this.keycloakservice.getKeycloakInstance().tokenParsed['given_name'],
      'lastName': this.keycloakservice.getKeycloakInstance().tokenParsed['family_name'],
      'displayName': this.keycloakservice.getKeycloakInstance().tokenParsed['name'],  
      'roleAccessList': this.keycloakservice.getUserRoles()
    };