Initialisieren von Clientanwendungen mithilfe von MSAL.js

Dieser Artikel beschreibt die Initialisierung der Microsoft Authentication Library für JavaScript (MSAL.js) mit einer Instanz einer Benutzer-Agent-Anwendung.

Die Benutzer-Agent-Anwendung ist eine Form der öffentlichen Clientanwendung, bei der der Clientcode in einem Benutzer-Agent wie beispielsweise einem Webbrowser ausgeführt wird. Clients wie diese speichern keine Geheimnisse, da der Browserkontext offen zugänglich ist.

Weitere Informationen zu Clientanwendungstypen und Optionen für die Anwendungskonfiguration finden Sie unter Öffentliche und vertrauliche Client-Apps in MSAL.

Voraussetzungen

Bevor Sie eine Anwendung initialisieren, müssen Sie zunächst die Anwendung im Microsoft Entra Admin Center registrieren, um eine Vertrauensstellung zwischen Ihrer Anwendung und der Microsoft Identity Platform herzustellen.

Nachdem Sie Ihre App registriert haben, benötigen Sie die folgenden Werte (einige oder alle), die im Microsoft Entra Admin Center zu finden sind.

Initialisieren von MSAL.js 2.x-Apps

Initialisieren Sie den MSAL-Authentifizierungskontext, indem Sie PublicClientApplication mit einem Konfigurationsobjekt instanziieren. Für die Konfiguration ist mindestens eine Eigenschaft erforderlich: die clientID der Anwendung. Diese wird im Microsoft Entra Admin Center auf der Übersichtsseite für die App-Registrierung als Anwendungs-ID (Client) angezeigt.

Im Folgenden finden Sie ein Beispiel für ein Konfigurationsobjekt und die Instanziierung von PublicClientApplication:

const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
    knownAuthorities: [],
    redirectUri: "https://localhost:{port}/redirect",
    postLogoutRedirectUri: "https://localhost:{port}/redirect",
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ): void => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
      piiLoggingEnabled: false,
    },
    windowHashTimeout: 60000,
    iframeHashTimeout: 6000,
    loadFrameTimeout: 0,
  },
};

// Create an instance of PublicClientApplication
const msalInstance = new PublicClientApplication(msalConfig);

// Handle the redirect flows
msalInstance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    // Handle redirect response
  })
  .catch((error) => {
    // Handle redirect error
  });

handleRedirectPromise

Rufen Sie handleRedirectPromise auf, wenn die Anwendung Umleitungsflows verwendet. Bei Verwendung von Umleitungsflows sollte handleRedirectPromise bei jedem Laden der Seite ausgeführt werden.

Die Zusage (Promise) kann drei mögliche Ergebnisse zeitigen:

• .then wird aufgerufen, und tokenResponse ist wahr: Die Anwendung kehrt von einem erfolgreichen Umleitungsvorgang zurück.
• .then wird aufgerufen, und tokenResponse ist falsch (null): Die Anwendung kehrt nicht von einem Umleitungsvorgang zurück.
• .catch wird aufgerufen: Die Anwendung kehrt von einem Umleitungsvorgang zurück, und es ist ein Fehler aufgetreten.

Initialisieren von MSAL.js 1.x-Apps

Initialisieren Sie den MSAL 1.x-Authentifizierungskontext, indem Sie UserAgentApplication mit einem Konfigurationsobjekt instanziieren. Für die Konfiguration ist mindestens eine Eigenschaft erforderlich: die clientID Ihrer Anwendung. Diese wird im Microsoft Entra Admin Center auf der Übersichtsseite für die App-Registrierung als Anwendungs-ID (Client) angezeigt.

Bei Authentifizierungsmethoden mit Umleitungsflows (loginRedirect und acquireTokenRedirect) in MSAL.js 1.2.x oder früheren Versionen müssen Sie mit der handleRedirectCallback()-Methode explizit einen Rückruf bei Erfolg oder Fehler registrieren. Die explizite Registrierung des Rückrufs ist in MSAL.js 1.2.x und früheren Versionen erforderlich, da Umleitungsflows keine Zusagen zurückgeben, wie das bei Methoden mit einer Popup-Darstellung der Fall ist. Die Registrierung des Rückrufs ist in MSAL.js 1.3.x und höher optional.

// Configuration object constructed
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
  },
};

// Create UserAgentApplication instance
const msalInstance = new UserAgentApplication(msalConfig);

function authCallback(error, response) {
  // Handle redirect response
}

// Register a redirect callback for Success or Error (when using redirect methods)
// **REQUIRED** in MSAL.js 1.2.x and earlier
// **OPTIONAL** in MSAL.js 1.3.x and later
msalInstance.handleRedirectCallback(authCallback);

Einzelne Instanz und Konfiguration

MSAL.js 1.x und 2.x sind so konzipiert, dass es nur eine Instanz und Konfiguration für UserAgentApplication bzw. PublicClientApplication gibt, um einen einzigen Authentifizierungskontext darzustellen.

Mehrere Instanzen von UserAgentApplication bzw. PublicClientApplication werden nicht empfohlen, da sie zu widersprüchlichen Cacheeinträgen und Verhaltensweisen im Browser führen können.

Nächste Schritte

Das folgende MSAL.js 2.x-Codebeispiel auf GitHub veranschaulicht die Instanziierung von PublicClientApplication mit einem Konfigurationsobjekt: