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

• Visual Studio Code

• Node.js

• Ein Social Media-Konto von Facebook, Google oder Microsoft

• Codebeispiel aus GitHub: ms-identity-b2c-javascript-spa:

  Sie können das ZIP-Archiv herunterladen oder das Repository klonen.

  Konsole

  git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
  

Ausführen der Anwendung

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

   Konsole

   npm install
   npm update
   npm start
   

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

   Konsole

   Listening on port 6420...
   

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

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.

   

   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.

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

Nächste Schritte

• Erste Schritte beim Erstellen eines eigenen Azure Active Directory B2C-Mandanten im Azure-Portal