Freigeben über


Schnellstart: Einrichten der Anmeldung für eine Single-Page-App mit Azure Active Directory B2C

Azure Active Directory B2C (Azure AD B2C) ermöglicht die Cloudidentitätsverwaltung zum Schützen Ihrer Anwendung, Ihres Unternehmens und Ihrer Kunden. Mit Azure AD B2C können sich Ihre Anwendungen über offene Standardprotokolle bei Konten für soziale Netzwerke und bei Unternehmenskonten authentifizieren.

In dieser Schnellstartanleitung verwenden Sie eine Single-Page-Anwendung, um sich unter Verwendung eines sozialen Netzwerks als Identitätsanbieter anzumelden und eine per Azure AD B2C geschützte Web-API aufzurufen.

Voraussetzungen

Ausführen der Anwendung

  1. Starten Sie den Server, indem Sie die folgenden Befehle über die Node.js-Eingabeaufforderung ausführen:

    npm install
    npm update
    npm start
    

    Der von server.js gestartete Server zeigt den Port an, an dem gelauscht wird:

    Listening on port 6420...
    
  2. Navigieren Sie zur URL der Anwendung. Beispiel: http://localhost:6420.

Screenshot einer im Browserfenster angezeigten SPA-Beispiel-App.

Anmelden mit Ihrem Konto

  1. Wählen Sie Anmelden aus, um die User Journey zu starten.

  2. Azure AD B2C stellt für ein fiktives Unternehmen namens „Fabrikam“ eine Anmeldeseite für die Beispielwebanwendung bereit. Um sich mit einem Social Media-Konto als Identitätsanbieter zu registrieren, wählen Sie die Schaltfläche des Identitätsanbieters aus, den Sie verwenden möchten.

    Screenshot der Anmelde-/Registrierungsseite mit Schaltflächen für die Auswahl von Identitätsanbietern

    Sie authentifizieren sich mit den Anmeldeinformationen Ihres Social Media-Kontos und autorisieren die Anwendung dazu, Informationen aus Ihrem Social Media-Konto zu lesen. Wenn Sie der Anwendung Zugriff auf diese gewähren, kann die Anwendung Profilinformationen aus dem Social Media-Konto abrufen, z.B. Ihren Namen und Ihre Stadt.

  3. Schließen Sie den Anmeldevorgang für den Identitätsanbieter ab.

Zugreifen auf eine geschützte API-Ressource

Wählen Sie API aufrufen aus, damit die Web-API Ihren Anzeigenamen als JSON-Objekt zurückgibt.

Screenshot der Web-API-Antwort in der im Browserfenster angezeigten Beispielanwendung.

Die Single-Page-Beispielanwendung enthält ein Zugriffstoken in der Anforderung, die an die geschützte Web-API-Ressource gesendet wird.

Nächste Schritte