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

Question

是否可以将 office-addin-sso 与 @azure/msal-browser 一起使用？

我愿意：

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

我已经设法使上述两个工作正常，并且可以仅使用@azure/msal-browser.

成功获得 MS Graph 访问令牌

鉴于我们想使用带有 PKCE 的 msal-browser/auth 代码流（而不是 msal/implicit 流）作为回退，获得 MS 的最有效方法是什么在此上下文中的图访问令牌。

并且假设 office-addin-sso 包使用 On Behalf Of Flow（需要密码和重定向）。

任何 help/suggestions 或指导将不胜感激。

Answer 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}`);
  }
}

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

office-addin-sso with @azure/msal-browser

office-addins

azure-active-directory

office-js

outlook-web-addins

msal