Migración de una aplicación de página única de JavaScript desde una concesión implícita a un flujo de código de autorización
La Biblioteca de autenticación de Microsoft para JavaScript (MSAL.js) v2.0 proporciona compatibilidad con el flujo de código de autorización para PKCE y CORS en aplicaciones de página única en la Plataforma de identidad de Microsoft. Siga los pasos de las secciones siguientes para migrar la aplicación MSAL.js 1.x mediante la concesión implícita a MSAL.js 2.0+ (en adelante 2.x) y el flujo de código de autenticación.
MSAL.js 2.x mejora MSAL.js 1.x al ser compatible con el flujo de código de autorización en el explorador, en lugar de utilizar el flujo de concesión implícita. MSAL.js 2.x no admite el flujo implícito.
Pasos de migración
Para actualizar su aplicación a MSAL.js 2.x y al flujo de código de autenticación, hay tres pasos principales:
- Cambie los URI de redirección del registro de aplicación de la plataforma web a la plataforma de aplicación de página única.
- Actualice el código de MSAL.js 1.x a 2.x.
- Desactive la concesión implícita en el registro de aplicación cuando todas las aplicaciones que comparten el registro se hayan actualizado a MSAL.js 2.x y al flujo de código de autenticación.
Las siguientes secciones describen cada opción con más detalle.
Cambio de los URI de redirección a la plataforma SPA
Sugerencia
Los pasos de este artículo pueden variar ligeramente en función del portal desde donde comienza.
Si desea continuar usando el registro de aplicación existente para sus aplicaciones, use el centro de administración de Microsoft Entra para actualizar los URI de redireccionamiento del registro a la plataforma SPA. Hacerlo así habilita el flujo de código de autorización mediante la compatibilidad con PKCE y CORS para las aplicaciones que usan el registro. Todavía es necesario que actualice el código de la aplicación a MSAL.js v2.x.
Siga estos pasos con los registros de aplicaciones que están configurados actualmente con los URI de redirección de la plataforma web:
Inicie sesión en el centro de administración de Microsoft Entra.
Vaya aIdentidad> de aplicaciones>Registros de aplicaciones, seleccione la aplicación y, a continuación, Autenticación.
En el icono de plataforma Web que hay debajo de URI de redirección, seleccione el banner de advertencia que indica que debe migrar los URI.
Seleccione solo los URI de redirección cuyas aplicaciones van a usar MSAL.js 2.x y, a continuación, Configurar.
Estos URI de redirección deberían aparecer ahora en el icono de la plataforma de aplicación de página única, lo cual indica que la compatibilidad de CORS con el flujo de código de autorización y PKCE está habilitada para estos URI.
También puede crear un nuevo registro de aplicación en lugar de actualizar los URI de redirección en el registro existente.
Actualización del código a MSAL.js 2.x
En MSAL 1.x, ha creado una instancia de aplicación inicializando UserAgentApplication de la siguiente manera:
// MSAL 1.x
import * as msal from "msal";
const msalInstance = new msal.UserAgentApplication(config);
En MSAL 2.x, inicialice en su lugar una [PublicClientApplication][msal-js-publicclientapplication]:
// MSAL 2.x
import * as msal from "@azure/msal-browser";
const msalInstance = new msal.PublicClientApplication(config);
Para informarse sobre otros cambios que puede que deba realizar en el código, consulte la guía de migración en GitHub.
Desactivación de la configuración de concesión implícita
Una vez que haya actualizado todas las aplicaciones de producción que usan este registro de aplicación y su identificador de cliente a MSAL 2.x y el flujo de código de autorización, tiene que desactivar la configuración de concesión implícita en el menú Autenticación del registro de aplicación.
Al desactivar la configuración de concesión implícita en el registro de aplicación, el flujo implícito se deshabilita para todas las aplicaciones que usan el registro y su identificador de cliente.
No deshabilitar el flujo de concesión implícita antes de actualizar todas las aplicaciones a MSAL.js 2.x y [PublicClientApplication][msal-js-publicclientapplication].
Pasos siguientes
Para más información sobre el flujo de código de autorización, incluidas las diferencias entre los flujos de código implícito y de autenticación, consulte Plataforma de identidad y flujo de código de autorización de OAuth 2.0.
Para más información, cree una aplicación de página única (SPA) de React que inicie sesión de los usuarios en la siguiente serie de tutoriales de varias partes.