SPFX开发加载AD组触发MSGraphAPI权限不足错误求助

我尝试从AD加载组，但持续出现错误。已完成部署并将其添加到站点应用中，参考若干教程仍无成效，恳请协助排查操作失误。

提供的配置与代码 #

package-solution.json 片段 #

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Group.Read.All"
  }
],

Employee.tsx 代码 #

export interface IEmployeeListProps {
  description: string;
  context: WebPartContext;
}

const EmployeeList = (props: IEmployeeListProps) => {

  const [users, setUsers] = useState<IUserItem[]>([]);
  const [usersToShow, setUsersToShow] = useState([]);

  function searchFunction(filter: string) {
    if (filter == "") {
      return setUsers(usersToShow);
    } if (filter != "") {
      let qf = users.filter((v) => v.displayName.toLocaleLowerCase().includes(filter.toLocaleLowerCase()));
      setUsers(qf);
    }
  }

  useEffect(() => {
    props.context.msGraphClientFactory
      .getClient("3")
      .then((client: MSGraphClientV3) => {
        client
          .api("/groups")
          .version("v1.0")
          .select("")
          .get((err: any, res: any) => {
            if (err) {
              console.error("MSGraphAPI Error")
              console.error(err);
              return;
            }
            console.log(res);
            setUsers(res.value);
            setUsersToShow(res.value);
          }).catch((e) => { console.log(e) });
      }).catch((e) => { console.log(e) })
  }, []);

  return (
    <div onLoad={() => console.log("Page has been loaded")} style={{ textAlign: "center" }}>
      <input onChange={(e) => searchFunction(e.target.value)} type="text" style={{ margin: "9px" }} />
      {users.map((v) => {
        return (
          <div style={{ padding: "5px", fontSize: "19px", fontWeight: "bolder", fontFamily: "sans-serif" }}>
            {v.displayName}
          </div>
        )
      })}
    </div>
  );
}

export default EmployeeList

可能的问题与修复方案 #

• 权限未完成管理员审批：Group.Read.All 是需要管理员授权的权限，仅在package-solution.json中声明不够。部署解决方案后，需前往SharePoint管理中心（或Azure AD管理门户）完成权限审批操作，否则API调用会返回权限不足的错误。

• Graph API请求未指定返回字段：代码中.select("")是空字符串，这会导致Graph API不返回任何字段，包括你需要的displayName。后续渲染时访问v.displayName会出现undefined错误。修改为：

  .select("displayName") // 或根据需要添加其他字段，比如id
  

• 接口类型定义缺失：IUserItem 接口未定义displayName字段，TypeScript会抛出类型错误。需要补充接口定义：

  interface IUserItem {
    displayName: string;
    // 其他需要的字段，比如id: string;
  }
  

• 搜索函数逻辑缺陷：

  • 初始状态下usersToShow是空数组，若API调用失败，清空搜索框时会将users设置为空，导致页面无内容。建议在搜索函数中先判断usersToShow是否有值。
  • 过滤逻辑中直接使用users数组，若users已被过滤，再次过滤会基于已过滤后的结果，应该基于原始的usersToShow进行过滤：

    function searchFunction(filter: string) {
      if (!usersToShow.length) return;
      if (filter === "") {
        setUsers(usersToShow);
      } else {
        const qf = usersToShow.filter(v => 
          v.displayName.toLocaleLowerCase().includes(filter.toLocaleLowerCase())
        );
        setUsers(qf);
      }
    }
    

• MSGraphClient调用细节：使用getClient("3")获取V3版本客户端，但调用的是v1.0的API，虽然兼容，但可以统一版本（比如使用.version("v1.0")和V3客户端没问题，或者改用V1客户端），不过这不是主要报错原因。

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