Passer un état personnalisé dans les demandes d’authentification à l’aide de MSAL.js

Le paramètre state, tel que défini par OAuth 2.0, est inclus dans une demande d’authentification et est également retourné dans la réponse du jeton pour empêcher les attaques par falsification de requête intersite. Par défaut, la bibliothèque d’authentification Microsoft pour JavaScript (MSAL.js) transmet une valeur de paramètre d’état unique générée de manière aléatoire dans les demandes d’authentification.

Le paramètre d’état peut également être utilisé pour encoder les informations de l’état de l’application avant la redirection. Vous pouvez transmettre l’état de l’utilisateur dans l’application, tel que la page ou la vue sur laquelle il était activé, comme entrée dans ce paramètre. La bibliothèque MSAL.js vous permet de passer votre état personnalisé en tant que paramètre d’état dans l’objet Request . Par exemple:

Pour la sécurité et la confidentialité, ne placez pas d’URL ou d’autres données sensibles directement dans le paramètre d’état. Utilisez plutôt une clé ou un identificateur qui correspond aux données stockées dans le stockage du navigateur, telles que localStorage ou sessionStorage. Cette approche permet à votre application de référencer en toute sécurité les données nécessaires après l’authentification.

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

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

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

myMSALObj.loginRedirect(loginRequest);

L'état transmis est ajouté au GUID unique défini par MSAL.js lors de l'envoi de la requête. Lorsque la réponse est retournée, MSAL.js recherche une correspondance d’état, puis retourne l’état passé personnalisé dans l’objet Response en tant que state.

Étapes suivantes

Approfondissez en créant une application monopage (SPA) React qui connecte les utilisateurs dans cette série de tutoriels en plusieurs parties.