Migrieren von JavaScript-Single-Page-Webanwendungen vom impliziten Genehmigungsflow zum Autorisierungscodeflow

  • Artikel

Mit Version 2.0 der Microsoft Authentication Library für JavaScript (MSAL.js) wird die Unterstützung des Autorisierungscodeflows mit PKCE und CORS für Single-Page-Webanwendungen auf Microsoft Identity Platform eingeführt. Führen Sie die Schritte in den folgenden Abschnitten aus, um Ihre MSAL.js 1.x-Anwendung mit impliziter Genehmigung zu MSAL.js 2.0 und höher (im folgenden 2.x genannt) und dem Autorisierungscodeflow zu migrieren.

MSAL.js 2.x bringt Verbesserungen gegenüber MSAL.js 1.x mit sich und unterstützt jetzt anstelle des impliziten Genehmigungsflows den Autorisierungscodeflow. MSAL.js 2.x unterstützt den impliziten Genehmigungsflow NICHT.

Schritte bei der Migration

Das Aktualisieren der Anwendung auf MSAL.js 2.x und den Autorisierungscodeflow gliedert sich in drei Hauptschritte:

  1. Ändern Sie bei Ihre(n) Umleitungs-URI(s) der App-Registrierung die Plattform Web in die Plattform Single-Page-Webanwendung.
  2. Aktualisieren Sie Ihren Code von MSAL.js 1.x auf 2.x.
  3. Deaktivieren Sie die implizite Genehmigung in Ihrer App-Registrierung, wenn alle Anwendungen, die die Registrierung gemeinsam nutzen, auf MSAL.js 2.x und den Autorisierungscodeflow aktualisiert wurden.

In den folgenden Abschnitten wird jeder Schritt ausführlich beschrieben.

Ändern der Umleitungs-URIs für die SPA-Plattform

Tipp

Die Schritte in diesem Artikel können je nach dem Portal, mit dem Sie beginnen, geringfügig variieren.

Wenn Sie Ihre vorhandene App-Registrierung für Ihre Anwendungen weiterverwenden möchten, aktualisieren Sie im Microsoft Entra Admin Center die Umleitungs-URIs der Registrierung auf die SPA-Plattform. Dadurch wird der Autorisierungscodeflow mit PKCE- und CORS-Unterstützung für die Apps aktiviert, die diese Registrierung verwenden (den Code Ihrer Anwendung müssen Sie noch auf MSAL.js v2.x aktualisieren).

Führen Sie für App-Registrierungen, die derzeit mit Umleitungs URIs für die Plattform Web konfiguriert sind, die folgenden Schritte aus:

  1. Melden Sie sich beim Microsoft Entra Admin Center an.

  2. Navigieren Sie zu Identität>Anwendungen>App-Registrierungen, und wählen Sie Ihre Anwendung und dann Authentifizierung aus.

  3. Wählen Sie auf der Kachel für die Plattform Web unter Umleitungs-URIs das Warnbanner aus, das angibt, dass Sie Ihre URIs migrieren sollten.

    Implicit flow warning banner on web app tile in Azure portal

  4. Wählen Sie nur die Umleitungs-URIs für die Anwendungen aus, die MSAL.js 2.x verwenden sollen, und wählen Sie dann Konfigurieren aus.

    Select redirect URI pane in SPA pane in Azure portal

Diese Umleitungs-URIs sollten jetzt auf der Kachel für die Plattform Single-Page-Webanwendung angezeigt werden. Ebenfalls wird angezeigt, dass CORS-Unterstützung mit dem Autorisierungscodeflow und PKCE für diese URIs aktiviert ist.

Single-page application tile in app registration in Azure portal

Sie können auch eine neue App-Registrierung erstellen, anstatt die Umleitungs-URIs in der vorhandenen Registrierung zu aktualisieren.

Aktualisieren des Codes auf MSAL.js 2.x

In MSAL 1.x haben Sie eine Anwendungsinstanz erstellt, indem Sie wie folgt eine UserAgentApplication initialisiert haben:

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

Initialisieren Sie in MSAL 2.x stattdessen ein [PublicClientApplication][msal-js-publicclientapplication]:

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

Eine vollständige exemplarische Vorgehensweise zum Hinzufügen von MSAL 2.x zu Ihrer Anwendung finden Sie im Tutorial: Anmelden von Benutzern und Aufrufen der Microsoft Graph-API aus einer JavaScript-Single-Page-Webanwendung (SPA) mithilfe des Autorisierungscodeflows.

Weitere Änderungen, die Sie möglicherweise an Ihrem Code vornehmen müssen, finden Sie im Handbuch zur Migration auf GitHub.

Deaktivieren der Einstellungen für die implizite Genehmigung

Wenn Sie alle Produktionsanwendungen, die diese App-Registrierung und die zugehörige Client-ID verwenden, auf MSAL 2.x und den Autorisierungscodeflow aktualisiert haben, sollten Sie die Einstellungen für die implizite Genehmigung im Menü Authentifizierung der App-Registrierung deaktivieren.

Wenn Sie die Einstellungen für die implizite Genehmigung in der App-Registrierung deaktivieren, wird der implizite Genehmigungsflow für alle Anwendungen, die die Registrierung verwenden, und die zugehörige Client-ID deaktiviert.

Deaktivieren Sie den impliziten Genehmigungsflow nicht, bevor Sie alle Anwendungen auf MSAL.js 2.x und die [PublicClientApplication][msal-js-publicclientapplication] aktualisiert haben.

Nächste Schritte