Udostępnij za pośrednictwem

Konfigurowanie uwierzytelniania w przykładowej aplikacji klasycznej WPF przy użyciu usługi Azure AD B2C

  • Artykuł

W tym artykule użyto przykładowej aplikacji klasycznej Windows Presentation Foundation (WPF), aby zilustrować sposób dodawania uwierzytelniania usługi Azure Active Directory B2C (Azure AD B2C) do aplikacji klasycznych.

Omówienie

OpenID Połączenie (OIDC) to protokół uwierzytelniania oparty na protokole OAuth 2.0. Aby bezpiecznie logować użytkowników do aplikacji, możesz użyć funkcji OIDC. Ten przykład aplikacji klasycznej używa przepływu biblioteki Microsoft Authentication Library (MSAL) z kluczem weryfikacji kodu autoryzacji OIDC dla przepływu PKCE (Code Exchange). Biblioteka MSAL to biblioteka udostępniana przez firmę Microsoft, która upraszcza dodawanie obsługi uwierzytelniania i autoryzacji do aplikacji klasycznych.

Przepływ logowania obejmuje następujące kroki:

  1. Użytkownicy otwierają aplikację i wybierają pozycję Zaloguj się.
  2. Aplikacja otwiera przeglądarkę systemową urządzenia stacjonarnego i uruchamia żądanie uwierzytelnienia w usłudze Azure AD B2C.
  3. Użytkownicy zarejestrują się lub zalogują się, zresetuj hasło lub zalogują się przy użyciu konta społecznościowego.
  4. Po pomyślnym zalogowaniu użytkowników usługa Azure AD B2C zwraca kod autoryzacji do aplikacji.
  5. Aplikacja wykonuje następujące akcje:
    1. Wymienia kod autoryzacji do tokenu identyfikatora, tokenu dostępu i tokenu odświeżania.
    2. Odczytuje oświadczenia tokenu identyfikatora.
    3. Przechowuje tokeny w pamięci podręcznej w pamięci do późniejszego użycia.

Omówienie rejestracji aplikacji

Aby umożliwić aplikacji logowanie się za pomocą usługi Azure AD B2C i wywoływanie internetowego interfejsu API, zarejestruj dwie aplikacje w katalogu usługi Azure AD B2C.

  • Rejestracja aplikacji klasycznej umożliwia aplikacji logowanie się za pomocą usługi Azure AD B2C. Podczas rejestracji aplikacji określ identyfikator URI przekierowania. Identyfikator URI przekierowania to punkt końcowy, do którego użytkownicy są przekierowywani przez usługę Azure AD B2C po uwierzytelnieniu w usłudze Azure AD B2C. Proces rejestracji aplikacji generuje identyfikator aplikacji, znany również jako identyfikator klienta, który jednoznacznie identyfikuje aplikację klasyczną (na przykład identyfikator aplikacji: 1).

  • Rejestracja internetowego interfejsu API umożliwia aplikacji wywoływanie chronionego internetowego interfejsu API. Rejestracja uwidacznia uprawnienia internetowego interfejsu API (zakresy). Proces rejestracji aplikacji generuje identyfikator aplikacji, który jednoznacznie identyfikuje internetowy interfejs API (na przykład identyfikator aplikacji: 2). Przyznaj aplikacji klasycznej (identyfikator aplikacji: 1) uprawnienia do zakresów internetowego interfejsu API (identyfikator aplikacji: 2).

Rejestracja i architektura aplikacji przedstawiono na następujących diagramach:

Diagram of the desktop app with web API, registrations, and tokens.

Wywoływanie do internetowego interfejsu API

Po zakończeniu uwierzytelniania użytkownicy wchodzą w interakcję z aplikacją, która wywołuje chroniony internetowy interfejs API. Internetowy interfejs API używa uwierzytelniania tokenu elementu nośnego. Token elementu nośnego to token dostępu uzyskany przez aplikację z usługi Azure AD B2C. Aplikacja przekazuje token w nagłówku autoryzacji żądania HTTPS.

