Inizializzazione di MSAL

Prima di inizializzare MSAL Browser, iniziare registrando l'applicazione nel Interfaccia di amministrazione di Microsoft Entra per ottenere l'ID applicazione (client).

Modello CreatePCA

MSAL.js fornisce un CreatePCA modello che consente di scegliere il tipo di PublicClientApplication per l'app. Le opzioni correnti includono Standard e Nestable configurazioni. In futuro verranno introdotte altre configurazioni.

Configurazione standard

Se si usa MSAL.js in un'applicazione a pagina singola, importare msal-browser per creare un'istanza IPublicClientApplication con createStandardPublicClientApplication. Questa funzione crea un'istanza PublicClientApplication con la configurazione standard.

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

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

Configurazione annidata dell'app

Se la tua app è un'app annidata in un iframe che delega l'autenticazione a un SDK hub, che può essere una SPA o un'applicazione desktop in esecuzione nel framework MetaOS, importa msal-browser per creare un'istanza IPublicClientApplication con createNestablePublicClientApplication. Questa funzione crea un'istanza PublicClientApplication con la configurazione 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",
    },
});

Inizializzazione dell'oggetto PublicClientApplication

Per usare MSAL.js, è necessario creare un'istanza di un PublicClientApplication oggetto . È necessario fornire il client id(appId) della tua applicazione.

Opzione 1

Creare un oggetto PublicClientApplication e inizializzarlo successivamente. La initialize funzione è asincrona e deve essere risolta prima di richiamare altre API MSAL.js.

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

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

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

Opzione 2

Richiamare il createPublicClientApplication metodo statico che restituisce un oggetto inizializzato PublicClientApplication . Si noti che questa funzione è asincrona.

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

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

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Facoltativo) Configurare l'autorità

Per impostazione predefinita, MSAL è configurato con il common tenant, che viene usato per applicazioni e applicazioni multi-tenant che consentono account personali (non B2C).

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

Se i destinatari dell'applicazione appartengono a un singolo tenant, è necessario fornire un'autorità con l'ID del tenant, come segue:

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

Se l'applicazione usa un'autorità OIDC separata come "https://login.live.com" o IdentityServer, sarà necessario specificarla nel knownAuthorities campo e impostare protocolMode su "OIDC".

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

(Facoltativo) Configurare l'URI di reindirizzamento

Per impostazione predefinita, MSAL è configurato per impostare l'URI di reindirizzamento sulla pagina corrente in cui è in esecuzione. Se si vuole ricevere il codice di autorizzazione in una pagina diversa da quella che esegue MSAL, è possibile impostarla nella configurazione:

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

Qualsiasi URI di reindirizzamento usato deve essere configurato nella registrazione del portale. È anche possibile impostare l'URI di reindirizzamento per richiesta usando le APIdi accesso e richiesta.

(Facoltativo) Configurazione aggiuntiva

MSAL include opzioni di configurazione aggiuntive che è possibile esaminare qui.

Gestione dell'avvio delle app con 0 o più account disponibili

Il diagramma di flusso seguente consente di evitare richieste di autenticazione non necessarie quando un account (o più account) è disponibile per l'accesso SSO.

Scelta di un tipo di interazione

Nel browser è possibile presentare la schermata di accesso agli utenti dell'applicazione in due modi:

• presentazione di una finestra popup dalla pagina corrente
• reindirizzamento della finestra del browser al server di accesso

API popup

• loginPopup
• acquireTokenPopup

Le API popup usano promesse ES6 che si risolvono quando il flusso di autenticazione nella finestra popup termina e torna all'URI di reindirizzamento specificato oppure rifiuta se si verificano problemi nel codice o il popup è bloccato.

Considerazioni sull'URI di reindirizzamento

Quando si usano le API popup, redirectUri deve rimandare a una pagina dedicata che implementa il bridge di reindirizzamento MSAL. Questa pagina gestisce la risposta di autenticazione e la comunica di nuovo all'applicazione principale.

Per indicazioni dettagliate sulla configurazione della pagina di reindirizzamento, vedere Considerazioni su RedirectUri.

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

API di reindirizzamento

• loginRedirect
• acquireTokenRedirect

Nota: se si usa msal-angular o msal-react, i reindirizzamenti vengono gestiti in modo diverso e verrà visualizzato il msal-angular documento di reindirizzamento e msal-react le domande frequenti per altri dettagli.

Le API di reindirizzamento sono funzioni asincrone (ad esempio, restituiscono una promessa) void che reindirizzano la finestra del browser dopo la memorizzazione nella cache di alcune informazioni di base. Se si sceglie di usare le API di reindirizzamento, tenere presente che è necessario chiamare handleRedirectPromise() per gestire correttamente l'API. È possibile usare la funzione seguente per eseguire un'azione al termine di questo scambio di token:

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
});

In questo modo sarà anche possibile recuperare i token al ricaricamento della pagina. Per altre informazioni sull'utilizzo, vedere l'esempio onPageLoad .

Non è consigliabile usare entrambi i tipi di interazione in una singola applicazione.

Operazioni successive

Sei pronto per effettuare un accesso!