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

O parâmetro state, conforme definido pelo OAuth 2.0, é incluído em uma solicitação de autenticação e também é retornado na resposta do 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 gerado aleatoriamente e exclusivo nas solicitações de autenticação.

O parâmetro state também pode ser usado para codificar informações do estado do aplicativo antes do redirecionamento. Pode passar uma referência ao estado do utilizador na aplicação, como um identificador da página ou vista em que estava, como entrada para este parâmetro. A biblioteca de MSAL.js permite que você passe seu estado personalizado como parâmetro de estado no objeto Request.

Importante

Por questões de segurança e privacidade, não coloque URLs ou outros dados sensíveis diretamente no parâmetro de estado. Em vez disso, use uma chave ou identificador que corresponda a dados armazenados no armazenamento do navegador, como localStorage ou sessionStorage. Esta abordagem permite que a sua aplicação consulte de forma segura os dados necessários após a autenticação. Por exemplo, pode armazenar a URL real no 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 passado é anexado ao GUID exclusivo gerado por MSAL.js ao enviar a solicitação. Quando a resposta é retornada, MSAL.js verifica se há uma correspondência de estado e, em seguida, retorna o estado personalizado passado no objeto Response como state.

Para saber mais, leia sobre como construir uma aplicação de página única (SPA) usando MSAL.js.