Passar o estado personalizado nas solicitações de autenticação usando MSAL.js

O parâmetro de estado , conforme definido pelo OAuth 2.0, é incluído em uma solicitação de autenticação e também é retornado na resposta de token para evitar ataques de falsificação de solicitação entre sites. Por padrão, a Biblioteca de Autenticação da Microsoft para JavaScript (MSAL.js) passa um valor de parâmetro de estado exclusivo gerado aleatoriamente nas solicitações de autenticação.

O parâmetro de estado também pode ser usado para codificar informações do estado do aplicativo antes do redirecionamento. Você pode passar uma referência ao estado do usuário no aplicativo, como um identificador para a página ou exibição em que ele estava, como entrada para esse parâmetro. A biblioteca de MSAL.js permite que você passe seu estado personalizado como parâmetro de estado no objeto Request .

Importante

Para segurança e privacidade, não coloque URLs ou outros dados confidenciais diretamente no parâmetro de estado. Em vez disso, use uma chave ou identificador que corresponda aos dados armazenados no armazenamento do navegador, como localStorage ou sessionStorage. Essa abordagem permite que seu aplicativo faça referência segura aos dados necessários após a autenticação. Por exemplo, você pode armazenar a URL real em sessionStorage e passar apenas a chave de armazenamento no parâmetro de estado.

Por exemplo:

import {PublicClientApplication} from "@azure/msal-browser";

const myMsalObj = new PublicClientApplication({
    clientId: "ENTER_CLIENT_ID_HERE"
});

let loginRequest = {
    scopes: ["user.read"],
    state: "state_key"
}

myMSALObj.loginRedirect(loginRequest);

O estado transmitido é acrescentado ao GUID exclusivo definido pela MSAL.js ao enviar a solicitação. Quando a resposta é retornada, MSAL.js verifica se há uma correspondência de estado e retorna o estado passado personalizado no objeto Response como state.

Para saber mais, leia sobre como criar um SPA (aplicativo de página única) usando MSAL.js.