带有@azure/msal-browser 的 office-addin-sso答案

【问题标题】：office-addin-sso with @azure/msal-browser带有@azure/msal-browser 的 office-addin-sso
【发布时间】：2022-09-30 16:27:06
【问题描述】：

是否可以使用office-addin-sso和@azure/msal 浏览器?

我想：

使用OfficeRuntime.auth.getAccessToken()获取身份令牌。
同时使用@azure/msal 浏览器作为后备方法。

我已经设法使上述两种方法都能正常工作，并且可以仅使用 @azure/msal-browser 成功获取 MS Graph 访问令牌。

鉴于我们想使用带有 PKCE 的 msal-browser/auth 代码流（而不是 msal/隐式流）作为后备，那么获得MS Graph 访问令牌在这种情况下。

并鉴于 office-addin-sso 包使用代表流量（需要一个秘密和重定向）。

任何帮助/建议或指导将不胜感激。

标签： azure-active-directory office-js office-addins msal outlook-web-addins

【解决方案1】：

我在office-addin-sso 中使用@azure/msal-browser。我的插件适用于单个域，用户应该在 OneDrive 上登录，所以我希望永远不需要通过后备登录。我从 msal 静默获取令牌，然后将其传递给 MS graph 以获取访问令牌。这是在ssoauthhelper.ts 中执行此操作的代码：

import * as Msal from '@azure/msal-browser';
export async function getToken_Email() {
  try {
    const msalConfig: Msal.Configuration = {
      auth: {
        clientId: "<your client id>", //This is your client ID
        authority: "https://login.microsoftonline.com/<tenant id>", //The <tenant> in the URL is the tenant ID of the Azure Active Directory (Azure AD) tenant (a GUID), or its tenant domain.
        redirectUri: "https://<your server>/office-js/fallbackauthdialog.html",
        navigateToLoginRequestUrl: false,
      },
      cache: {
        cacheLocation: "localStorage", // Needed to avoid "User login is required" error.
        storeAuthStateInCookie: true, // Recommended to avoid certain IE/Edge issues.
      },
    };

    const msalInstance = new Msal.PublicClientApplication(msalConfig);
    const silentRequest = {
      scopes: ["User.Read", "openid", "profile"]
    };
    let access_token: string;
    try {
      const loginResponse = await msalInstance.ssoSilent(silentRequest);
      access_token = loginResponse.accessToken;
    } catch (err) {
      if (err instanceof Msal.InteractionRequiredAuthError) {
        const loginResponse = await msalInstance.loginPopup(silentRequest).catch(error => {
          // handle error
        });
      } else {
        // handle error
      }
    }

    console.log('silent token response: ' + JSON.stringify(access_token));


    // makeGraphApiCall makes an AJAX call to the MS Graph endpoint. Errors are caught
    // in the .fail callback of that call
    const graph_response: any = await makeGraphApiCall(access_token);
    console.log('graph response: ' + JSON.stringify(graph_response));
  } catch (exception) {
    console.log(exception);
  }
}

export async function makeGraphApiCall(accessToken: string): Promise < any > {
  try {
    const response = await $.ajax({
      type: "GET",
      url: "https://graph.microsoft.com/oidc/userinfo/",
      headers: {
        access_token: accessToken,
        Authorization: 'Bearer ' + accessToken + ' '
      },
      cache: false,
    });
    return response;
  } catch (err) {
    console.log(`Error from Microsoft Graph. \n${err}`);
  }
}

【讨论】：

非常感谢你的回复。它非常有帮助。这两种方法之间有什么区别：(1) 使用 @azure/msal-browser 获取访问令牌 [然后使用它访问 MS Graph] 或 (2) 使用 OfficeRuntime.auth.getAccessToken() 获取身份然后可以将其交换为访问令牌的令牌 [然后使用它来访问 MS Graph] 使用 (2) 的好处/优势是什么？
我尝试了几种不同的方法，而我的答案中的一种是唯一对我有用的方法。我不知道不同方法之间是否有区别。
真的很感谢你的帮助。 Microsoft 文档相当有限，尤其是当您想要跳出 Yeoman Generator 的“高级快速入门”世界时。
欢迎您 :-) 同意 Yeoman Generator 解决方案，非常有限且难以从头开始。我花了几个月的时间才弄清楚如何默默地获取令牌。如果您觉得有帮助，您可以接受我的回答作为答案。
我没有真正看到使用 OfficeRuntime.auth.getAccessToken() 的 Onbehalf 流的用法。这是标准 PKCE 流程，不使用来自 Office 主机的 sso 令牌。

【解决方案2】：

是的。 Microsoft 在下面的链接中提供的快速入门完全符合您的要求：

使用 OfficeRuntime.auth.getAccessToken() 获取身份令牌
同时使用@azure/msal-browser 作为后备方法。

按照使用 Yo Office 的快速入门， https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/sso-quickstart

【讨论】：