如何使用Keycloak获取当前用户个人头像？

Question

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

Answer 1

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

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

为了使其可以被 Angular 访问，请将类型的客户端协议映射器添加User Attribute到您的客户端，如下所示：

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

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()
    };