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

2025-05-08

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.

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.

Przegląd

OpenID Connect (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:

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

Omówienie rejestracji aplikacji

Aby umożliwić aplikacji logowanie się przy użyciu 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 adres, na który użytkownicy są kierowani przez Azure AD B2C po uwierzytelnieniu. 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 interfejsu internetowego API umożliwia twojej aplikacji wywoływanie chronionego 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 aplikacji klasycznej z internetowym interfejsem API, rejestracjami i tokenami.

Wezwanie do API sieciowego

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 za pomocą tokenu nosiciela. 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:

Z aplikacji użytkownicy się wylogowują.
Aplikacja czyści obiekty sesji, a biblioteka uwierzytelniania czyści pamięć podręczną tokenów.
Aplikacja przenosi użytkowników do punktu końcowego wylogowania usługi Azure AD B2C, aby zakończyć sesję usługi Azure AD B2C.
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 za pośrednictwem przepływu użytkownika do punktu końcowego autoryzacji. 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 politykę niestandardową. 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 także funkcję Nie pamiętasz hasła.
Przepływ użytkownika dotyczący edycji profilu, taki jak edit_profile.
Proces resetowania hasła przez użytkownika, taki jak reset_password.

Usługa Azure AD B2C dodaje B2C_1_ do nazwy 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: Zarejestruj aplikację interfejsu API WWW

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

Zaloguj się do witryny Azure Portal.
Upewnij się, że używasz katalogu zawierającego tenant usługi Azure AD B2C. Wybierz ikonę Katalogi i subskrypcje na pasku narzędzi portalu.
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.
W witrynie Azure Portal wyszukaj i wybierz pozycję Azure AD B2C.
Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.
W polu Nazwa wprowadź nazwę aplikacji (na przykład my-api1). Pozostaw wartości domyślne dla Redirect URI i obsługiwanych typów kont.
Wybierz pozycję Zarejestruj.
Po zakończeniu rejestracji aplikacji wybierz pozycję Przegląd.
Zarejestruj wartość identyfikatora aplikacji (klienta) do późniejszego użycia podczas konfigurowania aplikacji internetowej.

Krok 2.2. Konfigurowanie zakresów aplikacji internetowego interfejsu API

Wybierz utworzoną aplikację my-api1 (identyfikator aplikacji: 2), aby otworzyć stronę Przegląd.
W obszarze Zarządzanie wybierz pozycję Uwidaczniaj interfejs API.
Obok 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 API, powinna dodać ten identyfikator URI jako prefiks dla każdego zakresu zdefiniowanego dla API.
W obszarze Zakresy zdefiniowane przez ten interfejs API, wybierz pozycję Dodaj zakres.
Aby utworzyć zakres definiujący dostęp do odczytu do interfejsu API:
1. Dla Nazwa zakresu, wprowadź tasks.read.
2. W polu Nazwa wyświetlana zgody administratora, wprowadź Odczyt dostępu do interfejsu API zadań.
3. W polu Opis zgody administratora wprowadź Zezwala na dostęp do odczytu do API zadań.
Wybierz Dodaj zakres.
Wybierz pozycję Dodaj zakres, a następnie dodaj zakres definiujący dostęp do zapisu do interfejsu API:
1. Dla Nazwa zakresu wpisz tasks.write.
2. W polu Wyświetlana nazwa zgody administratora wprowadź Zapis dostępu do interfejsu API zadań.
3. W polu Opis zgody administratora wprowadź wartość Zezwalaj na dostęp do zapisu do interfejsu API zadań.
Wybierz Dodaj zakres.

Krok 2.3. Rejestrowanie aplikacji klasycznej

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

Zaloguj się do witryny Azure Portal.
Wybierz pozycję Rejestracje aplikacji, a następnie wybierz pozycję Nowa rejestracja.
W obszarze Nazwa wprowadź nazwę aplikacji (na przykład desktop-app1).
W obszarze Obsługiwane typy kontwybierz Konta w dowolnym dostawcy tożsamości lub katalogu organizacyjnym, aby uwierzytelniać użytkowników za pomocą przepływów użytkowników.
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.
Wybierz pozycję Zarejestruj.
Po zakończeniu rejestracji aplikacji wybierz pozycję Przegląd.
Zarejestruj identyfikator aplikacji (klienta) do późniejszego użycia podczas konfigurowania aplikacji klasycznej.

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

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

Wybierz Rejestracje aplikacji, a następnie wybierz utworzoną aplikację (identyfikator aplikacji: 1).
W sekcji Zarządzanie wybierz Uprawnienia API.
W obszarze Skonfigurowane uprawnienia wybierz pozycję Dodaj uprawnienie.
Wybierz kartę Moje interfejsy API.
Wybierz interfejs API (App ID: 2), do którego aplikacja internetowa powinna mieć dostęp. Na przykład wprowadź ciąg my-api1.
W obszarze Uprawnienie rozwiń węzeł zadania, a następnie wybierz zdefiniowane wcześniej zakresy (na przykład tasks.read i tasks.write).
Wybierz Dodaj uprawnienia.
Wybierz pozycję Udziel zgody administratora dla <nazwy dzierżawy>.
Wybierz opcję Tak.
Wybierz Odśwież, a następnie sprawdź, czy pod Stan dla obu zakresów jest wyświetlana wartość Przyznane dla ....
Z listy Skonfigurowane uprawnienia wybierz zakres, a następnie skopiuj pełną nazwę zakresu.

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:

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.
Po skonfigurowaniu webowego interfejsu API skopiuj identyfikator URI punktu końcowego API. W następnych krokach użyjesz internetowego punktu końcowego interfejsu API.

Wskazówka

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

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
```
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 . Członkowie klasy App.xaml.cs zawierają informacje o dostawcy tożsamości 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:

Klawisz	Wartość
`TenantName`	Pierwsza część nazwy dzierżawcy 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 webowego 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

Przywróć pakiety NuGet.
Wybierz pozycję F5, aby skompilować i uruchomić przykład.
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.
Po pomyślnym zarejestrowaniu się lub zalogowaniu szczegóły tokenu są wyświetlane w dolnym okienku aplikacji WPF.
Wybierz pozycję Wywołaj interfejs API , aby wywołać internetowy interfejs API.

Dalsze kroki

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