如何使用 Keycloak 獲取當前用戶的個人資料圖片？

Question

我正在嘗試使用 Keycloak 身份驗證在我的 AngularJs 應用程序中獲取使用 Google 或 Facebook 等身份提供商登錄的用戶個人資料圖片和其他信息。

Answer 1

我不確定 Facebook 是否或如何支持這一點，但對於 Google，您可以簡單地將映射器添加到您的 IdP 配置中，如下所示：

這將 Google 個人資料中的picture屬性映射到名為picture的 Keycloak 用戶屬性。 然后，用戶屬性包含個人資料圖片的 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()
    };