Authorization: Bearer <access token>

Jeśli zakres tokenu dostępu nie jest zgodny z zakresami internetowego interfejsu API, biblioteka uwierzytelniania uzyskuje nowy token dostępu z poprawnymi zakresami.

Przepływ wylogowania

Przepływ wylogowania obejmuje następujące kroki:

  1. W aplikacji użytkownicy wyloguj się.
  2. Aplikacja czyści obiekty sesji, a biblioteka uwierzytelniania czyści pamięć podręczną tokenów.
  3. Aplikacja przenosi użytkowników do punktu końcowego wylogowania usługi Azure AD B2C, aby zakończyć sesję usługi Azure AD B2C.
  4. Użytkownicy są przekierowywani z powrotem do aplikacji.

Wymagania wstępne

Komputer z programem Visual Studio 2019 z programowaniem aplikacji klasycznych platformy .NET.

Krok 1. Konfigurowanie przepływu użytkownika

Gdy użytkownicy próbują zalogować się do aplikacji, aplikacja uruchamia żądanie uwierzytelniania do punktu końcowego autoryzacji za pośrednictwem przepływu użytkownika. Przepływ użytkownika definiuje i kontroluje środowisko użytkownika. Po zakończeniu przepływu użytkownika usługa Azure AD B2C generuje token, a następnie przekierowuje użytkowników z powrotem do aplikacji.

Jeśli jeszcze tego nie zrobiono, utwórz przepływ użytkownika lub zasady niestandardowe. Powtórz kroki, aby utworzyć trzy oddzielne przepływy użytkownika w następujący sposób:

  • Połączony przepływ logowania i rejestracji użytkownika, taki jak susi. Ten przepływ użytkownika obsługuje również środowisko Nie pamiętasz hasła .
  • Przepływ użytkownika do edycji profilu, taki jak edit_profile.
  • Przepływ użytkownika resetowania hasła, taki jak reset_password.

Usługa Azure AD B2C poprzedza B2C_1_ nazwę przepływu użytkownika. Na przykład, susi staje się B2C_1_susi.

Krok 2. Rejestrowanie aplikacji

Utwórz aplikację klasyczną i rejestrację aplikacji internetowego interfejsu API oraz określ zakresy internetowego interfejsu API.

Krok 2.1. Rejestrowanie aplikacji internetowego interfejsu API

Aby utworzyć rejestrację aplikacji internetowego interfejsu API (identyfikator aplikacji: 2), wykonaj następujące kroki:

  1. Zaloguj się w witrynie Azure Portal.

  2. Upewnij się, że używasz katalogu zawierającego dzierżawę usługi Azure AD B2C. Wybierz ikonę Katalogi i subskrypcje na pasku narzędzi portalu.

  3. W ustawieniach portalu | Strona Katalogi i subskrypcje , znajdź katalog usługi Azure AD B2C na liście Nazwa katalogu, a następnie wybierz pozycję Przełącz.

  4. W witrynie Azure Portal wyszukaj i wybierz pozycję Azure AD B2C.

  5. Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.

  6. W polu Nazwa wprowadź nazwę aplikacji (na przykład my-api1). Pozostaw wartości domyślne dla identyfikatora URI przekierowania i obsługiwanych typów kont.

  7. Wybierz pozycję Zarejestruj.

  8. Po zakończeniu rejestracji aplikacji wybierz pozycję Przegląd.

  9. Zarejestruj wartość identyfikatora aplikacji (klienta) do późniejszego użycia podczas konfigurowania aplikacji internetowej.

    Screenshot that demonstrates how to get a web A P I application I D.

