使用嵌套应用身份验证在 Office 外接程序中启用单一登录

初始化 MSAL 库

接下来，需要初始化 MSAL 并获取 公共客户端应用程序的实例。

将以下代码添加到 taskpane.js 或 taskpane.ts 文件。 将Enter_the_Application_Id_Here占位符替换为之前保存Azure应用 ID。 关于以下代码说明：

• 函数 initMsal 通过调用 createNestablePublicClientApplication初始化 MSAL。 这将创建一个支持 Outlok 的 SSO 的可嵌套公共客户端应用程序。
• 函数 initMsal 将 权限 设置为 common，这支持工作和学校帐户或个人Microsoft帐户。 如果要配置单个租户或其他帐户类型，请参阅 应用程序配置选项 ，了解其他颁发机构选项。

let msalInstance = undefined;

/**
 * Initialize MSAL as a nestable public client application.
  */
async function initMsal() {
  if (!msalInstance) {
    const clientId = "Enter_the_Application_Id_Here";
    const msalConfig = {
      auth: {
        clientId: clientId,
        authority: "https://login.microsoftonline.com/common"
      },
      cache: {
        cacheLocation: "localStorage"
      }
    };
    msalInstance = await createNestablePublicClientApplication(msalConfig);
  }
}

获取第一个令牌

MSAL.js 通过 NAA 获取的令牌将为Azure应用注册 ID 颁发。 在此代码示例中，你将获取Microsoft图形 API的令牌。 如果用户具有具有Microsoft Entra ID则以无提示方式获取令牌。 否则，库会提示用户以交互方式登录。 然后，该令牌用于调用Microsoft图形 API。

以下步骤显示了用于获取令牌的模式。

1. 指定范围。 NAA 支持增量和动态同意，因此始终请求代码完成其任务所需的最小范围。
2. 调用 acquireTokenSilent。 这将获取令牌，而无需用户交互。
3. 如果 acquireTokenSilent 失败，请调用 acquireTokenPopup 以显示用户的交互式对话。 acquireTokenSilent 如果令牌过期，或者用户尚未同意所有请求的范围，则可能会失败。

以下代码演示如何在自己的项目中实现此身份验证模式。

1. 将 run 或 taskpane.ts 中的 taskpane.js 函数替换为以下代码。 代码指定读取用户文件所需的最小范围。

   export async function run() {
     await initMsal();
     // Specify minimum scopes needed for the access token.
     const tokenRequest = {
       scopes: ["Files.Read", "User.Read"],
     };
     let accessToken = null;
   
     // TODO 1: Use msalInstance to get an access token.
   
     // TODO 2: Call the Microsoft Graph API.
   }
   

   重要

   令牌请求必须包含范围，而不仅仅是 offline_access、 openid、 profile或 email。 可以使用上述范围的任意组合，但必须至少包含一个附加范围。 否则，令牌请求可能会失败。

2. 将 TODO 1 替换为下面的代码。 此代码调用 acquireTokenSilent 以获取访问令牌。

   try {
     const userAccount = await msalInstance.acquireTokenSilent(tokenRequest);
     console.log("Acquired token silently.");
     accessToken = userAccount.accessToken;
   } catch (silentError) {
     // TODO 1a: Handle acquireTokenSilent failure.
   
   }
   

3. 将 TODO 1a 替换为下面的代码。 此代码检查是否 acquireTokenSilent 抛 InteractionRequiredAuthError出 。 如果是这样，代码将调用 acquireTokenPopup ，以便 MSAL 可以使用弹出对话框与用户交互。 由于各种原因（例如完成多重授权），可能需要交互。

   if (silentError instanceof InteractionRequiredAuthError) {
     console.log(`Unable to acquire token silently: ${silentError}`);
     // Silent acquisition failed. Continue to interactive acquisition.
     try {
       const userAccount = await msalInstance.acquireTokenPopup(tokenRequest);
       console.log("Acquired token interactively.");
       accessToken = userAccount.accessToken;
     } catch (popupError) {
       // Acquire token interactive failure.
       console.error(`Unable to acquire token interactively: ${popupError}`);
       return;
     }
   } else {
     // Acquire token silent failure. Error can't be resolved through interaction.
     console.error(`Unable to acquire token silently: ${silentError}`);
     return;
   }
   

调用 API

获取令牌后，使用它调用 API。 以下示例演示如何使用 Authorization 标头中附加的令牌调用 fetch Microsoft 图形 API。

• 将 TODO 2 替换为下面的代码。

  // Call the Microsoft Graph API with the access token.
  const response = await fetch(
    `https://graph.microsoft.com/v1.0/me/drive/root/children?$select=name&$top=10`,
    {
      headers: { Authorization: `Bearer ${accessToken}` },
    }
  );
  
  if (response.ok) {
    // Write file names to the console.
    const data = await response.json();
    const names = data.value.map((item) => item.name);
  
    // Be sure the taskpane.html has an element with Id = item-subject.
    const label = document.getElementById("item-subject");
  
    // Write file names to task pane and the console.
    const nameText = names.join(", ");
    if (label) label.textContent = nameText;
    console.log(nameText);
  } else {
    const errorText = await response.text();
    console.error("Microsoft Graph call failed - error text: " + errorText);
  }
  

