Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Aplica-se a: Inquilinos da força de trabalho
Inquilinos externos (saiba mais)
O padrão para aquisição de tokens para APIs com a MSAL.js é primeiro tentar fazer uma solicitação de token silenciosa usando o método acquireTokenSilent
. Quando esse método é chamado, a biblioteca primeiro verifica o cache no armazenamento do navegador para verificar se há um token de acesso não expirado e o retorna. Se nenhum token de acesso for encontrado, ou o token de acesso encontrado expirou, ele tentará usar o token de atualização para obter um novo token de acesso. Se o tempo de vida de 24 horas do token de atualização também expirou, o MSAL.js abrirá um iframe oculto para solicitar silenciosamente um novo código de autorização usando a sessão ativa existente com o Microsoft Entra ID (se houver), que será trocado por um novo conjunto de tokens (tokens de atualização e acesso).
Para obter mais informações sobre a sessão de SSO (logon único) e os valores de tempo de vida do token no Microsoft Entra ID, confira Tempos de vida do token. Para obter mais informações sobre a política de pesquisa de cache do MSAL.js, consulte Adquirir um token de acesso.
As solicitações de token silencioso para o Microsoft Entra ID podem falhar por motivos como uma alteração de senha ou políticas de Acesso Condicional atualizadas. Mais frequentemente, as falhas são devido ao tempo de vida de 24 horas do token de atualização expirar e o navegador bloqueando cookies de terceiros, o que impede o uso de iframes ocultos para continuar a autenticar o usuário. Nesses casos, você deve invocar um dos métodos interativos (que podem solicitar ao usuário) para adquirir tokens:
-
Janela pop-up usando
acquireTokenPopup
-
Redirecionamento usando
acquireTokenRedirect
Escolher entre uma experiência de pop-up ou de redirecionamento
A escolha entre uma experiência de pop-up ou de redirecionamento depende do fluxo do seu aplicativo:
- Caso você não deseje que os usuários saiam da página principal do aplicativo durante a autenticação, recomendamos o método de pop-up. Como o redirecionamento da autenticação ocorre em uma janela pop-up, o estado do aplicativo principal é preservado.
- Se os usuários tiverem restrições de navegador ou políticas nas quais as janelas pop-up estejam desabilitadas, você poderá usar o método de redirecionamento. Use o método de redirecionamento com o navegador Internet Explorer, pois há problemas conhecidos com as janelas pop-up no Internet Explorer.
Você poderá definir os escopos de API que deseja incluir no token de acesso quando ele criar a solicitação de token de acesso. Todos os escopos solicitados podem não ser concedidos no token de acesso. Isso depende do consentimento do usuário.
Adquirir um token com uma janela pop-up
O seguinte código combina o padrão descrito anteriormente com os métodos para uma experiência de pop-up:
import {
InteractionRequiredAuthError,
InteractionStatus,
} from "@azure/msal-browser";
import { AuthenticatedTemplate, useMsal } from "@azure/msal-react";
function ProtectedComponent() {
const { instance, inProgress, accounts } = useMsal();
const [apiData, setApiData] = useState(null);
useEffect(() => {
if (!apiData && inProgress === InteractionStatus.None) {
const accessTokenRequest = {
scopes: ["user.read"],
account: accounts[0],
};
instance
.acquireTokenSilent(accessTokenRequest)
.then((accessTokenResponse) => {
// Acquire token silent success
let accessToken = accessTokenResponse.accessToken;
// Call your API with token
callApi(accessToken).then((response) => {
setApiData(response);
});
})
.catch((error) => {
if (error instanceof InteractionRequiredAuthError) {
instance
.acquireTokenPopup(accessTokenRequest)
.then(function (accessTokenResponse) {
// Acquire token interactive success
let accessToken = accessTokenResponse.accessToken;
// Call your API with token
callApi(accessToken).then((response) => {
setApiData(response);
});
})
.catch(function (error) {
// Acquire token interactive failure
console.log(error);
});
}
console.log(error);
});
}
}, [instance, accounts, inProgress, apiData]);
return <p>Return your protected content here: {apiData}</p>;
}
function App() {
return (
<AuthenticatedTemplate>
<ProtectedComponent />
</AuthenticatedTemplate>
);
}
Como alternativa, se você precisar adquirir um token fora de um componente do React, poderá chamar acquireTokenSilent
, mas não deverá retornar para a interação se ela falhar. Todas as interações deverá ocorrer sob o componente MsalProvider
na árvore de componentes.
// MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
const account = publicClientApplication.getAllAccounts()[0];
const accessTokenRequest = {
scopes: ["user.read"],
account: account,
};
// Use the same publicClientApplication instance provided to MsalProvider
publicClientApplication
.acquireTokenSilent(accessTokenRequest)
.then(function (accessTokenResponse) {
// Acquire token silent success
let accessToken = accessTokenResponse.accessToken;
// Call your API with token
callApi(accessToken);
})
.catch(function (error) {
//Acquire token silent failure
console.log(error);
});
Adquirir um token com um redirecionamento
Se acquireTokenSilent
falhar, faça fallback para acquireTokenRedirect
. Esse método inicia um redirecionamento de quadro completo, e a resposta será tratada quando for retornada ao aplicativo. Quando esse componente é renderizado depois de retornado do redirecionamento, acquireTokenSilent
deverá ter êxito, pois os tokens serão extraídos do cache.
import {
InteractionRequiredAuthError,
InteractionStatus,
} from "@azure/msal-browser";
import { AuthenticatedTemplate, useMsal } from "@azure/msal-react";
function ProtectedComponent() {
const { instance, inProgress, accounts } = useMsal();
const [apiData, setApiData] = useState(null);
useEffect(() => {
const accessTokenRequest = {
scopes: ["user.read"],
account: accounts[0],
};
if (!apiData && inProgress === InteractionStatus.None) {
instance
.acquireTokenSilent(accessTokenRequest)
.then((accessTokenResponse) => {
// Acquire token silent success
let accessToken = accessTokenResponse.accessToken;
// Call your API with token
callApi(accessToken).then((response) => {
setApiData(response);
});
})
.catch((error) => {
if (error instanceof InteractionRequiredAuthError) {
instance.acquireTokenRedirect(accessTokenRequest);
}
console.log(error);
});
}
}, [instance, accounts, inProgress, apiData]);
return <p>Return your protected content here: {apiData}</p>;
}
function App() {
return (
<AuthenticatedTemplate>
<ProtectedComponent />
</AuthenticatedTemplate>
);
}
Como alternativa, se você precisar adquirir um token fora de um componente do React, poderá chamar acquireTokenSilent
, mas não deverá retornar para a interação se ela falhar. Todas as interações deverá ocorrer sob o componente MsalProvider
na árvore de componentes.
// MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
const account = publicClientApplication.getAllAccounts()[0];
const accessTokenRequest = {
scopes: ["user.read"],
account: account,
};
// Use the same publicClientApplication instance provided to MsalProvider
publicClientApplication
.acquireTokenSilent(accessTokenRequest)
.then(function (accessTokenResponse) {
// Acquire token silent success
let accessToken = accessTokenResponse.accessToken;
// Call your API with token
callApi(accessToken);
})
.catch(function (error) {
//Acquire token silent failure
console.log(error);
});