Aplicación de página única: Configuración del código

Obtenga información sobre cómo configurar el código de la aplicación de página única (SPA).

Bibliotecas de Microsoft que admiten aplicaciones de una sola página

Las siguientes bibliotecas de Microsoft admiten aplicaciones de una sola página:

Lenguaje/marco de trabajo	Proyecto en GitHub	Paquete	Introducción iniciado	Inicio de sesión de usuarios	Acceso a API web	Disponible con carácter general (GA) o Versión preliminar pública1
Angular	MSAL Angular v22	msal-angular	Tutorial			GA
Angular	MSAL Angular3	msal-angular	—			GA
AngularJS	MSAL AngularJS3	msal-angularjs	—			Versión preliminar pública
JavaScript	MSAL.js v22	msal-browser	Tutorial			GA
JavaScript	MSAL.js 1.03	msal-core	—			GA
React	MSAL React2	msal-react	Tutorial			GA

¹Los términos de licencia universal de Online Services se aplican a las bibliotecas en la versión preliminar pública.

²Flujo de código de autenticación solo con PCKE (recomendado).

³Solo flujo de subvención implícito (No recomendado).

Configuración del código de la aplicación

En una biblioteca MSAL, la información de registro de aplicación se pasa como una configuración durante la inicialización de la biblioteca.

JavaScript (MSAL.js v2)

import * as Msal from "@azure/msal-browser"; // if using CDN, 'Msal' will be available in global scope

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new Msal.PublicClientApplication(config);

Para más información sobre las opciones configurables, consulte Inicialización de aplicaciones con MSAL.js.

JavaScript (MSAL.js v1)

import * as Msal from "msal"; // if using CDN, 'Msal' will be available in global scope

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create UserAgentApplication instance
const userAgentApplication = new Msal.UserAgentApplication(config);

Para más información sobre las opciones configurables, consulte Inicialización de aplicaciones con MSAL.js.

Angular (MSAL.js v2)

// In app.module.ts
import { MsalModule } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({
            auth: {
                clientId: 'Enter_the_Application_Id_Here',
            }
        }), null, null)
    ]
})
export class AppModule { }

Angular (MSAL.js v1)

// App.module.ts
import { MsalModule } from '@azure/msal-angular';
@NgModule({
    imports: [
        MsalModule.forRoot({
            auth: {
                clientId: 'your_app_id'
            }
        })
    ]
})
export class AppModule { }

React

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

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new PublicClientApplication(config);

// Wrap your app component tree in the MsalProvider component
ReactDOM.render(
    <React.StrictMode>
        <MsalProvider instance={publicClientApplication}>
            <App />
        </ MsalProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

Pasos siguientes

Avance al siguiente artículo de este escenario, Inicio y cierre de sesión.