Registrieren einer Single-Page-Webanwendung (Single-Page Application, SPA) in Azure Active Directory B2C

  • Artikel

Bevor Ihre Anwendungen mit Azure Active Directory B2C (Azure AD B2C) interagieren können, müssen sie in einem von Ihnen verwalteten Mandanten registriert werden. In diesem Leitfaden erfahren Sie, wie Sie eine Single-Page-Webanwendung mithilfe des Azure-Portals registrieren.

Übersicht über die Authentifizierungsoptionen

Viele moderne Webanwendungen werden als clientseitige Single-Page-Webanwendungen („SPAs“) erstellt. Entwickler schreiben diese mithilfe von JavaScript oder eines SPA-Frameworks wie Angular, Vue oder React. Diese Anwendungen werden in einem Webbrowser ausgeführt und weisen andere Authentifizierungsmerkmale als herkömmliche serverseitige Webanwendungen auf.

Azure AD B2C bietet zwei Optionen, um Single-Page-Webanwendungen das Anmelden von Benutzern und Abrufen von Token für den Zugriff auf Back-End-Dienste oder -Web-APIs zu ermöglichen:

Autorisierungscodefluss (mit PKCE)

Der OAuth 2.0-Autorisierungscodeflow (mit PKCE) ermöglicht der Anwendung, einen Autorisierungscode für ID-Token auszutauschen, um die authentifizierten Benutzer*innen darzustellen, sowie Zugriffstoken auszutauschen, die zum Aufrufen geschützter APIs erforderlich sind. Darüber hinaus werden Aktualisierungstoken zurückgegeben, die langfristigen Zugriff auf Ressourcen im Auftrag von Benutzern bereitstellen, ohne dass eine Interaktion mit diesen Benutzern erforderlich ist.

Dies ist die empfohlene Vorgehensweise. Aktualisierungstoken mit begrenzter Lebensdauer tragen zur Anpassung Ihrer Anwendung an die in Bezug auf die Einschränkungen von Cookies geltenden Datenschutzbestimmungen moderner Browser (z. B. an Safari ITP) bei.

Um diesen Flow nutzen zu können, kann Ihre Anwendung eine Authentifizierungsbibliothek verwenden, von der sie unterstützt wird, z. B. MSAL.js.

Single-page applications-auth

Impliziter Gewährungsflow

Einige Bibliotheken wie MSAL.js 1.x unterstützen nur den Flow für implizite Genehmigungen, oder Ihre Anwendung wird so implementiert, dass sie den impliziten Flow verwendet. In diesen Fällen unterstützt Azure AD B2C den impliziten OAuth 2.0-Flow. Der Fluss für die implizite Genehmigung ermöglicht der Anwendung das Abrufen von ID- und Zugriffstoken. Im Gegensatz zum Autorisierungscodeflow gibt der implizite Genehmigungsflow kein Aktualisierungstoken zurück.

Single-page applications-implicit

Dieser Authentifizierungsflow umfasst keine Anwendungsszenarien, die plattformübergreifende JavaScript-Frameworks verwenden, z. B. Electron und React-Native. Diese Szenarien erfordern weitere Funktionen für die Interaktion mit den nativen Plattformen.

Voraussetzungen

  • Wenn Sie kein Azure-Abonnement besitzen, können Sie ein kostenloses Konto erstellen, bevor Sie beginnen.

  • Wenn Sie nicht über einen Azure AD B2C-Mandanten verfügen, erstellen Sie jetzt einen. Sie können einen vorhandenen Azure AD B2C-Mandanten verwenden.

