Szybki start: konfigurowanie logowania dla aplikacji ASP.NET 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 platformy ASP.NET 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

  • Program Visual Studio 2022 z pakietem roboczym tworzenia aplikacji ASP.NET i aplikacji internetowych.

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

  • Pobierz plik zip lub sklonuj przykładową aplikację internetową z usługi GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git
    

    Przykładowe rozwiązanie zawiera dwa projekty:

    • TaskWebApp — aplikacja internetowa, która pozwala tworzyć i edytować listę zadań. Aplikacja internetowa używa przepływu użytkownika rejestracji lub logowania , aby zarejestrować lub zalogować użytkowników.
    • TaskService — internetowy interfejs API, który obsługuje następujące funkcje listy zadań: tworzenie, odczytywanie, aktualizowanie i usuwanie. Internetowy interfejs API jest chroniony przez usługę Azure AD B2C i wywoływany przez aplikację internetową.

Uruchamianie aplikacji w programie Visual Studio

  1. W folderze projektu przykładowej aplikacji otwórz rozwiązanie B2C-WebAPI-DotNet.sln w programie Visual Studio.

  2. Na potrzeby tego przewodnika Szybki start uruchomisz równocześnie projekty TaskWebApp i TaskService. Kliknij prawym przyciskiem myszy rozwiązanie B2C-WebAPI-DotNet w Eksplorator rozwiązań, a następnie wybierz pozycję Konfiguruj projekty startowe....

  3. Wybierz pozycję Wiele projektów startowych i zmień Akcję dla obu projektów na Uruchom.

  4. Wybierz przycisk OK.

  5. Naciśnij klawisz F5, aby debugować obie aplikacje. Każda z aplikacji zostanie otwarta we własnej karcie przeglądarki:

    • https://localhost:44316/ — aplikacja internetowa platformy ASP.NET. W przewodniku Szybki start ta aplikacja jest używana bezpośrednio.
    • https://localhost:44332/ — internetowy interfejs API wywoływany przez internetową aplikację platformy ASP.NET.

Logowanie się przy użyciu swojego konta

  1. Wybierz pozycję Zarejestruj/ Zaloguj się w aplikacji internetowej ASP.NET, aby uruchomić przepływ pracy.

    Zrzut ekranu przedstawiający przykładową aplikację internetową ASP.NET w przeglądarce z wyróżnionym linkiem rejestracji/podpisywania

    Przykład obsługuje kilka opcji rejestracji, w tym przy użyciu dostawcy tożsamości dla sieci społecznościowej, lub tworzenia konta lokalnego przy użyciu adresu e-mail. W tym przewodniku Szybki start użyj konta dostawcy tożsamości społecznościowych z serwisu Facebook, Google lub Microsoft.

  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 przyciski Dostawcy tożsamości logowania lub rejestracji na stronie

    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.

Edycja profilu

Usługa Azure Active Directory B2C zawiera funkcję umożliwiającą użytkownikom aktualizowanie profilów. Przykładowa aplikacja internetowa używa przepływu użytkownika profilu edycji usługi Azure AD B2C dla przepływu pracy.

  1. Na pasku menu aplikacji wybierz nazwę profilu, a następnie wybierz pozycję Edytuj profil , aby edytować utworzony profil.

    Zrzut ekranu przedstawiający przykładową aplikację internetową w przeglądarce z wyróżnionym linkiem do edycji profilu

  2. Zmień nazwę wyświetlaną lub miasto, a następnie wybierz pozycję Kontynuuj , aby zaktualizować profil.

    Zmiana jest wyświetlana w prawej górnej części strony głównej aplikacji internetowej.

Uzyskiwanie dostępu do chronionego zasobu interfejsu API

  1. Wybierz pozycję To-Do Lista, aby wprowadzić i zmodyfikować elementy listy zadań do wykonania.

  2. W polu tekstowym Nowy element wprowadź tekst. Aby wywołać chroniony internetowy interfejs API usługi Azure AD B2C, który dodaje element listy zadań do wykonania, wybierz pozycję Dodaj.

    Zrzut ekranu przedstawiający przykładową aplikację internetową w przeglądarce z wyróżnionym linkiem To-Do Lista i przyciskiem Dodaj.

    Aplikacja internetowa ASP.NET zawiera token dostępu Microsoft Entra w żądaniu do chronionego zasobu internetowego interfejsu API w celu wykonywania operacji na elementach listy zadań do wykonania przez użytkownika.

Pomyślnie użyto konta użytkownika usługi Azure AD B2C, aby wykonać autoryzowane wywołanie chronionego internetowego interfejsu API usługi Azure AD B2C.

Następne kroki

Tworzenie dzierżawy usługi Azure Active Directory B2C w witrynie Azure Portal