Habilitar logon único em um Suplemento do Office com autenticação de aplicativo aninhado

Inicializar a biblioteca MSAL

Em seguida, você precisa inicializar a MSAL e obter uma instância do aplicativo cliente público.

Adicione o código a seguir ao taskpane.js arquivo ou taskpane.ts . Substitua o espaço reservado Enter_the_Application_Id_Here pela ID do aplicativo do Azure que você salvou anteriormente. Sobre a seguinte observação de código:

• A initMsal função inicializa MSAL chamando createNestablePublicClientApplication. Isso cria um aplicativo cliente público aninhado que oferece suporte ao SSO com o Outlok.
• A initMsal função define a autoridade como comum, que dá suporte a contas corporativas e de estudante ou contas pessoais da Microsoft. Se você quiser configurar um único locatário ou outros tipos de conta, consulte Opções de configuração do aplicativo para obter opções de autoridade adicionais.

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

Adquira seu primeiro token

Os tokens adquiridos pelo MSAL.js via NAA serão emitidos para sua ID de registro do aplicativo Azure. Nesta amostra de código, você adquire um token para a API do Graph. Se o usuário tiver uma sessão ativa com o Microsoft Entra ID, o token será adquirido silenciosamente. Caso contrário, a biblioteca solicitará que o usuário entre interativamente. O token é então usado para chamar a API do Graph.

As etapas a seguir mostram o padrão a ser usado para adquirir um token.

1. Especifique seus escopos. O NAA dá suporte ao consentimento incremental e dinâmico, portanto, sempre solicite os escopos mínimos necessários para que seu código conclua sua tarefa.
2. Chamar acquireTokenSilent. Isso obterá o token sem exigir interação do usuário.
3. Se acquireTokenSilent falhar, chame acquireTokenPopup para exibir uma caixa de diálogo interativa para o usuário. acquireTokenSilent poderá falhar se o token tiver expirado ou se o usuário ainda não tiver consentido com todos os escopos solicitados.

O código a seguir mostra como implementar esse padrão de autenticação em seu próprio projeto.

1. Substitua a run função no taskpane.js código a seguir ou taskpane.ts pelo seguinte. O código especifica os escopos mínimos necessários para ler os arquivos do usuário.

   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

   A solicitação de token deve incluir escopos diferentes de apenas offline_access, openid, profile, ou email. Você pode usar qualquer combinação dos escopos anteriores, mas deve incluir pelo menos um escopo adicional. Caso contrário, a solicitação de token poderá falhar.

2. Substitua TODO 1 pelo código a seguir. Esse código chama acquireTokenSilent para obter o token de acesso.

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

3. Substitua TODO 1a pelo código a seguir. Este código verifica se acquireTokenSilent foi lançado um InteractionRequiredAuthErrordomínio . Nesse caso, o código chama acquireTokenPopup para que a MSAL possa usar uma caixa de diálogo pop-up para interagir com o usuário. A interação pode ser necessária por vários motivos, como a conclusão da autorização multifator.

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

Chamar uma API

Depois de adquirir o token, use-o para chamar uma API. O exemplo a seguir mostra como chamar a API do Graph chamando fetch com o token anexado no cabeçalho Autorização.

• Substitua TODO 2 pelo código a seguir.

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

Depois que todo o código anterior for adicionado à run função, verifique se um botão no painel de tarefas chama a run função. Em seguida, você pode fazer sideload do suplemento e experimentar o código.

Inicializar a biblioteca MSAL

Em seguida, você precisa inicializar a MSAL e obter uma instância do aplicativo cliente público. Isso é usado para obter tokens de acesso quando necessário. Recomendamos que você coloque o Office.onReady código que cria o aplicativo cliente público no método.

1. Adicione a seguinte initMsal função ao arquivo outaskpane.ts.taskpane.js Ele chama createNestablePublicClientApplication para inicializar uma instância MSAL para usar o NAA.
2. Substitua o espaço reservado Enter_the_Application_Id_Here pela ID do aplicativo do Azure que você salvou 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);
  }
}

Adicionar uma função para obter a dica de logon

Ao executar no Word, Excel ou PowerPoint no navegador, você deve fornecer uma dica de logon à MSAL para identificar a conta correta. Você pode obter a dica de logon na propriedade Office authContext.userPrincipalName . Adicione a função a seguir, que pode ser chamada a qualquer momento, para obter a dica de logon.

Adicione a taskpane.js seguinte função ao arquivo 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;
}

Adquirir o token de acesso

Crie uma função para adquirir o token de acesso.

Adicione a taskpane.js seguinte função ao arquivo ou taskpane.ts . Sobre a seguinte observação de código:

• Ele obtém a dica de logon necessária ao executar no Word, Excel ou PowerPoint em um navegador.
• Ele chama ssoSilent (not acquireTokenSilent) para obter um token de acesso.
• Se ssoSilent falhar, ele verifica se a interação é necessária. Nesse caso, ele chama acquireTokenPopup para que a MSAL possa interagir com o usuário.

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

}

Obter token e chamar a API do Graph

Depois de adquirir o token, use-o para chamar uma API. O exemplo a seguir mostra como chamar a API do Graph chamando fetch com o token anexado no cabeçalho Autorização.

Atualize a runtaskpane.js função no arquivo ou taskpane.ts para corresponder ao código a seguir. Sobre a seguinte observação de código:

• Ele chama a acquireAccessToken função criada anteriormente e passa os escopos Files.Read and User.Read . A solicitação de token deve incluir escopos diferentes de apenas offline_access, openid, profile, ou email. Você pode usar qualquer combinação dos escopos anteriores, mas deve incluir pelo menos um escopo adicional. Caso contrário, a solicitação de token poderá falhar.
• Ele usa o token de acesso para fazer uma chamada à API do Graph Microsoft para recuperar 10 nomes de arquivo do usuário do 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);
  }
}

Depois que todo o código anterior for adicionado à run função, verifique se um botão no painel de tarefas chama a run função. Em seguida, você pode fazer sideload do suplemento e experimentar o código.