Krok 2.2. Konfigurowanie zakresów aplikacji internetowego interfejsu API

  1. Wybierz utworzoną aplikację my-api1 (identyfikator aplikacji: 2), aby otworzyć stronę Przegląd.

  2. W obszarze Zarządzanie wybierz pozycję Uwidaczniaj interfejs API.

  3. Obok pozycji Identyfikator URI identyfikatora aplikacji wybierz link Ustaw . Zastąp wartość domyślną (GUID) unikatową nazwą (na przykład tasks-api), a następnie wybierz pozycję Zapisz.

    Gdy aplikacja internetowa żąda tokenu dostępu dla internetowego interfejsu API, powinien dodać ten identyfikator URI jako prefiks dla każdego zakresu zdefiniowanego dla interfejsu API.

  4. W obszarze Zakresy zdefiniowane przez ten interfejs API wybierz pozycję Dodaj zakres.

  5. Aby utworzyć zakres definiujący dostęp do odczytu do interfejsu API:

    1. W polu Nazwa zakresu wprowadź ciąg tasks.read.
    2. W przypadku Administracja nazwy wyświetlanej zgody wprowadź odczyt dostępu do interfejsu API zadań.
    3. Aby uzyskać Administracja opis zgody, wprowadź zezwalanie na dostęp do odczytu do interfejsu API zadań.

  6. Wybierz Dodaj zakres.

  7. Wybierz pozycję Dodaj zakres, a następnie dodaj zakres definiujący dostęp do zapisu do interfejsu API:

    1. W polu Nazwa zakresu wprowadź ciąg tasks.write.
    2. W przypadku Administracja nazwy wyświetlanej zgody wprowadź wartość Write access to tasks API (Zapis dostępu do interfejsu API zadań).
    3. Aby uzyskać Administracja opis zgody, wprowadź zezwalanie na dostęp do zapisu do interfejsu API zadań.

  8. Wybierz Dodaj zakres.

Krok 2.3. Rejestrowanie aplikacji klasycznej

Aby utworzyć rejestrację aplikacji klasycznej, wykonaj następujące czynności:

  1. Zaloguj się w witrynie Azure Portal.
  2. Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.
  3. W obszarze Nazwa wprowadź nazwę aplikacji (na przykład desktop-app1).
  4. W obszarze Obsługiwane typy kont wybierz Konta w dowolnym dostawcy tożsamości lub katalogu organizacyjnym (do uwierzytelniania użytkowników za pomocą przepływów użytkownika).
  5. W obszarze Identyfikator URI przekierowania wybierz pozycję Klient publiczny/natywny (pulpit i pulpit), a następnie w polu Adres URL wprowadź .https://your-tenant-name.b2clogin.com/oauth2/nativeclient Zastąp your-tenant-name ciąg nazwą dzierżawy. Aby uzyskać więcej opcji, zobacz Konfigurowanie identyfikatora URI przekierowania.
  6. Wybierz pozycję Zarejestruj.
  7. Po zakończeniu rejestracji aplikacji wybierz pozycję Przegląd.
  8. Zarejestruj identyfikator aplikacji (klienta) do późniejszego użycia podczas konfigurowania aplikacji klasycznej. Screenshot highlighting the desktop application ID.

Krok 2.4. Udzielanie uprawnień aplikacji klasycznej dla internetowego interfejsu API

Aby udzielić aplikacji (identyfikator aplikacji: 1) uprawnień, wykonaj następujące kroki:

  1. Wybierz Rejestracje aplikacji, a następnie wybierz utworzoną aplikację (identyfikator aplikacji: 1).

  2. W obszarze Zarządzanie wybierz pozycję Uprawnienia interfejsu API.

  3. W obszarze Skonfigurowane uprawnienia wybierz pozycję Dodaj uprawnienie.

  4. Wybierz kartę Moje interfejsy API.

  5. Wybierz interfejs API (identyfikator aplikacji: 2), do którego ma zostać udzielona aplikacja internetowa. Na przykład wprowadź ciąg my-api1.

  6. W obszarze Uprawnienie rozwiń węzeł zadania, a następnie wybierz zdefiniowane wcześniej zakresy (na przykład tasks.read i tasks.write).

  7. Wybierz Przyznaj uprawnienia.

  8. Wybierz pozycję Udziel zgody administratora dla< swojej nazwy> dzierżawy.

  9. Wybierz opcję Tak.

  10. Wybierz pozycję Odśwież, a następnie sprawdź, czy w obszarze Stan dla obu zakresów jest wyświetlana wartość Przyznane dla ... .

  11. Z listy Skonfigurowane uprawnienia wybierz zakres, a następnie skopiuj pełną nazwę zakresu.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Krok 3. Konfigurowanie przykładowego internetowego interfejsu API

