Szybki start: konfigurowanie logowania dla aplikacji jednostronicowej przy użyciu usługi Azure Active Directory B2C

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 względem kont społecznościowych i firmowych za pomocą protokołów zgodnych z otwartymi standardami.

W tym przewodniku Szybki start aplikacja jednostronicowa jest używana do logowania za pomocą dostawcy tożsamości społecznościowych i wywoływania chronionego internetowego interfejsu API usługi Azure AD B2C.

Wymagania wstępne

• Visual Studio Code

• Node.js

• Konto społecznościowe z serwisu Facebook, Google lub Microsoft

• Przykład kodu z usługi 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

1. Uruchom serwer za pomocą następującego polecenia w wierszu polecenia środowiska Node.js:

   npm install
   npm update
   npm start
   

   Serwer uruchomiony przez server.js wyświetla port, na który nasłuchuje:

   Listening on port 6420...
   

2. Przejdź do adresu URL aplikacji. Na przykład http://localhost:6420.

Logowanie się przy użyciu swojego konta

1. Wybierz pozycję Zaloguj, aby rozpocząć podróż użytkownika.

2. 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. Po udzieleniu dostępu aplikacji może ona pobrać informacje z profilu na koncie w sieci społecznościowej, takie jak Twoje nazwisko i miasto.

3. Zakończ proces logowania dla dostawcy tożsamości.

Uzyskiwanie dostępu do chronionego zasobu interfejsu API

Wybierz pozycję Wywołaj interfejs API , aby nazwa wyświetlana została zwrócona z internetowego interfejsu API jako obiektu JSON.

Przykładowa aplikacja jednostronicowa dołącza token dostępu do żądania wysłanego do chronionego zasobu internetowego interfejsu API.

Następne kroki

• Rozpoczynanie tworzenia własnej dzierżawy usługi Azure Active Directory B2C w Azure Portal