如何使用 Keycloak 获取当前用户头像？答案

【问题标题】：How to get current user profile picture with Keycloak?如何使用 Keycloak 获取当前用户头像？
【发布时间】：2017-08-06 02:07:29
【问题描述】：

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

【问题讨论】：

我从未在 keycloak 中使用第三方 API 作为身份提供者，但在 docs 中告诉您可以从中获取和存储第三方令牌：“存储令牌来自社交身份提供者并使用这些令牌来调用社交提供者 API”。然后调用它的 API 来获取用户头像或任何你想要的就足够了。
stackoverflow.com/questions/32175174/…

标签： javascript angularjs keycloak keycloak-services

【解决方案1】：

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

这会将来自 Google 个人资料的 picture 属性映射到名为 picture 的 Keycloak 用户属性。然后，用户属性包含个人资料图片的 URL。

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

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

【讨论】：

【解决方案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()
    };

【讨论】：

请解释这是如何从问题中解决问题并给出一些背景信息。