Office-addin-sso 与 @azure/msal-browser

Question

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

我想：

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

我已成功实现上述两项工作，并且仅使用 @azure/msal-browser 即可成功获取 MS Graph 访问令牌。

鉴于我们希望使用带有 PKCE 的 msal-browser/auth 代码流（而不是 msal/隐式流）进行回退，在此获取 MS Graph 访问令牌的最有效方法是什么语境。

考虑到 office-addin-sso 包使用代表流程（需要机密和重定向）。

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

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