Freigeben über

Registrieren einer einzelseitigen Anwendung in Azure Active Directory B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

Bevor Ihre Anwendungen mit Azure Active Directory B2C (Azure AD B2C) interagieren können, müssen sie in einem von Ihnen verwalteten Mandanten registriert sein. In diesem Handbuch erfahren Sie, wie Sie eine Einzelseitenanwendung ("SPA") mithilfe des Azure-Portals registrieren.

Übersicht über Authentifizierungsoptionen

Viele moderne Webanwendungen werden als clientseitige Einzelseitenanwendungen ("SPAs") erstellt. Entwickler schreiben sie mit JavaScript oder einem SPA-Framework wie Angular, Vue und 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 Einzelseitenanwendungen zum Anmelden von Benutzern und zum Abrufen von Token für den Zugriff auf Back-End-Dienste oder Web-APIs zu ermöglichen:

Autorisierungscodefluss (mit PKCE)

Mit dem OAuth 2.0-Autorisierungscodefluss (mit PKCE) kann die Anwendung einen Autorisierungscode für ID-Token austauschen, um die authentifizierten Benutzer und Zugriffstoken darzustellen, die zum Aufrufen geschützter APIs erforderlich sind. Darüber hinaus werden Aktualisierungstoken zurückgegeben, die langfristigen Zugriff auf Ressourcen im Auftrag von Benutzern ermöglichen, ohne dass eine Interaktion mit diesen Benutzern erforderlich ist.

Dies ist der empfohlene Ansatz. Wenn Sie Aktualisierungstoken für begrenzte Lebensdauer haben, können Sie ihre Anwendung an moderne Datenschutzbeschränkungen für Browsercookies anpassen, z. B. Safari ITP.

Um diesen Fluss zu nutzen, kann Ihre Anwendung eine Authentifizierungsbibliothek verwenden, die ihn unterstützt, z. B. MSAL.js.

Autorisierungsfluss für Single-Page-Webanwendungen

Impliziter Gewährungsflow

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

Impliziter Fluss für Single-Page-Webanwendungen

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

Voraussetzungen

  • Wenn Sie noch kein Azure-Abonnement haben, erstellen Sie ein kostenloses Konto, 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 aus, 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 einen Namen für die Anwendung ein. Beispiel: spaapp1.

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

  7. Wählen Sie unter Umleitungs-URIdie Einzelseitenanwendung (Single Page Application, SPA) aus, und geben Sie https://jwt.ms dann in das TEXTFELD "URL" ein.

    Der Umleitungs-URI ist der Endpunkt, an den der Autorisierungsserver (Azure AD B2C, in diesem Fall) den Benutzer sendet, nachdem er seine Interaktion mit dem Benutzer abgeschlossen hat. Außerdem empfängt der Umleitungs-URI-Endpunkt das Zugriffstoken oder autorisierungscode bei erfolgreicher Autorisierung. 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. Zu Testzwecken wie in diesem Leitfaden können Sie es auf https://jwt.ms festlegen, eine von Microsoft betriebene Webanwendung, die den dekodierten 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 httpsbeginnen, 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 .../abc/response-oidc als Teil des Pfads 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 aus.

Aktivieren des Flows zur impliziten Genehmigung

Sie können den impliziten Genehmigungsfluss aus zwei Gründen aktivieren, wenn Sie MSAL.js Version 1.3 oder einer früheren Version verwenden oder wenn Sie eine App-Registrierung verwenden, um einen Benutzerablauf zu Testzwecken zu testen.

Führen Sie die folgenden Schritte aus, um den impliziten Genehmigungsfluss für Ihre App zu aktivieren:

  1. Wählen Sie die App-Registrierung aus, die Sie erstellt haben.

  2. Wählen Sie unter Verwalten die Option Authentifizierung aus.

  3. 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).

  4. Wählen Sie Speichern aus.

Hinweis

Wenn Ihre App MSAL.js 2.0 oder höher verwendet, aktivieren Sie den impliziten Genehmigungsfluss nicht, da MSAL.js 2.0+ den OAuth 2.0-Autorisierungscodefluss (mit PKCE) unterstützt. Wenn Sie die implizite Erteilung aktivieren, um einen Benutzerablauf zu testen, stellen Sie sicher, dass Sie die Einstellungen für den impliziten Genehmigungsfluss deaktivieren, bevor Sie Ihre App in der Produktion bereitstellen.

Migrieren vom Flow zur impliziten Genehmigung

Wenn Sie über eine vorhandene Anwendung verfügen, die den impliziten Fluss verwendet, empfehlen wir, den Autorisierungscodefluss mit PKCE mithilfe eines Frameworks zu verwenden, das ihn unterstützt, z. B. MSAL.js 2.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 zur impliziten Genehmigung:

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

Anwendungen, die den impliziten Fluss verwenden, können weiterhin funktionieren, wenn der implizite Fluss aktiviert bleibt.

Nächste Schritte

Erfahren Sie, wie Sie Benutzerflüsse in Azure Active Directory B2C erstellen.