如何通过mgt-people-picker检索所选用户的自定义扩展属性？

可以实现，但mgt-people-picker默认返回的用户数据不包含扩展属性，需要通过以下两种方式自定义处理：

方式一：监听选择事件后单独请求扩展属性 #

当用户选中人员后，通过selectionChanged事件拿到选中用户的ID，再调用Graph API获取包含扩展属性的完整用户数据：

const peoplePicker = document.querySelector('mgt-people-picker');
peoplePicker.addEventListener('selectionChanged', async (event) => {
  const selectedUsers = event.detail;
  for (const user of selectedUsers) {
    // 请求包含扩展属性的用户信息
    const userData = await window.mgt.MicrosoftGraph.Client.api(`/users/${user.id}`)
      .select('id,displayName,extensions') // 指定要获取的字段，extensions包含所有扩展属性
      .get();
    
    // 访问扩展属性
    console.log('用户扩展属性:', userData.extensions);
  }
});

方式二：重写组件的用户获取逻辑 #

如果需要组件默认返回扩展属性，可以自定义mgt-people-picker的实现，重写获取用户的API请求：

// 自定义PeoplePicker组件
class ExtendedPeoplePicker extends window.mgt.GraphPeoplePicker {
  protected async getGraphUsers(query: string, top = 10): Promise<any[]> {
    // 修改Graph请求，添加扩展属性字段
    const response = await this.graphClient.api('/users')
      .search(`displayName:${query}`)
      .select('id,displayName,mail,extensions') // 包含extensions字段
      .top(top)
      .get();
    
    return response.value;
  }
}

// 注册自定义组件
customElements.define('extended-people-picker', ExtendedPeoplePicker);

注意事项 #

• 权限要求：确保你的应用已获得Graph API的User.Read.All或更高权限，才能读取用户的扩展属性。
• 目录扩展属性优化：如果是管理员创建的目录扩展，可以直接在select中指定属性名（格式为extension_<应用ID>_<属性名>），无需获取整个extensions对象，提升请求效率。
• 开放扩展限制：开放扩展（用户自行添加的属性）只能通过extensions数组获取，无法单独指定字段。

内容的提问来源于stack exchange，提问作者Gargoyle