如何使用TeamsFx useGraph钩子获取Teams会议信息及问题排查

我希望使用TeamsFx React包调用MS Graph Api，自行编写了独立组件，代码如下：

import { useContext  } from "react";
import {  useGraph } from "@microsoft/teamsfx-react";
import { TeamsFxContext } from "../Context";
import { TeamsFxProvider } from "@microsoft/mgt-teamsfx-provider";
import { Providers, ProviderState } from "@microsoft/mgt-element";
import * as microsoftTeams from "@microsoft/teams-js";

export function MeetingContext(props: { showFunction?: boolean; environment?: string }) {
const { teamsfx } = useContext(TeamsFxContext);
const { loading, error, data, reload } = useGraph(
    async (graph, teamsfx, scope) => {
      // 直接调用Graph API获取用户配置信息
      let profile;
      try {
          profile = await graph.api("/me").get();
      } catch (error) {
          console.log(error);
      }

      // 初始化Graph Toolkit TeamsFx提供程序
      const provider = new TeamsFxProvider(teamsfx, scope);
      Providers.globalProvider = provider;
      Providers.globalProvider.setState(ProviderState.SignedIn);

      let photoUrl = "";
      let meeting =null;
      try {
        const photo = await graph.api("/me/photo/$value").get();
        photoUrl = URL.createObjectURL(photo);
        microsoftTeams.getContext(async (context)=>{
            console.log(context);
            try {
                meeting = await graph.api(`/me/onlineMeetings/${context.meetingId}`).get();
                
            } catch (error) {
                console.error(error);
            }
            
        })
    } catch {
        // 无法从用户配置中获取头像，返回空字符串作为占位符
    }
    console.log(meeting);
      return { meeting };
    },
    { scope: ["User.Read","User.Read","OnlineMeetingArtifact.Read.All"," OnlineMeetings.Read"], teamsfx: teamsfx }
    );
return (
    <>
    </>
)
}

调试时解释器执行到profile = await graph.api("/me").get();语句时中断，后续代码无法继续执行。
待确认的问题：

• scope字段应当填写什么内容？是否需要配置官方文档中列出的对应授权权限？
• 是否需要在Azure门户的已注册应用中添加对应权限？

问题更新 #

第一次更新 #

调试时收到如下报错：

Failed to get access token cache silently, please login first: you need login first before get access token.

我使用Teams Toolkit开发，已经完成开发账号登录，不清楚需要执行什么操作才能被系统识别为已登录状态。

第二次更新 #

在Azure门户中更新应用的API授权后，上述token获取报错已经消失，但出现了新的报错：

meeting = await graph.api(`/me/onlineMeetings/${context.chatId}`).get();

对应报错内容：

"Invalid meeting id 19:meeting_MzU0MzFhYTQtNjlmOS00NGI4LTg1MTYtMGI3ZTkwOWYwMzk4@thread.v2."

该meeting ID格式错误问题不属于本次原始问题范畴，将另行发布提问咨询。

解答 #

1. 登录报错修复
   提示需要先登录的核心原因是应用运行时没有主动触发对应权限的授权流程，你在Teams Toolkit里完成的开发账号登录不等于应用运行时拿到了访问Graph的有效令牌。修复时需要在调用useGraph前先校验TeamsFx实例的登录状态，未登录时调用login()方法拉起授权弹窗，用户完成授权后再执行Graph请求即可。另外你代码里的scope数组存在重复声明的User.Read， OnlineMeetings.Read项前面多了冗余空格，会导致权限申请异常，需要先修正。
2. scope填写规则
   scope必须和你调用的Graph接口要求的委托权限完全匹配，不需要多填无关权限：
   • 调用/me、/me/photo/$value接口只需要User.Read权限
   • 调用/me/onlineMeetings/{meetingId}查询会议信息只需要OnlineMeetings.Read权限，如果后续要修改会议信息可以换成OnlineMeetings.ReadWrite
   • OnlineMeetingArtifact.Read.All是用来读取会议录制、纪要等附属文件的，查询会议基础信息用不上，不需要加
     修正后合法的scope配置为["User.Read", "OnlineMeetings.Read"]，所有权限字符串不要带多余空格、不要重复声明。
3. Azure端权限配置要求
   需要在Azure AD应用注册的API权限板块，添加上述对应的Microsoft Graph委托权限。如果是用Teams Toolkit做本地调试，直接在项目根目录的aad.manifest.json里声明所需权限即可，启动调试时Teams Toolkit会自动完成权限配置，不需要手动去Azure门户操作。如果是面向组织内用户发布正式版本，配置完权限后需要租户管理员点击「授予管理员同意」，否则普通用户登录时会触发权限不足报错。
4. 现有代码的其他逻辑问题
   你把查询会议信息的逻辑写在了microsoftTeams.getContext的异步回调里，外层代码执行到return { meeting }的时候回调还没执行完，拿到的永远是初始的null值。需要把Teams上下文获取逻辑封装成Promise，拿到合法的meetingId之后再发起Graph查询，才能拿到正确的会议数据。

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