Registrieren der SPA

  1. Melden Sie sich beim Azure-Portal an.

  2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C Mandanten zu wechseln.

  3. Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.

  4. Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.

  5. Geben Sie unter Name einen Namen für die Anwendung ein. Beispiel: spaapp1.

  6. Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Identitätsanbieter oder Organisationsverzeichnis (zum Authentifizieren von Benutzern mit Benutzerflows) aus.

  7. Wählen Sie unter Umleitungs-URI die Option Single-Page-Anwendung (SPA) aus, und geben Sie https://jwt.ms in das URL-Textfeld ein.

    Der Umleitungs-URI ist der Endpunkt, an den der Autorisierungsserver (in diesem Fall Azure AD B2C) den bzw. die Benutzer*in nach Abschluss seiner Interaktion mit dem bzw. der Benutzer*in sendet. Außerdem empfängt der Umleitungs-URI-Endpunkt nach erfolgreicher Autorisierung das Zugriffstoken oder den Autorisierungscode. In einer Produktionsanwendung handelt es sich in der Regel um einen öffentlich zugänglichen Endpunkt, an dem Ihre App ausgeführt wird, etwa um https://contoso.com/auth-response. Für Testzwecke wie in diesem Leitfaden können Sie ihn auf https://jwt.ms festlegen. Dabei handelt es sich um eine Microsoft-Webanwendung, die den decodierten Inhalt eines Tokens anzeigt (der Inhalt des Tokens verlässt niemals Ihren Browser). Während der App-Entwicklung können Sie den Endpunkt hinzufügen, an dem die Anwendung lokal lauscht, etwa http://localhost:5000. Sie können Umleitungs-URIs in Ihren registrierten Anwendungen jederzeit hinzufügen und ändern.

    Für Umleitungs-URIs gelten die folgenden Einschränkungen:

    • Die Antwort-URL muss mit dem Schema https beginnen, es sei denn, Sie verwenden localhost.
    • Bei der Antwort-URL muss die Groß-/Kleinschreibung beachtet werden. Die Groß-/Kleinschreibung muss der Groß-/Kleinschreibung des URL-Pfads Ihrer ausgeführten Anwendung entsprechen. Wenn Ihre Anwendung beispielsweise als Teil des Pfads .../abc/response-oidc enthält, geben Sie in der Antwort-URL nicht .../ABC/response-oidc an. Weil der Webbrowser bei Pfaden die Groß-/Kleinschreibung beachtet, werden Cookies, die .../abc/response-oidc zugeordnet sind, möglicherweise ausgeschlossen, wenn eine Umleitung an die anders geschriebene (nicht übereinstimmende) URL .../ABC/response-oidc erfolgt.

  8. Aktivieren Sie unter Berechtigungen das Kontrollkästchen Administratoreinwilligung für openid- und offline_access-Berechtigungen erteilen.

  9. Wählen Sie Registrieren.

Aktivieren des impliziten Flows

Wenn Sie MSAL.js 1.3 oder eine frühere Version mit dem Flow für implizite Genehmigungen in Ihrer SPA-App verwenden oder Sie die https://jwt.ms/-App zum Testen eines Benutzerflows oder einer benutzerdefinierten Richtlinie konfigurieren, müssen Sie den Flow für implizite Genehmigungen in der App-Registrierung aktivieren:

  1. Wählen Sie im linken Menü unter Verwalten die Option Authentifizierung aus.

  2. Aktivieren Sie unter Implizite Genehmigung und Hybridflows die Kontrollkästchen Zugriffstoken (werden für implizite Flows verwendet) und ID-Token (für implizite und Hybridflows verwendet).

  3. Wählen Sie Speichern aus.

Wenn Ihre App MSAL.js ab v2.0 verwendet, aktivieren Sie die implizite Flussgenehmigung nicht, da MSAL.js ab v2.0 den Autorisierungscodeflow mit PKCE unterstützt.

Migrieren vom impliziten Flow

Wenn Sie über eine vorhandene Anwendung verfügen, die den impliziten Flow verwendet, empfehlen wir, zur Verwendung des Autorisierungscodeflows zu migrieren. Verwenden Sie dazu ein Framework, das diesen unterstützt, etwa MSAL.js ab v2.0.

Wenn alle von einer App-Registrierung dargestellten SPA in Ihrer Produktionsumgebung mit der Verwendung des Autorisierungscodeflows beginnen, deaktivieren Sie folgendermaßen die Einstellungen für den Flow für implizite Genehmigung:

  1. Wählen Sie im linken Menü unter Verwalten die Option Authentifizierung aus.
  2. Deaktivieren Sie unter Implizite Genehmigung die Kontrollkästchen Zugriffstoken und ID-Token.
  3. Klicken Sie auf Speichern.

Anwendungen, die den impliziten Flow verwenden, funktionieren weiterhin, wenn der implizite Flow aktiviert bleibt.

Nächste Schritte

Weitere Informationen zu Erstellen von Benutzerflows in Azure Active Directory B2C.