Inicialización de MSAL

Antes de inicializar MSAL Browser, empiece por registrar la aplicación en el Centro de administración Microsoft Entra para obtener el identificador de aplicación (cliente).

patrón CreatePCA

MSAL.js proporciona un CreatePCA patrón que le permite elegir el tipo de PublicClientApplication para la aplicación. Las opciones actuales incluyen las configuraciones Standard y Nestable. En el futuro, se introducirán más configuraciones.

Configuración estándar

Si utiliza MSAL.js en una aplicación de página única, importe msal-browser para crear una instancia de IPublicClientApplication con createStandardPublicClientApplication. Esta función crea una PublicClientApplication instancia con la configuración estándar.

import * as msal from "@azure/msal-browser";

const pca = msal.createStandardPublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Configuración de aplicaciones anidadas

Si la aplicación es una aplicación anidada integrada en un iframe que delega su autenticación en un SDK de hub (que puede ser una SPA o una aplicación de escritorio que se ejecuta en el entorno de MetaOS), importe msal-browser para crear una instancia de IPublicClientApplication con createNestablePublicClientApplication. Esta función crea una PublicClientApplication instancia con la configuración de NAA.

import * as msal from "@azure/msal-browser";

const nestablePca = msal.createNestablePublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

Inicialización del objeto PublicClientApplication

Para usar MSAL.js, debe crear una instancia de un objeto PublicClientApplication. Debe proporcionar el client id (appId) de su aplicación.

Opción 1

Cree una instancia de un PublicClientApplication objeto e inicialícelo después. La initialize función es asincrónica y debe resolverse antes de invocar otras API de MSAL.js.

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

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();

Opción 2

Invoque el createPublicClientApplication método estático que devuelve un objeto inicializado PublicClientApplication . Tenga en cuenta que esta función es asincrónica.

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

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Opcional) Configurar autoridad

De forma predeterminada, MSAL está configurado con el tenant common, que se usa para aplicaciones multi-tenant y aplicaciones que permiten cuentas personales (no B2C).

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/common/'
    }
};

Si el público de su aplicación es un único inquilino, debe proporcionar una autoridad con su ID de inquilino como se muestra a continuación:

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}'
    }
};

Si su aplicación usa una autoridad independiente compatible con OIDC, como "https://login.live.com" o IdentityServer, deberá especificarla en el campo knownAuthorities y establecer protocolMode en "OIDC".

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.live.com',
        knownAuthorities: ["login.live.com"],
    },
    system: {
        protocolMode: "OIDC",
    }
};

(Opcional) Configuración del URI de redirección

De forma predeterminada, MSAL está configurado para establecer el URI de redirección en la página actual en la que se ejecuta. Si desea recibir el código de autorización en una página diferente de la que ejecuta MSAL, puede establecerlo en la configuración:

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}',
        redirectUri: 'https://contoso.com'
    }
};

Cualquier URI de redirección usado debe configurarse en el registro del portal. También puede configurar el URI de redirección por solicitud mediante las API de inicio de sesión y solicitud.

(Opcional) Configuración adicional

MSAL tiene opciones de configuración adicionales que puede revisar aquí.

Gestión del inicio de la aplicación con 0 o más cuentas disponibles

El siguiente diagrama de flujo puede ayudarle a evitar mensajes de autenticación innecesarios cuando hay una cuenta (o varias cuentas) disponible para el inicio de sesión único.

Elección de un tipo de interacción

En el explorador, hay dos maneras de presentar la pantalla de inicio de sesión a los usuarios desde la aplicación:

• presentación de una ventana emergente desde la página actual
• redirigir la ventana del explorador al servidor de inicio de sesión

API de ventanas emergentes

• loginPopup
• acquireTokenPopup

Las API de ventanas emergentes usan promesas de ES6 que se resuelven cuando el flujo de autenticación en la ventana emergente concluye y regresa al URI de redirección especificado, o se rechazan si hay problemas en el código o si la ventana emergente está bloqueada.

Consideraciones sobre RedirectUri

Al usar las API de ventanas emergentes, el redirectUri debe apuntar a una página dedicada que implemente el puente de redirección de MSAL. Esta página controla la respuesta de autenticación y la comunica de nuevo a la aplicación principal.

Para obtener instrucciones detalladas sobre cómo configurar la página de redirección, consulte Consideraciones sobre RedirectUri.

msalInstance.loginPopup({
    redirectUri: "http://localhost:3000/redirect",
});

API de redirección

• loginRedirect
• acquireTokenRedirect

Nota: Si usa msal-angular o msal-react, las redirecciones se controlan de forma diferente y debería ver el msal-angular documento de redireccionamiento y msal-react las preguntas más frecuentes para obtener más detalles.

Las API de redirección son funciones asincrónicas (es decir, devolver una promesa) void que redirigen la ventana del explorador después de almacenar en caché información básica. Si decide usar las API de redireccionamiento, tenga en cuenta que debe llamar handleRedirectPromise() para controlar correctamente la API. Puede usar la siguiente función para realizar una acción cuando se completa este intercambio de tokens:

msalInstance.handleRedirectPromise().then((tokenResponse) => {
    // Check if the tokenResponse is null
    // If the tokenResponse !== null, then you are coming back from a successful authentication redirect.
    // If the tokenResponse === null, you are not coming back from an auth redirect.
}).catch((error) => {
    // handle error, either in the library or coming back from the server
});

Esto también le permitirá recuperar tokens en la recarga de página. Consulte el ejemplo onPageLoad para obtener más información sobre el uso.

No se recomienda usar ambos tipos de interacción en una sola aplicación.

Pasos siguientes

¡Está listo para realizar un inicio de sesión!