时间戳

首页 > 解决方案 > Microsoft 图形 API 工具包中的人员选取器无法正常工作

microsoft-graph-api - Microsoft 图形 API 工具包中的人员选取器无法正常工作

问题描述

我在登录页面上使用与此示例microsoft-authentication-library-for-js相同的 msal 身份验证。登录后，我将重定向到具有人员选择器组件的页面。该组件代码如下所示。我的前端客户端是 React。我正在将 NPM 包"@microsoft/mgt": "^1.3.0-preview.2"用于人员选择器和"msal": "^1.3.0"登录用户

import React, { useState, useRef } from 'react';


import '@microsoft/mgt';

const PeoplePicker = props => {

      // reference to access mgt-people-picker on DOM
      const peoplePicker = useRef();

      return (
         <div>
            <mgt-msal-provider client-id={process.env.REACT_APP_DEV_AZURE_APP_CLIENT_ID} />
            <mgt-people-picker ref={peoplePicker} />
         </div>
      )

}

当我开始输入人员选择器时，没有从我们的组织 AD 中获取任何人员列表。我检查了控制台中的网络选项卡，在您输入此输入时没有进行网络调用。它没有抛出错误，所以我假设 Provider 正在工作，但它可能是会话或令牌附加到人员选择器的问题，尽管我不完全确定我将如何做到这一点。

在此处输入图像描述

我浏览了微软文档、github问题等，但也没有帮助

标签： microsoft-graph-apimsalmsal.jsmicrosoft-graph-toolkit

解决方案

类似于这里的答案：https ://stackoverflow.com/a/62024758/13040450

由于 react 处理自定义元素的方式，它们必须以不同的方式引用。或者，您可以在此处使用我们的包装器：

https://github.com/nmetulev/mgt-react

这将允许您通过以下方式引用组件：

import { PeoplePicker } from 'mgt-react';
<PeoplePicker ></PeoplePicker >

快速说明：React 组件的名称采用 PascalCase 格式，不包含 Mgt 前缀

另一个注意事项：mgt-react 处于预览阶段，尚未经过全面测试或记录。请查看并留意未来的 V1：https ://github.com/nmetulev/mgt-react

推荐阅读