Initialisering av MSAL

Innan du initierar MSAL Browser börjar du med att registrera ditt program i Microsoft Entra administrationscenter för att hämta programmets (klient)-ID: t.

CreatePCA-mönster

MSAL.js innehåller ett CreatePCA mönster som gör att du kan välja typ av PublicClientApplication för din app. Aktuella alternativ inkluderar Standard och Nestable konfigurationer. I framtiden kommer fler konfigurationer att introduceras.

Standardkonfiguration

Om du använder MSAL.js i ett ensidesprogram importerar du msal-browser för att skapa en IPublicClientApplication instans med createStandardPublicClientApplication. Den här funktionen skapar en PublicClientApplication instans med standardkonfigurationen.

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

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

Kapslad appkonfiguration

Om din app är en iframed kapslad app som delegerar sin autentisering till en hubb-SDK (som antingen är ett SPA eller ett skrivbordsprogram som körs i MetaOS-ramverket) importerar du msal-browser för att skapa en IPublicClientApplication instans med createNestablePublicClientApplication. Den här funktionen skapar en PublicClientApplication instans med NAA-konfigurationen.

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

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

Initiera PublicClientApplication-objektet

För att kunna använda MSAL.jsmåste du instansiera ett PublicClientApplication objekt. Du måste ange client id (appId) för din ansökan.

Alternativ 1

Instansiera ett PublicClientApplication objekt och initiera det efteråt. Funktionen initialize är asynkron och måste lösas innan andra MSAL.js API:er anropas.

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

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

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

Alternativ 2

Anropa den createPublicClientApplication statiska metoden som returnerar ett initierat PublicClientApplication objekt. Observera att den här funktionen är asynkron.

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

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

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Valfritt) Konfigurera utfärdare

Som standard konfigureras MSAL med klientorganisationen common, som används för program med flera klientorganisationer och program som tillåter personliga konton (inte B2C).

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

Om programmets målgrupp är en enda klientorganisation måste du ange en auktoritet med ditt klientorganisations-ID enligt nedan:

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

Om din applikation använder en separat OIDC-kompatibel auktoritet som "https://login.live.com" eller en IdentityServer, måste du ange den i fältet knownAuthorities och ställa in protocolMode på "OIDC".

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

(Valfritt) Konfigurera omdirigerings-URI

Som standard är MSAL konfigurerat för att ange omdirigerings-URI:n till den aktuella sidan som den körs på. Om du vill ta emot auktoriseringskoden på en annan sida än den som kör MSAL kan du ange detta i konfigurationen:

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

Alla omdirigerings-URI som används måste konfigureras i portalregistreringen. Du kan också ange omdirigerings-URI:n per begäran med hjälp av inloggnings- och begärande-API:erna.

(Valfritt) Ytterligare konfiguration

MSAL har ytterligare konfigurationsalternativ som du kan granska här.

Hantera appstart med 0 eller fler tillgängliga konton

Följande flödesdiagram kan hjälpa dig att undvika onödiga autentiseringsanvisningarna när ett konto (eller flera konton) är tillgängligt för enkel inloggning.

Välja en interaktionstyp

I webbläsaren finns det två sätt att visa inloggningsskärmen för dina användare från ditt program:

• visa ett popup-fönster från den aktuella sidan
• omdirigera webbläsarfönstret till inloggningsservern

POPUP-API:er

• loginPopup
• acquireTokenPopup

API:er för popup-fönster använder ES6-löften som löser när autentiseringsflödet i popup-fönstret avslutas och återgår till den angivna omdirigerings-URI:n, eller avvisa om det finns problem i koden eller om popup-fönstret blockeras.

Överväganden för RedirectUri

När du använder popup-API:er måste redirectUri peka på en särskild sida som implementerar MSAL:s omdirigeringsbrygga. Den här sidan hanterar autentiseringssvaret och kommunicerar tillbaka det till huvudprogrammet.

Detaljerad vägledning om hur du konfigurerar omdirigeringssidan finns i Överväganden för RedirectUri.

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

Omdirigerings-API:er

• loginRedirect
• acquireTokenRedirect

Obs! Om du använder msal-angular eller msal-reacthanteras omdirigeringar på olika sätt och du bör se omdirigeringsdokumentetmsal-angular och vanliga frågor ochmsal-react svar för mer information.

Omdirigerings-API:erna är asynkrona (dvs. returnera ett löfte) void funktioner som omdirigerar webbläsarfönstret efter cachelagring av viss grundläggande information. Om du väljer att använda omdirigerings-API:erna bör du tänka på att du MÅSTE anropa handleRedirectPromise() för att hantera API:et korrekt. Du kan använda följande funktion för att utföra en åtgärd när tokenutbytet har slutförts:

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

Detta gör det också möjligt att hämta token när sidan laddas om. Mer information om användning finns i onPageLoad-exemplet .

Vi rekommenderar inte att du använder båda interaktionstyperna i ett enda program.

Nästa steg

Du är redo att logga in!