Udostępnij za pośrednictwem


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

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.

Zrzut ekranu przedstawiający przykładową aplikację jednostronicową wyświetlaną w oknie przeglądarki.

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ć.

    Zrzut ekranu przedstawiający stronę logowania lub rejestracji z przyciskami dostawcy tożsamości

    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.

Zrzut ekranu przedstawiający odpowiedź internetowego interfejsu API wyświetlaną w przykładowej aplikacji w oknie przeglądarki.

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

Następne kroki