使用 REACT 和 MSAL.JS 开发 Outlook Web 加载项的身份验证问题

Question

我正在使用

开发 Outlook Web 插件

• Yeoman 发电机办公室
• Office.Js
• 反应框架
• azure/msal-浏览器版本 2.32.2

根据 Microsoft/Office 加载项/MSAL 团队的最佳实践 - 我使用 Office SDK 在 Office 对话中执行弹出窗口身份验证，然后在该弹出窗口内执行登录重定向。在我的 App.tsx 文件中，我有以下代码来执行弹出窗口：

const dialogLoginUrl: string = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + '/login.html';

await Office.context.ui.displayDialogAsync(
  dialogLoginUrl,
  {height: 40, width: 30},
  (result) => {
      if (result.status === Office.AsyncResultStatus.Failed) {
      }
      else {
          loginDialog = result.value;
          loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, this.processLoginMessage);
      }
  }
);

processLoginMessage = async (args: { message: string; origin: string; }) => {
  let messageFromDialog = JSON.parse(args.message);
  if (messageFromDialog.status === 'success') {
    loginDialog.close();
    console.log(messageFromDialog.result.accessToken);    
  }
  else {
    // Something went wrong with authentication or the authorization of the web application.
    loginDialog.close();
  }
}

在我的login.ts 文件中，我有以下代码：

import { PublicClientApplication } from "@azure/msal-browser";

(() => {
    Office.initialize = () => {
        let msalInstance = new PublicClientApplication({
            auth: {
            authority: "https://login.microsoftonline.com/organizations/",
            clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
            },
            cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true,
            },
        });

        const authParamsGraph = {
            scopes: ["https://graph.microsoft.com/.default"]
        };
         msalInstance.handleRedirectPromise()
        .then(async (response) => {
            if (response) {
                Office.context.ui.messageParent(JSON.stringify({ status: 'success', result : response }));
            } else {
                msalInstance.loginRedirect(authParamsGraph);
            }
        })
        .catch(() => {
            console.log('failure');
        });
    };
})();

使用上述设置，我可以很好地获取图形访问令牌，并且一切正常。

我需要的是 - 获取其他资源的访问令牌，即 Outlook 桌面应用程序中的 SharePoint 和 Onedrive。

换句话说，“如何使用 msalInstance.acquireTokenSilent(scope) 获取多个资源的访问令牌”。

到目前为止我已经尝试过但没有运气。

在弹出窗口中使用 login.ts 文件执行登录后 - 我初始化一个新的 MSAL 实例，并尝试使用 acquireTokenSilent 方法获取 SharePoint 的访问令牌。在我的 app.tsx 文件中，我有：

let msalInstance = new PublicClientApplication({
  auth: {
  authority: "https://login.microsoftonline.com/organizations/",
  clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
  },
  cache: {
  cacheLocation: "localStorage",
  storeAuthStateInCookie: true,
  },
});

const authParamsSharePoint = {
  account: messageFromDialog.result.account,
  scopes: ["https://tenant.sharepoint.com/.default"]
};

let spResp = await GlobalVariables.msalInstance.acquireTokenSilent(authParamsSharePoint);

上述内容在浏览器中的 Outlook 中运行良好 - 但在 Outlook 桌面应用程序中不起作用。

我也尝试遵循此实现来请求多个资源的令牌，但没有运气 - https://github.com/AhmadiRamin/office-addins-msal/blob/master/src/helpers/msalHelper.ts

但是，他们使用了 MSAL 版本 1x (UserAgentApplication)，而我使用的是版本 2x (PublicClientApplication)。不确定它是否会导致行为上的任何差异。

Answer 1

据我了解，SharePoint 的访问令牌与图表的访问令牌不同，但您可以使用图表中的访问令牌来获取 SharePoint 的访问令牌。

请参阅 SharePoint Rest API 如何获取访问令牌？ 获取解释此问题的答案。