Single-Page-Webanwendung: App-Registrierung

Führen Sie die folgenden Schritte aus, um eine Single-Page-Webanwendung (Single-Page Application, SPA) auf der Microsoft Identity Platform zu registrieren. Es gelten unterschiedliche Registrierungsschritte für MSAL.js 1.0, die den Flow zur impliziten Genehmigung unterstützt, und MSAL.js 2.0, die den Autorisierungscodeflow mit PKCE unterstützt.

Erstellen der App-Registrierung

Tipp

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

Führen Sie für MSAL.js 1.0- und für MSAL.js 2.0-basierte Anwendungen zunächst die folgenden Schritte aus, um die App-Erstregistrierung zu erstellen.

  1. Melden Sie sich beim Microsoft Entra Admin Center an.
  2. Wenn Sie Zugriff auf mehrere Mandanten haben, verwenden Sie das Symbol für Einstellungen im oberen Menü, um zum Mandanten zu wechseln, in dem Sie die Anwendung über das Menü Verzeichnisse + Abonnements registrieren möchten.
  3. Navigieren Sie zu Identität>Anwendungen>App-Registrierungen, und wählen Sie Neue Registrierung aus.
  4. Geben Sie einen Namen für Ihre Anwendung ein. Benutzern Ihrer App wird wahrscheinlich dieser Namen angezeigt. Sie können ihn später ändern.
  5. Wählen Sie Unterstützte Kontotypen für die Anwendung aus. Geben Sie KEINENUmleitungs-URI ein. Eine Beschreibung der verschiedenen Kontotypen finden Sie unter Registrieren einer Anwendung.
  6. Wählen Sie Registrieren aus, um die App-Registrierung zu erstellen.

Konfigurieren Sie als Nächstes die App-Registrierung mit einem Umleitungs-URI, um anzugeben, wohin die Microsoft Identity Platform den Client zusammen mit allen Sicherheitstoken umleiten soll. Führen Sie die Schritte aus, die für die in Ihrer Anwendung verwendete Version von MSAL.js gelten:

Umleitungs-URI: MSAL.js 2.0 mit dem Authentifizierungscodeflow

Führen Sie die folgenden Schritte aus, um einen Umleitungs-URI für eine App hinzuzufügen, die MSAL.js 2.0 oder höher verwendet. MSAL.js 2.0 (und höher) unterstützt den Autorisierungscodeflow mit PKCE und CORS als Reaktion auf Einschränkungen bei Browsern, die Cookies von Drittanbietern blockieren. Der Flow zur impliziten Genehmigung wird von MSAL.js 2.0 und höheren Versionen nicht unterstützt.

  1. Wählen Sie im Microsoft Entra Admin Center die App-Registrierung aus, die Sie zuvor im Abschnitt Erstellen der App-Registrierung erstellt haben.
  2. Wählen Sie unter Verwalten die Optionen Authentifizierung>Plattform hinzufügen aus.
  3. Wählen Sie unter Webanwendungen die Kachel Single-Page-Webanwendung aus.
  4. Geben Sie unter Umleitungs-URIs einen Umleitungs-URI ein. Aktivieren Sie KEINES der beiden Kontrollkästchen unter Implizite Genehmigung und hybride Flows.
  5. Wählen Sie Konfigurieren aus, um den Vorgang zum Hinzufügen des Umleitungs-URIs abzuschließen.

Sie haben jetzt die Registrierung Ihrer Single-Page-Webanwendung (Single-Page Application, SPA) abgeschlossen und einen Umleitungs-URI konfiguriert, an den der Client umgeleitet wird und alle Sicherheitstoken gesendet werden. Wenn Sie Ihren Umleitungs-URI über die Kachel Single-Page-Webanwendung im Bereich Plattform hinzufügen konfigurieren, wird Ihre Anwendungsregistrierung für die Unterstützung des Autorisierungscodeflows mit PKCE und CORS konfiguriert.

Befolgen Sie das Tutorial, um weitere Anleitungen zu erhalten.

Umleitungs-URI: MSAL.js 1.0 mit dem impliziten Flow

Führen Sie die folgenden Schritte aus, um einen Umleitungs-URI für eine Single-Page-App hinzuzufügen, die MSAL.js 1.3 (oder eine frühere Version) und den Flow zur impliziten Genehmigung verwendet. Der Autorisierungscodeflow wird von Anwendungen, die MSAL.js 1.3 oder eine frühere Version verwenden, nicht unterstützt.

  1. Wählen Sie im Microsoft Entra Admin Center die App-Registrierung aus, die Sie zuvor im Abschnitt Erstellen der App-Registrierung erstellt haben.
  2. Wählen Sie unter Verwalten die Optionen Authentifizierung>Plattform hinzufügen aus.
  3. Wählen Sie unter Webanwendungen die Kachel Single-Page-Webanwendung aus.
  4. Geben Sie unter Umleitungs-URIs einen Umleitungs-URI ein.
  5. Aktivieren Sie die Option Implizite Genehmigung und hybride Flows:
    • Wenn Ihre Anwendung Benutzer anmeldet, wählen Sie ID-Token aus.
    • Wenn Ihre Anwendung auch eine geschützte Web-API aufrufen muss, wählen Sie Zugriffstoken aus. Weitere Informationen zu diesen Tokentypen finden Sie unter ID-Token und Zugriffstoken.
  6. Wählen Sie Konfigurieren aus, um den Vorgang zum Hinzufügen des Umleitungs-URIs abzuschließen.

Sie haben jetzt die Registrierung Ihrer Single-Page-Webanwendung (Single-Page Application, SPA) abgeschlossen und einen Umleitungs-URI konfiguriert, an den der Client umgeleitet wird und alle Sicherheitstoken gesendet werden. Wenn Sie einen oder beide Tokentypen (ID-Token und Zugriffstoken) auswählen, haben Sie den Flow zur impliziten Genehmigung aktiviert.

Hinweis zu Autorisierungsflows

Bei einer mithilfe der SPA-Plattformkonfiguration erstellten App-Registrierung wird der Autorisierungscodeflow standardmäßig aktiviert. Um diesen Flow nutzen zu können, muss Ihre Anwendung MSAL.js 2.0 oder höher verwenden.

Wie bereits erwähnt, sind Single-Page-Webanwendungen, die MSAL.js 1.3 verwenden, auf den Flow zur impliziten Genehmigung beschränkt. In den aktuellen bewährten Methoden für OAuth 2.0 wird für SPAs die Verwendung des Autorisierungscodeflows anstelle des impliziten Flows empfohlen. Außerdem tragen Aktualisierungstoken mit begrenzter Lebensdauer zur Anpassung Ihrer Anwendung an die in Bezug auf die Einschränkungen von Cookies geltenden Datenschutzbestimmungen moderner Browser (z. B. an Safari ITP) bei.

Wenn alle durch eine App-Registrierung dargestellten Single-Page-Webanwendungen für die Produktion MSAL.js 2.0 und den Autorisierungscodeflow verwenden, deaktivieren Sie die Einstellungen für die implizite Gewährung im Bereich Authentifizierung der App-Registrierung im Microsoft Entra Admin Center. Anwendungen, die MSAL.js 1.x und den impliziten Flow verwenden, funktionieren weiterhin, aber dazu muss der implizite Flow aktiviert bleiben.

Nächste Schritte

Konfigurieren Sie den Code Ihrer App, um die in den vorherigen Schritten erstellte App-Registrierung zu verwenden: Codekonfiguration der App.