Ten przykład uzyskuje token dostępu z odpowiednimi zakresami, których aplikacja klasyczna może używać dla internetowego interfejsu API. Aby wywołać internetowy interfejs API z kodu, wykonaj następujące czynności:

  1. Użyj istniejącego internetowego interfejsu API lub utwórz nowy. Aby uzyskać więcej informacji, zobacz Włączanie uwierzytelniania we własnym internetowym interfejsie API przy użyciu usługi Azure AD B2C.
  2. Po skonfigurowaniu internetowego interfejsu API skopiuj identyfikator URI internetowego punktu końcowego interfejsu API. W następnych krokach użyjesz internetowego punktu końcowego interfejsu API.

Napiwek

Jeśli nie masz internetowego interfejsu API, nadal możesz uruchomić ten przykład. W takim przypadku aplikacja zwraca token dostępu, ale nie będzie mógł wywołać internetowego interfejsu API.

Krok 4. Pobieranie przykładu aplikacji klasycznej WPF

  1. Pobierz plik zip lub sklonuj przykładową aplikację internetową z repozytorium GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

  2. Otwórz rozwiązanie active-directory-b2c-wpf (plik active-directory-b2c-wpf.sln) w programie Visual Studio.

Krok 5. Konfigurowanie przykładowej aplikacji klasycznej

W projekcie active-directory-b2c-wpf otwórz plik App.xaml.cs . Składowe App.xaml.cs klasy zawierają informacje o dostawcy tożsamości usługi Azure AD B2C. Aplikacja klasyczna używa tych informacji do ustanowienia relacji zaufania z usługą Azure AD B2C, logowania i wylogowywanie użytkowników, uzyskiwanie tokenów i ich weryfikowanie.

Zaktualizuj następujące składowe klasy:

Key Wartość
TenantName Pierwsza część nazwy dzierżawy usługi Azure AD B2C (na przykład contoso.b2clogin.com).
ClientId Identyfikator aplikacji klasycznej z kroku 2.3.
PolicySignUpSignIn Przepływ użytkownika rejestracji lub logowania lub zasady niestandardowe utworzone w kroku 1.
PolicyEditProfile Edytowanie przepływu użytkownika profilu lub zasad niestandardowych utworzonych w kroku 1.
ApiEndpoint (Opcjonalnie) Internetowy punkt końcowy interfejsu API utworzony w kroku 3 (na przykład https://contoso.azurewebsites.net/hello).
ApiScopes Zakresy internetowego interfejsu API utworzone w kroku 2.4.

Końcowy plik App.xaml.cs powinien wyglądać podobnie do następującego kodu w języku C#:

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

Krok 6. Uruchamianie i testowanie aplikacji klasycznej

  1. Przywróć pakiety NuGet.

  2. Wybierz pozycję F5, aby skompilować i uruchomić przykład.

  3. Wybierz pozycję Zaloguj się, a następnie zarejestruj się lub zaloguj się przy użyciu konta lokalnego lub społecznościowego usługi Azure AD B2C.

    Screenshot highlighting how to start the sign-in flow.

  4. Po pomyślnym zarejestrowaniu się lub zalogowaniu szczegóły tokenu są wyświetlane w dolnym okienku aplikacji WPF.

    Screenshot highlighting the Azure AD B2C access token and user ID.

  5. Wybierz pozycję Wywołaj interfejs API , aby wywołać internetowy interfejs API.

Następne kroki

Dowiedz się, jak skonfigurować opcje uwierzytelniania w aplikacji klasycznej WPF przy użyciu usługi Azure AD B2C.