Teilen über

Single-Page-Webanwendung: App-Registrierung

  • Artikel

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 (Proof of Key for Code Exchange) 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. Gehen 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 (Cross-Origin Resource Sharing) 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 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.

Ihre Single-Page-Webanwendung ist jetzt mit einem Umleitungs-URI registriert. Wenn Sie Ihren Umleitungs-URI über die Kachel Single-Page-Webanwendung im Bereich Plattform hinzufügen konfigurieren, unterstützt Ihre Anwendungsregistrierung den Autorisierungscodeflow mit PKCE und CORS.

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 SPA hinzuzufügen, die MSAL.js 1.3 (oder eine frühere Version) und den Flow zur impliziten Genehmigung verwendet. Anwendungen, die MSAL.js 1.3 oder früher verwenden, unterstützen den Autorisierungscodeflow nicht.

  1. Wählen Sie im Microsoft Entra Admin Center die App-Registrierung aus, die Sie 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.

Ihre Single-Page-Webanwendung ist jetzt mit einem Umleitungs-URI registriert. Durch Die Auswahl eines oder beider ID-Token und Zugriffstokens unterstützt Ihre Anwendungsregistrierung den Flow zur impliziten Genehmigung.

Hinweis zu Autorisierungsflows

Standardmäßig ermöglicht eine mit der SPA-Plattformkonfiguration erstellte App-Registrierung den Autorisierungscodeflow. Um diesen Flow nutzen zu können, muss Ihre Anwendung MSAL.js 2.0 oder höher verwenden.

SPAs mit MSAL.js 1.3 sind 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 SPAs für die Produktion MSAL.js 2.0 und den Autorisierungscodeflow verwenden, deaktivieren Sie die Einstellungen für die implizite Genehmigung im Bereich Authentifizierung der App-Registrierung im Microsoft Entra Admin Center. Wenn Sie weiterhin SPAs mit MSAL.js 1.x verwenden, lassen Sie den impliziten Flow aktiviert.

Nächste Schritte

Konfigurieren Sie den Code Ihrer App, um die unter Codekonfiguration der App erstellte App-Registrierung zu verwenden.