Habilitación del inicio de sesión único en un complemento de Office con autenticación de aplicaciones anidadas

Inicializar la biblioteca MSAL

A continuación, debe inicializar MSAL y obtener una instancia de la aplicación cliente pública.

Agregue el código siguiente al taskpane.js archivo o taskpane.ts . Reemplace el marcador de Enter_the_Application_Id_Here posición por el identificador de aplicación de Azure que guardó anteriormente. Acerca de la siguiente nota de código:

• La initMsal función inicializa MSAL llamando a createNestablePublicClientApplication. Esto crea una aplicación cliente pública anidable que admite el inicio de sesión único con Outlok.
• La initMsal función establece la autoridad en común, que admite cuentas profesionales y educativas o cuentas personales de Microsoft. Si desea configurar un único inquilino u otros tipos de cuenta, consulte Opciones de configuración de la aplicación para obtener opciones de autoridad adicionales.

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

Adquisición del primer token

Los tokens adquiridos por MSAL.js a través de NAA se emitirán para el identificador de registro de la aplicación Azure. En este ejemplo de código, adquirirá un token para microsoft Graph API. Si el usuario tiene una sesión activa con Microsoft Entra ID el token se adquiere de forma silenciosa. Si no es así, la biblioteca solicita al usuario que inicie sesión de forma interactiva. A continuación, el token se usa para llamar al Graph API de Microsoft.

En los pasos siguientes se muestra el patrón que se va a usar para adquirir un token.

1. Especifique los ámbitos. NAA admite el consentimiento incremental y dinámico, por lo que siempre solicite los ámbitos mínimos necesarios para que el código complete su tarea.
2. Llamar a acquireTokenSilent. Esto obtendrá el token sin necesidad de interacción del usuario.
3. Si acquireTokenSilent se produce un error, llame acquireTokenPopup a para mostrar un cuadro de diálogo interactivo para el usuario. acquireTokenSilent puede producir un error si el token ha expirado o el usuario aún no ha dado su consentimiento a todos los ámbitos solicitados.

En el código siguiente se muestra cómo implementar este patrón de autenticación en su propio proyecto.

1. Reemplace la run función en taskpane.js o taskpane.ts por el código siguiente. El código especifica los ámbitos mínimos necesarios para leer los archivos del usuario.

   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.
   }
   

   Importante

   La solicitud de token debe incluir ámbitos distintos de , offline_access, profileopenido email. Puede usar cualquier combinación de los ámbitos anteriores, pero debe incluir al menos un ámbito adicional. Si no es así, la solicitud de token puede producir un error.

2. Reemplace TODO 1 por el código siguiente. Este código llama acquireTokenSilent a para obtener el token de acceso.

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

3. Reemplace TODO 1a por el código siguiente. Este código comprueba si acquireTokenSilent se ha producido un InteractionRequiredAuthErrorerror . Si es así, el código llama a acquireTokenPopup para que MSAL pueda usar un cuadro de diálogo emergente para interactuar con el usuario. La interacción puede ser necesaria por diversos motivos, como completar la autorización multifactor.

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

Llamada a una API

Después de adquirir el token, úselo para llamar a una API. En el ejemplo siguiente se muestra cómo llamar a Microsoft Graph API mediante una llamada con fetch el token adjunto en el encabezado Authorization.

• Reemplace TODO 2 por el código siguiente.

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

Una vez agregado todo el código anterior a la run función, asegúrese de que un botón del panel de tareas llama a la run función. A continuación, puede transferir localmente el complemento y probar el código.

Inicializar la biblioteca MSAL

A continuación, debe inicializar MSAL y obtener una instancia de la aplicación cliente pública. Esto se usa para obtener tokens de acceso cuando es necesario. Se recomienda colocar el código que crea la aplicación cliente pública en el Office.onReady método .

1. Agregue la siguiente initMsal función al taskpane.js archivo o taskpane.ts . Llama createNestablePublicClientApplication a para inicializar una instancia de MSAL para usar NAA.
2. Reemplace el marcador de Enter_the_Application_Id_Here posición por el identificador de aplicación de Azure que guardó anteriormente.

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

Agregar una función para obtener la sugerencia de inicio de sesión

Cuando se ejecuta en Word, Excel o PowerPoint en el explorador, debe proporcionar una sugerencia de inicio de sesión a MSAL para identificar la cuenta correcta. Puede obtener la sugerencia de inicio de sesión de la propiedad Office authContext.userPrincipalName . Agregue la siguiente función a la que se puede llamar en cualquier momento para obtener la sugerencia de inicio de sesión.

Agregue la siguiente función al taskpane.js archivo o 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;
}

Adquisición del token de acceso

Cree una función para adquirir el token de acceso.

Agregue la siguiente función al taskpane.js archivo o taskpane.ts . Acerca de la siguiente nota de código:

• Obtiene la sugerencia de inicio de sesión necesaria al ejecutarse en Word, Excel o PowerPoint en un explorador.
• Llama a ssoSilent (no acquireTokenSilent) para obtener un token de acceso.
• Si ssoSilent se produce un error, comprueba si es necesaria la interacción. Si es así, llama a acquireTokenPopup para que MSAL pueda interactuar con el usuario.

/**
 * 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;

}

Obtenga el token y llame al Graph API

Después de adquirir el token, úselo para llamar a una API. En el ejemplo siguiente se muestra cómo llamar a Microsoft Graph API mediante una llamada con fetch el token adjunto en el encabezado Authorization.

Actualice la run función en el taskpane.js archivo o taskpane.ts para que coincida con el código siguiente. Acerca de la siguiente nota de código:

• Llama a la acquireAccessToken función que creó anteriormente y pasa los Files.Read ámbitos y User.Read . La solicitud de token debe incluir ámbitos distintos de , offline_access, profileopenido email. Puede usar cualquier combinación de los ámbitos anteriores, pero debe incluir al menos un ámbito adicional. Si no es así, la solicitud de token puede producir un error.
• Usa el token de acceso para realizar una llamada a Microsoft Graph API para recuperar 10 de los nombres de archivo del usuario de OneDrive.

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

Una vez agregado todo el código anterior a la run función, asegúrese de que un botón del panel de tareas llama a la run función. A continuación, puede transferir localmente el complemento y probar el código.