Initialisatie van MSAL

Voordat u MSAL Browser initialiseert, begint u met het registreren van uw toepassing in de Microsoft Entra-beheercentrum om de toepassings-id (client) te verkrijgen.

CreatePCA-patroon

MSAL.js biedt een CreatePCA patroon waarmee u het type PublicClientApplication voor uw app kunt kiezen. Huidige opties zijn onder andere Standard en Nestable configuraties. In de toekomst worden er meer configuraties geïntroduceerd.

Standaardconfiguratie

Als u MSAL.js gebruikt in een toepassing met één pagina, importeert u msal-browser om een IPublicClientApplication exemplaar te maken met createStandardPublicClientApplication. Met deze functie maakt u een PublicClientApplication exemplaar met de standaardconfiguratie.

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

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

Geneste app-configuratie

Als uw app een geneste app in een iframe is die de authenticatie delegeert aan een hub-SDK (die ofwel een SPA of een bureaubladtoepassing is die wordt uitgevoerd in het MetaOS-framework), importeert u msal-browser om een IPublicClientApplication-exemplaar te maken met createNestablePublicClientApplication. Met deze functie maakt u een PublicClientApplication exemplaar met de NAA-configuratie.

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

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

Het PublicClientApplication-object initialiseren

Als u MSAL.jswilt gebruiken, moet u een exemplaar van een PublicClientApplication object maken. U moet de client id (appId) van uw toepassing opgeven.

Optie 1

Instantieer een PublicClientApplication object en initialiseer het daarna. De initialize functie is asynchroon en moet worden omgezet voordat andere MSAL.js API's worden aangeroepen.

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

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

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

Optie 2

Roep de createPublicClientApplication statische methode aan die een geïnitialiseerd PublicClientApplication object retourneert. Houd er rekening mee dat deze functie asynchroon is.

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

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

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Optioneel) Autoriteit configureren

MSAL is standaard geconfigureerd met de common tenant, die wordt gebruikt voor toepassingen met meerdere tenants en toepassingen die persoonlijke accounts toestaan (niet B2C).

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

Als de doelgroep van uw toepassing uit één tenant bestaat, moet u een authority opgeven met uw tenant-id, zoals hieronder weergegeven:

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

Als uw toepassing gebruikmaakt van een afzonderlijke OIDC-compatibele instantie zoals "https://login.live.com" of een IdentityServer, moet u deze in het knownAuthorities veld opgeven en instellen protocolMode op "OIDC".

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

(Optioneel) Omleidings-URI configureren

MSAL is standaard geconfigureerd om de omleidings-URI in te stellen op de huidige pagina waarop deze wordt uitgevoerd. Als u de autorisatiecode op een andere pagina wilt ontvangen dan de code waarop MSAL wordt uitgevoerd, kunt u deze instellen in de configuratie:

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

Elke omleidings-URI die wordt gebruikt, moet worden geconfigureerd in de portalregistratie. U kunt de omleidings-URI ook per aanvraag instellen met behulp van de aanmeldings - en aanvraag-API's.

(Optioneel) Aanvullende configuratie

MSAL heeft aanvullende configuratieopties die u hier kunt bekijken.

Omgaan met het starten van de app met 0 of meer beschikbare accounts

Het volgende stroomdiagram kan u helpen onnodige authenticatieprompts te voorkomen wanneer er een account (of meerdere accounts) beschikbaar is voor SSO.

Een interactietype kiezen

In de browser kunt u het aanmeldingsscherm op twee manieren vanuit uw toepassing aan uw gebruikers presenteren:

• een pop-upvenster presenteren vanaf de huidige pagina
• het browservenster omleiden naar de aanmeldingsserver

API's voor pop-upvensters

• loginPopup
• acquireTokenPopup

De pop-up-API's maken gebruik van ES6 Promises die worden opgelost wanneer de verificatiestroom in de pop-up wordt afgesloten en wordt geretourneerd naar de opgegeven omleidings-URI, of weigeren als er problemen zijn in de code of de pop-up wordt geblokkeerd.

Overwegingen voor RedirectUri

Wanneer u pop-up-API's gebruikt, moet de redirectUri pagina verwijzen naar een speciale pagina die de MSAL-omleidingsbrug implementeert. Deze pagina verwerkt het verificatieantwoord en communiceert deze terug naar de hoofdtoepassing.

Zie RedirectUri-overwegingen voor gedetailleerde richtlijnen voor het instellen van de omleidingspagina.

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

Omleidings-API's

• loginRedirect
• acquireTokenRedirect

Opmerking: Als u msal-angular of msal-react gebruikt, worden omleidingen anders afgehandeld. Raadpleeg de documentatie over omleidingen msal-angular en de FAQ msal-react voor meer informatie.

De omleidings-API's zijn asynchrone functies (dat wil zeggen een belofte retourneren) void die het browservenster omleiden nadat u enkele basisgegevens in de cache hebt opgeslagen. Als u ervoor kiest om de omleidings-API's te gebruiken, houd er dan rekening mee dat u handleRedirectPromise() MOET aanroepen om de API correct af te handelen. U kunt de volgende functie gebruiken om een actie uit te voeren wanneer deze tokenuitwisseling is voltooid:

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

Hiermee kunt u ook tokens ophalen bij het opnieuw laden van pagina's. Zie het onPageLoad-voorbeeld voor meer informatie over gebruik.

Het is niet raadzaam om beide interactietypen in één toepassing te gebruiken.

Volgende stappen

U bent klaar om een aanmelding uit te voeren!