Activer l’authentification unique dans un complément Office avec l’authentification d’application imbriquée

Initialiser la bibliothèque MSAL

Ensuite, vous devez initialiser MSAL et obtenir une instance de l’application cliente publique.

Ajoutez le code suivant au taskpane.js fichier ou taskpane.ts . Remplacez l’espace Enter_the_Application_Id_Here réservé par l’ID d’application Azure que vous avez enregistré précédemment. À propos de la note de code suivante :

• La initMsal fonction initialise MSAL en appelant createNestablePublicClientApplication. Cela crée une application cliente publique imbriquée qui prend en charge l’authentification unique avec Outlok.
• La initMsal fonction définit l’autoritésur common, ce qui prend en charge les comptes professionnels et scolaires ou les comptes Microsoft personnels. Si vous souhaitez configurer un seul locataire ou d’autres types de comptes, consultez Options de configuration d’application pour obtenir des options d’autorité supplémentaires.

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

Acquérir votre premier jeton

Les jetons acquis par MSAL.js via NAA seront émis pour votre ID d’inscription d’application Azure. Dans cet exemple de code, vous obtenez un jeton pour microsoft API Graph. Si l’utilisateur dispose d’une session active avec Microsoft Entra ID le jeton est acquis en mode silencieux. Si ce n’est pas le cas, la bibliothèque invite l’utilisateur à se connecter de manière interactive. Le jeton est ensuite utilisé pour appeler le API Graph Microsoft.

Les étapes suivantes montrent le modèle à utiliser pour l’acquisition d’un jeton.

1. Spécifiez vos étendues. NAA prend en charge le consentement incrémentiel et dynamique. Demandez donc toujours les étendues minimales nécessaires pour que votre code termine sa tâche.
2. Appel acquireTokenSilent. Cela permet d’obtenir le jeton sans nécessiter l’interaction de l’utilisateur.
3. En acquireTokenSilent cas d’échec, appelez acquireTokenPopup pour afficher une boîte de dialogue interactive pour l’utilisateur. acquireTokenSilent peut échouer si le jeton a expiré ou si l’utilisateur n’a pas encore consenti à toutes les étendues demandées.

Le code suivant montre comment implémenter ce modèle d’authentification dans votre propre projet.

1. Remplacez la run fonction dans taskpane.js ou taskpane.ts par le code suivant. Le code spécifie les étendues minimales nécessaires pour lire les fichiers de l’utilisateur.

   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 demande de jeton doit inclure des étendues autres que , offline_accessopenid, profileou email. Vous pouvez utiliser n’importe quelle combinaison des étendues précédentes, mais vous devez inclure au moins une étendue supplémentaire. Si ce n’est pas le cas, la demande de jeton peut échouer.

2. Remplacez TODO 1 par le code suivant. Ce code appelle acquireTokenSilent pour obtenir le jeton d’accès.

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

3. Remplacez TODO 1a par le code suivant. Ce code vérifie si acquireTokenSilent a levé un InteractionRequiredAuthError. Si c’est le cas, le code appelle acquireTokenPopup afin que MSAL puisse utiliser une boîte de dialogue contextuelle pour interagir avec l’utilisateur. L’interaction peut être nécessaire pour diverses raisons, telles que l’exécution de l’autorisation multifacteur.

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

Appeler une API

Après avoir acquis le jeton, utilisez-le pour appeler une API. L’exemple suivant montre comment appeler le API Graph Microsoft en appelant fetch avec le jeton attaché dans l’en-tête Authorization.

• Remplacez TODO 2 par le code suivant.

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

Une fois que tout le code précédent est ajouté à la run fonction, assurez-vous qu’un bouton du volet Office appelle la run fonction. Vous pouvez ensuite charger une version test du complément et essayer le code.

Initialiser la bibliothèque MSAL

Ensuite, vous devez initialiser MSAL et obtenir une instance de l’application cliente publique. Il est utilisé pour obtenir des jetons d’accès si nécessaire. Nous vous recommandons de placer le code qui crée l’application cliente publique dans la Office.onReady méthode .

1. Ajoutez la fonction suivante initMsal au taskpane.js fichier ou taskpane.ts . Il appelle createNestablePublicClientApplication pour initialiser un instance MSAL pour utiliser NAA.
2. Remplacez l’espace Enter_the_Application_Id_Here réservé par l’ID d’application Azure que vous avez enregistré précédemment.

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

Ajouter une fonction pour obtenir l’indicateur de connexion

Lors de l’exécution dans Word, Excel ou PowerPoint dans le navigateur, vous devez fournir un indicateur de connexion à MSAL pour identifier le compte approprié. Vous pouvez obtenir l’indicateur de connexion à partir de la propriété Office authContext.userPrincipalName . Ajoutez la fonction suivante qui peut être appelée à tout moment pour obtenir l’indicateur de connexion.

Ajoutez la fonction suivante au taskpane.js fichier ou 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;
}

Acquérir le jeton d’accès

Créez une fonction pour acquérir le jeton d’accès.

Ajoutez la fonction suivante au taskpane.js fichier ou taskpane.ts . À propos de la note de code suivante :

• Il obtient l’indicateur de connexion requis lors de l’exécution dans Word, Excel ou PowerPoint dans un navigateur.
• Il appelle ssoSilent (pas acquireTokenSilent) pour obtenir un jeton d’accès.
• En ssoSilent cas d’échec, il vérifie si l’interaction est requise. Si tel est le cas, il appelle acquireTokenPopup pour que MSAL puisse interagir avec l’utilisateur.

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

}

Obtenir le jeton et appeler le API Graph

Après avoir acquis le jeton, utilisez-le pour appeler une API. L’exemple suivant montre comment appeler le API Graph Microsoft en appelant fetch avec le jeton attaché dans l’en-tête Authorization.

Mettez à jour la run fonction dans le taskpane.js fichier ou taskpane.ts pour qu’elle corresponde au code suivant. À propos de la note de code suivante :

• Il appelle la acquireAccessToken fonction que vous avez créée précédemment et passe les Files.Read étendues et User.Read . La demande de jeton doit inclure des étendues autres que , offline_accessopenid, profileou email. Vous pouvez utiliser n’importe quelle combinaison des étendues précédentes, mais vous devez inclure au moins une étendue supplémentaire. Si ce n’est pas le cas, la demande de jeton peut échouer.
• Il utilise le jeton d’accès pour appeler l’API Graph Microsoft afin de récupérer 10 des noms de fichiers de l’utilisateur à partir 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);
  }
}

Une fois que tout le code précédent est ajouté à la run fonction, assurez-vous qu’un bouton du volet Office appelle la run fonction. Vous pouvez ensuite charger une version test du complément et essayer le code.