Szenario: Einseitige Anwendung

Erfahren Sie, wie Sie eine Single-Page-Webanwendung (SPA) erstellen. Anweisungen zu Azure Static Web Apps finden Sie stattdessen unter Authentifizierung und Autorisierung für Static Web Apps.

Erste Schritte

Erstellen Sie, falls noch nicht geschehen, Ihre erste App, indem Sie den „Schnellstart: JavaScript Single-Page-Webanwendung“ abschließen:

Schnellstart: Single-Page-Webanwendung

Übersicht

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.

Microsoft Identity Platform 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:

  • OAuth 2.0-Autorisierungscodefluss (mit PKCE). Der Autorisierungscodefluss ermöglicht es der Anwendung, einen Autorisierungscode für ID-Token auszutauschen, um den authentifizierten Benutzer darzustellen, sowie Zugriffstoken auszutauschen, die zum Aufrufen geschützter APIs erforderlich sind.

    Proof Key for Code Exchange oder PKCE ist eine Erweiterung des Autorisierungscodeflows, um Angriffe durch Einschleusung von Autorisierungscode zu verhindern. Dieser IETF-Standard mindert die Gefahr, dass ein Autorisierungscode abgefangen wird, und ermöglicht einen sicheren OAuth-Austausch von öffentlichen Clients, wie in RFC 7636 dokumentiert. 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.

    Die Verwendung des Autorisierungscodeflows mit PKCE ist der sicherere und empfohlene Autorisierungsansatz, nicht nur in nativen und browserbasierten JavaScript-Apps, sondern auch für jeden anderen OAuth-Clienttyp.

Autorisierungsfluss für Single-Page-Webanwendungen

  • Impliziter OAuth 2.0-Fluss. Der Fluss für die implizite Genehmigung ermöglicht der Anwendung das Abrufen von ID- und Zugriffstoken. Im Gegensatz zum Autorisierungscodefluss gibt der Fluss für die implizite Genehmigung kein Aktualisierungstoken zurück.

Impliziter Fluss für Single-Page-Webanwendungen

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

Besonderheiten

Zum Aktivieren dieses Szenarios für Anwendung benötigen Sie Folgendes:

  • Eine Anwendungsregistrierung bei Azure Active Directory (Azure AD). Die Registrierungsschritte unterscheiden sich beim Fluss für die implizite Genehmigung und beim Autorisierungscodefluss.
  • Sie benötigen eine Anwendungskonfiguration mit den registrierten Anwendungseigenschaften, wie z. B. der Anwendungs-ID.
  • Sie müssen die Microsoft-Authentifizierungsbibliothek für JavaScript (MSAL.js) für den Authentifizierungsfluss zum Anmelden und Abrufen von Token verwenden.

Wenn Sie neu im Bereich Identitäts- und Zugriffsverwaltung (IAM) mit OAuth 2.0 und OpenID Connect sind oder auch nur neu im Bereich IAM auf der Microsoft Identity Platform, sollten die folgenden Artikel ganz oben auf Ihrer Leseliste stehen.

Obwohl es nicht erforderlich ist, sie vor dem Abschluss Ihres ersten Schnellstarts oder Tutorials zu lesen, decken sie Themen ab, die integraler Bestandteil der Plattform sind, und die Vertrautheit mit ihnen wird Ihnen auf Ihrem Weg beim Erstellen komplexerer Szenarien helfen.

Nächste Schritte

Fahren Sie mit dem nächsten Artikel in diesem Szenario fort: App-Registrierung.