Schnellstart: Einrichten der Anmeldung für eine einzelseitige App mit 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.

Azure Active Directory B2C (Azure AD B2C) bietet Cloudidentitätsverwaltung, um Ihre Anwendung, Ihr Unternehmen und Ihre Kunden zu schützen. Azure AD B2C ermöglicht Es Ihren Anwendungen, sich bei Sozialen Konten und Unternehmenskonten mit offenen Standardprotokollen zu authentifizieren.

In dieser Schnellstartanleitung verwenden Sie eine einzelseitige Anwendung, um sich mit einem sozialen Identitätsanbieter anzumelden und eine Azure AD B2C-geschützte Web-API aufzurufen.

Voraussetzungen

• Visual Studio Code

• Node.js

• Konto für soziale Netzwerke von Facebook, Google oder Microsoft

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

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

  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 an der Eingabeaufforderung Node.js ausführen:

   npm install
   npm update
   npm start
   

   Der von server.js gestartete Server zeigt den Port, an dem er lauscht, an.

   Listening on port 6420...
   

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

Melden Sie sich mit Ihrem Konto an

1. Wählen Sie "Anmelden" aus, um die Benutzerreise zu starten.

2. Azure AD B2C stellt eine Anmeldeseite für ein fiktives Unternehmen namens "Fabrikam" für die Beispielwebanwendung dar. Um sich mit einem Anbieter für soziale Netzwerke zu registrieren, wählen Sie die Schaltfläche des Identitätsanbieters aus, den Sie verwenden möchten.

   

   Sie authentifizieren sich (anmelden) mit Ihren Anmeldeinformationen für soziale Netzwerke und autorisieren die Anwendung, Informationen aus Ihrem sozialen Konto zu lesen. Durch die Gewährung des Zugriffs kann die Anwendung Profilinformationen aus dem Sozialen Konto wie Ihrem Namen und Ihrer Stadt abrufen.

3. Beenden Sie den Anmeldevorgang für den Identitätsanbieter.

Zugreifen auf eine geschützte API-Ressource

Wählen Sie die Aufruf-API aus, damit Ihr Anzeigename von der Web-API als JSON-Objekt zurückgegeben wird.

Die Beispielanwendung mit einer Seite enthält ein Zugriffstoken in der Anforderung an die geschützte Web-API-Ressource.

Nächste Schritte

• Beginnen Sie mit der Erstellung Ihres eigenen Azure Active Directory B2C-Mandanten im Azure-Portal