Szybki start: konfigurowanie logowania do aplikacji jednostronicowej (SPA) - Azure AD B2C

2025-05-03

Ważne

Od 1 maja 2025 r. usługa Azure AD B2C nie będzie już dostępna do zakupu dla nowych klientów. Dowiedz się więcej w naszych często zadawanych pytaniach.

Usługa Azure Active Directory B2C (Azure AD B2C) zapewnia zarządzanie tożsamościami w chmurze, aby zapewnić ochronę aplikacji, firmy i klientów. Usługa Azure AD B2C umożliwia aplikacjom uwierzytelnianie na kontach społecznościowych i kontach przedsiębiorstwa przy użyciu otwartych protokołów standardowych.

W tym szybkim starcie użyjesz aplikacji jednostronicowej, aby zalogować się za pomocą dostawcy tożsamości społecznościowej i wywołać chroniony interfejs API usługi Azure AD B2C.

Wymagania wstępne

Visual Studio Code
Node.js
Konto społecznościowe z Facebooka, Google lub Microsoft
Przykładowy kod z GitHub: ms-identity-b2c-javascript-spa:

Możesz pobrać archiwum zip lub sklonować repozytorium
```
git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
```

Uruchamianie aplikacji

Uruchom serwer, uruchamiając następujące polecenia z wiersza polecenia Node.js:
```
npm install
npm update
npm start
```
Serwer uruchomiony przez server.js wyświetla port, na którym nasłuchuje:
```
Listening on port 6420...
```
Przejdź do adresu URL aplikacji. Na przykład http://localhost:6420.

Wybierz pozycję Zaloguj się , aby rozpocząć podróż użytkownika.
Usługa Azure AD B2C przedstawia stronę logowania fikcyjnej firmy o nazwie "Fabrikam" dla przykładowej aplikacji internetowej. Aby zarejestrować się przy użyciu dostawcy tożsamości społecznościowych, wybierz przycisk dostawcy tożsamości, którego chcesz użyć.

Uwierzytelniasz się (logujesz się) przy użyciu poświadczeń konta społecznościowego i autoryzujesz aplikację do odczytywania informacji z konta społecznościowego. Udzielając dostępu, aplikacja może pobierać informacje o profilu z konta społecznościowego, takiego jak Twoje imię i nazwisko i miasto.
Zakończ proces logowania się dla usługodawcy tożsamości.