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

  • Artículo

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:

  1. 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.
  2. Actualice el código de MSAL.js 1.x a 2.x.
  3. 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:

  1. Inicie sesión en el centro de administración de Microsoft Entra.

  2. Vaya aIdentidad> de aplicaciones>Registros de aplicaciones, seleccione la aplicación y, a continuación, Autenticación.

  3. 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.

    Implicit flow warning banner on web app tile in Azure portal

  4. Seleccione solo los URI de redirección cuyas aplicaciones van a usar MSAL.js 2.x y, a continuación, Configurar.

    Select redirect URI pane in SPA pane in Azure portal

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.

Single-page application tile in app registration in Azure portal

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 ver una guía paso a paso sobre cómo agregar MSAL 2.x a su aplicación, consulte Tutorial: Inicio de sesión de usuarios y llamada a Microsoft Graph API desde una aplicación de página única (SPA) de JavaScript mediante un flujo de código de autorización.

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