将上述所有代码添加到 run 函数后，请确保任务窗格上的按钮调用函数 run 。 然后，你可以旁加载加载项并试用代码。

初始化 MSAL 库

接下来，需要初始化 MSAL 并获取 公共客户端应用程序的实例。 这用于在需要时获取访问令牌。 建议将创建公共客户端应用程序的代码放在 方法中 Office.onReady 。

1. 将以下 initMsal 函数添加到 taskpane.js 或 taskpane.ts 文件。 它调用 createNestablePublicClientApplication 初始化 MSAL 实例以使用 NAA。
2. 将Enter_the_Application_Id_Here占位符替换为之前保存Azure应用 ID。

let msalInstance = null; // MSAL instance

/**
 * Initialize MSAL as a nestable public client application.
 */
async function initMsal() {
  if (!msalInstance) {
    const clientId = "Enter_the_Application_Id_Here";
    const msalConfig = {
      auth: {
        clientId: clientId,
        authority: "https://login.microsoftonline.com/common"
      },
      cache: {
        cacheLocation: "localStorage"
      }
    };
    msalInstance = await createNestablePublicClientApplication(msalConfig);
  }
}

添加函数以获取登录提示

在浏览器中的 Word、Excel 或 PowerPoint 中运行时，必须向 MSAL 提供登录提示才能标识正确的帐户。 可以从 Office authContext.userPrincipalName 属性获取登录提示。 添加以下函数，该函数可随时调用以获取登录提示。

将以下函数添加到 taskpane.js 或 taskpane.ts 文件。

/**
 * Get the login hint from Office.AuthContext for a better SSO experience.
 * This is especially important for Office in a browser.
 */
async function getLoginHint() {
    try {
        if (typeof Office !== "undefined" && Office.context) {
            const authContext = await Office.auth.getAuthContext();
            if (authContext?.userPrincipalName) return authContext.userPrincipalName;
        }
    } catch (error) {
        console.warn("Could not get login hint:", error);
    }
    return null;
}

获取访问令牌

生成一个函数来获取访问令牌。

将以下函数添加到 taskpane.js 或 taskpane.ts 文件。 关于以下代码说明：

• 它获取在浏览器中的 Word、Excel 或 PowerPoint 中运行时所需的登录提示。
• 它调用 ssoSilent (not acquireTokenSilent) 来获取访问令牌。
• 如果 ssoSilent 失败，它会检查是否需要交互。 如果是这样，它将调用 acquireTokenPopup ，以便 MSAL 可以与用户交互。

/**
 * Acquire an access token silently, or interactively if needed.
 * @param {Array} scopes - The scopes for which the token is requested.
 * @returns {Promise<string>} - The acquired access token.
 */
async function acquireAccessToken(scopes) {
  await initMsal();

  const request = {
    scopes: scopes,
    loginHint: await getLoginHint()
  }

  let authResult = null;
  try {
    authResult = await msalInstance.ssoSilent(request);
  } catch (error) {
    if (error instanceof InteractionRequiredAuthError) {
      authResult = await msalInstance.acquireTokenPopup(request);
    } else {
      console.error("Silent token acquisition failed:", error);
    }
  }
  if (!authResult) {
    throw new Error("Could not acquire access token");
  }
  console.log(authResult);
  return authResult.accessToken;

}

获取令牌并调用图形 API

获取令牌后，使用它调用 API。 以下示例演示如何使用 Authorization 标头中附加的令牌调用 fetch Microsoft 图形 API。

run更新 或 taskpane.ts 文件中的 taskpane.js 函数以匹配以下代码。 关于以下代码说明：

• 它调用 acquireAccessToken 前面创建的函数， Files.Read 并传递 和 User.Read 范围。 令牌请求必须包含范围，而不仅仅是 offline_access、 openid、 profile或 email。 可以使用上述范围的任意组合，但必须至少包含一个附加范围。 否则，令牌请求可能会失败。
• 它使用访问令牌调用 Microsoft 图形 API从 OneDrive 检索 10 个用户的文件名。

export async function run() {
  let accessToken;
  try {
    // Acquire an access token for Microsoft Graph.
    accessToken = await acquireAccessToken(["Files.Read", "User.Read"]);
    console.log("Access token acquired:", accessToken);
  }
  catch (error) {
    console.error("Error acquiring access token:", error);
    return;
  }

  // Call the Microsoft Graph API with the access token.
  const response = await fetch(
    `https://graph.microsoft.com/v1.0/me/drive/root/children?$select=name&$top=10`,
    {
      headers: { Authorization: `Bearer ${accessToken}` },
    }
  );

  if (response.ok) {
    // Write file names to the console.
    const data = await response.json();
    const names = data.value.map((item) => item.name);

    // Be sure the taskpane.html has an element with Id = item-subject.
    const label = document.getElementById("item-subject");

    // Write file names to task pane and the console.
    const nameText = names.join(", ");
    if (label) label.textContent = nameText;
    console.log(nameText);
  } else {
    const errorText = await response.text();
    console.error("Microsoft Graph call failed - error text: " + errorText);
  }
}

将上述所有代码添加到 run 函数后，请确保任务窗格上的按钮调用函数 run 。 然后，你可以旁加载加载项并试用代码。