Initialisierung von MSAL

Bevor Sie MSAL Browser initialisieren, registrieren Sie zunächst Ihre Anwendung im Microsoft Entra Admin Center, um die Anwendungs-ID (Client-ID) zu erhalten.

CreatePCA-Muster

MSAL.js bietet ein CreatePCA-Muster, mit dem Sie den Typ von PublicClientApplication für Ihre App auswählen können. Zu den aktuellen Optionen gehören Standard und Nestable Konfigurationen. In Zukunft werden weitere Konfigurationen eingeführt.

Standardkonfiguration

Wenn Sie MSAL.js in einer Single-Page-Anwendung verwenden, importieren Sie msal-browser, um eine IPublicClientApplication-Instanz mit createStandardPublicClientApplication zu erstellen. Diese Funktion erstellt eine PublicClientApplication Instanz mit der Standardkonfiguration.

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

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

Geschachtelte App-Konfiguration

Wenn es sich bei Ihrer App um eine in einem Iframe eingebettete geschachtelte App handelt, die ihre Authentifizierung an ein Hub-SDK delegiert (bei dem es sich entweder um eine SPA oder um eine Desktopanwendung handelt, die im MetaOS-Framework ausgeführt wird), importieren Sie msal-browser, um mit createNestablePublicClientApplication eine IPublicClientApplication-Instanz zu erstellen. Diese Funktion erstellt eine PublicClientApplication Instanz mit der NAA-Konfiguration.

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

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

Initialisieren des PublicClientApplication-Objekts

Um MSAL.jszu verwenden, müssen Sie ein PublicClientApplication Objekt instanziieren. Sie müssen die client id (appId) Ihrer Anwendung angeben.

Option 1:

Instanziieren Sie ein PublicClientApplication Objekt, und initialisieren Sie es danach. Die initialize Funktion ist asynchron und muss aufgelöst werden, bevor andere MSAL.js-APIs aufgerufen werden.

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

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

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

Option 2:

Rufen Sie die createPublicClientApplication statische Methode auf, die ein initialisiertes PublicClientApplication Objekt zurückgibt. Beachten Sie, dass diese Funktion asynchron ist.

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

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

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

(Optional) Konfigurieren der Autorität

Standardmäßig ist MSAL mit dem Mandanten common konfiguriert, der für mandantenfähige Anwendungen und Anwendungen verwendet wird, die private Konten zulassen (nicht B2C).

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

Wenn die Zielgruppe Ihrer Anwendung aus einem einzelnen Mandanten besteht, müssen Sie eine Autorisierungsinstanz mit Ihrer Mandanten-ID wie unten gezeigt angeben:

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

Wenn Ihre Anwendung eine separate OIDC-kompatible Instanz wie "https://login.live.com" oder einen IdentityServer verwendet, müssen Sie diese im knownAuthorities-Feld angeben und protocolMode auf "OIDC" festlegen.

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

(Optional) Weiterleitungs-URI konfigurieren

Standardmäßig ist MSAL so konfiguriert, dass die Umleitungs-URI auf die aktuelle Seite gesetzt wird, auf der MSAL ausgeführt wird. Wenn Sie den Autorisierungscode auf einer anderen Seite als dem ausführenden MSAL erhalten möchten, können Sie dies in der Konfiguration festlegen:

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

Jeder verwendete Umleitungs-URI muss in der Portalregistrierung konfiguriert werden. Sie können den Umleitungs-URI pro Anforderung auch mithilfe der Anmelde- und Anforderungs-APIs festlegen.

(Optional) Zusätzliche Konfiguration

MSAL verfügt über zusätzliche Konfigurationsoptionen, die Sie hier überprüfen können.

Umgang mit dem Start der App bei 0 oder mehr verfügbaren Konten

Das folgende Flussdiagramm kann Ihnen helfen, unnötige Authentifizierungsaufforderungen zu vermeiden, wenn ein Konto (oder mehrere Konten) für SSO verfügbar ist.

Auswählen eines Interaktionstyps

Im Browser gibt es zwei Möglichkeiten, wie Sie ihren Benutzern den Anmeldebildschirm aus Ihrer Anwendung präsentieren können:

• Präsentieren eines Popupfensters von der aktuellen Seite
• Umleiten des Browserfensters an den Anmeldeserver

Popup-Programmierschnittstellen

• loginPopup
• acquireTokenPopup

Die Popup-APIs verwenden ES6-Promises, die aufgelöst werden, wenn der Authentifizierungsfluss im Popup abgeschlossen ist und zur angegebenen Umleitungs-URI zurückkehrt, oder abgelehnt werden, wenn Probleme im Code auftreten oder das Popup blockiert wird.

Überlegungen zur Redirect-URI

Wenn Sie Popup-APIs verwenden, muss redirectUri auf eine dedizierte Seite verweisen, die die MSAL-Redirect-Bridge implementiert. Diese Seite behandelt die Authentifizierungsantwort und kommuniziert sie zurück an die Hauptanwendung.

Ausführliche Anleitungen zum Einrichten der Umleitungsseite finden Sie in den Überlegungen zu RedirectUri.

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

Umleitungs-APIs

• loginRedirect
• acquireTokenRedirect

Hinweis: Wenn Sie msal-angular oder msal-react verwenden, werden Umleitungen anders behandelt. Weitere Informationen finden Sie in der msal-angular Dokumentation zu Umleitungen und den msal-react FAQ.

Die Umleitungs-APIs sind asynchrone Funktionen (d. h. zurückgeben eine Zusage), void die das Browserfenster nach dem Zwischenspeichern einiger grundlegender Informationen umleiten. Wenn Sie sich für die Verwendung der Umleitungs-APIs entscheiden, beachten Sie, dass Sie handleRedirectPromise() aufrufen MÜSSEN, um die API korrekt zu handhaben. Sie können die folgende Funktion verwenden, um eine Aktion auszuführen, wenn dieser Tokenaustausch abgeschlossen ist:

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

Dadurch können Sie auch Token beim erneuten Laden der Seite abrufen. Weitere Informationen zur Verwendung finden Sie im onPageLoad-Beispiel .

Es wird nicht empfohlen, beide Interaktionstypen in einer einzigen Anwendung zu verwenden.

Nächste Schritte

Sie sind bereit, eine Anmeldung durchzuführen!