Hitelesítés konfigurálása asztali WPF-mintaalkalmazásban az Azure AD B2C használatával

Cikk
01/11/2024

Ez a cikk egy minta Windows megjelenítési alaprendszer (WPF) asztali alkalmazást használ, amely bemutatja, hogyan adhat hozzá Azure Active Directory B2C -hitelesítést az asztali alkalmazásokhoz.

Áttekintés

Az OpenID Csatlakozás (OIDC) egy OAuth 2.0-n alapuló hitelesítési protokoll. Az OIDC használatával biztonságosan bejelentkezhet a felhasználók egy alkalmazásba. Ez az asztali alkalmazásminta a Microsoft Authentication Libraryt (MSAL) használja OIDC hitelesítési kódkóddal a Kódcsere (PKCE) folyamatához. Az MSAL egy Microsoft által biztosított kódtár, amely leegyszerűsíti a hitelesítés és az engedélyezés támogatását az asztali alkalmazásokhoz.

A bejelentkezési folyamat a következő lépéseket foglalja magában:

A felhasználók megnyitják az alkalmazást, és kiválasztják a bejelentkezést.
Az alkalmazás megnyitja az asztali eszköz rendszerböngészőjét, és elindít egy hitelesítési kérést az Azure AD B2C-hez.
A felhasználók regisztrálnak vagy bejelentkeznek, visszaállítják a jelszót, vagy egy közösségi fiókkal jelentkeznek be.
Miután a felhasználók sikeresen bejelentkeznek, az Azure AD B2C egy engedélyezési kódot ad vissza az alkalmazásnak.
Az alkalmazás a következő műveleteket hajtja végre:
1. Az engedélyezési kódot azonosító jogkivonatra, hozzáférési jogkivonatra és frissítési jogkivonatra cseréli.
2. Beolvassa az azonosító jogkivonat jogcímeit.
3. A jogkivonatokat egy memóriabeli gyorsítótárban tárolja későbbi használatra.

Alkalmazásregisztráció áttekintése

Ha engedélyezni szeretné, hogy az alkalmazás bejelentkezhessen az Azure AD B2C-vel, és meghívjon egy webes API-t, regisztráljon két alkalmazást az Azure AD B2C címtárban.

Az asztali alkalmazásregisztrációval az alkalmazás bejelentkezhet az Azure AD B2C-vel. Az alkalmazásregisztráció során adja meg az átirányítási URI-t. Az átirányítási URI az a végpont, amelyre az Azure AD B2C átirányítja a felhasználókat az Azure AD B2C-vel való hitelesítés után. Az alkalmazásregisztrációs folyamat létrehoz egy alkalmazásazonosítót, más néven ügyfélazonosítót, amely egyedileg azonosítja az asztali alkalmazást (például: 1. alkalmazásazonosító).
A webes API-regisztrációval az alkalmazás meghívhat egy védett webes API-t. A regisztráció elérhetővé teszi a webes API-engedélyeket (hatóköröket). Az alkalmazásregisztrációs folyamat létrehoz egy alkalmazásazonosítót, amely egyedileg azonosítja a webes API-t (például alkalmazásazonosító: 2). Adjon engedélyt az asztali alkalmazásnak (alkalmazásazonosító: 1) a webes API-hatóköröknek (alkalmazásazonosító: 2).

Az alkalmazásregisztrációt és az architektúrát az alábbi diagramok szemléltetik:

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

Webes API meghívása

A hitelesítés befejezése után a felhasználók kapcsolatba lépnek az alkalmazással, amely egy védett webes API-t hív meg. A webes API tulajdonosi jogkivonat-hitelesítést használ. A tulajdonosi jogkivonat az az alkalmazás által az Azure AD B2C-ből beszerzett hozzáférési jogkivonat. Az alkalmazás átadja a jogkivonatot a HTTPS-kérés engedélyezési fejlécében.

Authorization: Bearer <access token>

Ha a hozzáférési jogkivonat hatóköre nem egyezik a webes API hatóköreivel, a hitelesítési kódtár egy új hozzáférési jogkivonatot szerez be a megfelelő hatókörökkel.

A kijelentkezés folyamata

A kijelentkezés folyamata a következő lépésekből áll:

Az alkalmazásból a felhasználók kijelentkeznek.
Az alkalmazás törli a munkamenet-objektumokat, a hitelesítési tár pedig törli a jogkivonat-gyorsítótárát.
Az alkalmazás az Azure AD B2C bejelentkezési végpontra viszi a felhasználókat az Azure AD B2C-munkamenet leállításához.
A rendszer visszairányítja a felhasználókat az alkalmazásba.

Előfeltételek

A Visual Studio 2019-et futtató számítógép .NET asztali fejlesztéssel.

1. lépés: A felhasználói folyamat konfigurálása

Amikor a felhasználók megpróbálnak bejelentkezni az alkalmazásba, az alkalmazás elindít egy hitelesítési kérést az engedélyezési végponthoz egy felhasználói folyamaton keresztül. A felhasználói folyamat határozza meg és szabályozza a felhasználói élményt. Miután a felhasználók befejezték a felhasználói folyamatot, az Azure AD B2C létrehoz egy jogkivonatot, majd visszairányítja a felhasználókat az alkalmazásba.

Ha még nem tette meg, hozzon létre egy felhasználói folyamatot vagy egy egyéni szabályzatot. Ismételje meg a lépéseket három különálló felhasználói folyamat létrehozásához az alábbiak szerint:

Kombinált bejelentkezés és felhasználói folyamat regisztrálása , például susi. Ez a felhasználói folyamat az Elfelejtett jelszó funkciót is támogatja.
Profilszerkesztési felhasználói folyamat, például edit_profile.
Új jelszó kérése felhasználói folyamat, például reset_password.

Az Azure AD B2C előre fel van függve B2C_1_ a felhasználói folyamat nevére. Például a susi következő lesz B2C_1_susi: .

2. lépés: Alkalmazások regisztrálása

Hozza létre az asztali alkalmazást és a webes API-alkalmazás regisztrációját, és adja meg a webes API hatóköreit.

2.1. lépés: A web API-alkalmazás regisztrálása

A webes API-alkalmazásregisztráció létrehozásához (alkalmazásazonosító: 2) kövesse az alábbi lépéseket:

Jelentkezzen be az Azure Portalra.
Győződjön meg arról, hogy az Azure AD B2C-bérlőt tartalmazó könyvtárat használja. Válassza a Címtárak + előfizetések ikont a portál eszköztárán.
A Portál beállításai | Címtárak + előfizetések lap, keresse meg az Azure AD B2C-címtárat a címtárnévlistában, majd válassza a Váltás lehetőséget.
Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
Válassza a Alkalmazásregisztrációk, majd az Új regisztráció lehetőséget.
A Név mezőbe írja be az alkalmazás nevét (például my-api1). Hagyja meg az átirányítási URI és a támogatott fióktípusok alapértelmezett értékeit.
Válassza ki a pénztárgépet.
Az alkalmazásregisztráció befejezése után válassza az Áttekintés lehetőséget.
Jegyezze fel az alkalmazás (ügyfél) azonosítóját a webalkalmazás konfigurálásakor későbbi használatra.

2.2. lépés: Web API-alkalmazások hatóköreinek konfigurálása

Válassza ki a létrehozott my-api1 alkalmazást (alkalmazásazonosító: 2) az Áttekintés lap megnyitásához.
A Kezelés területen válassza az API-k felfedése lehetőséget.
Az alkalmazásazonosító URI-ja mellett válassza a Hivatkozás beállítása lehetőséget. Cserélje le az alapértelmezett értéket (GUID) egy egyedi névre (például tasks-api), majd válassza a Mentés lehetőséget.

Amikor a webalkalmazás hozzáférési jogkivonatot kér a webes API-hoz, ezt az URI-t kell hozzáadnia az API-hoz definiált hatókörök előtagjaként.
Az API által definiált hatókörök alatt válassza a Hatókör hozzáadása lehetőséget.
Az API olvasási hozzáférését meghatározó hatókör létrehozása:
1. A hatókör neveként adja meg a tasks.read nevet.
2. Ha Rendszergazda hozzájárulás megjelenítendő nevét, írja be a Feladatok API olvasási hozzáférését.
3. A Rendszergazda hozzájárulás leírásához írja be A feladatok API olvasási hozzáférésének engedélyezése című cikket.
Válassza a Hatókör hozzáadása lehetőséget.
Válassza a Hatókör hozzáadása lehetőséget, majd adjon hozzá egy, az API írási hozzáférését meghatározó hatókört:
1. A Hatókör neve mezőbe írja be a tasks.write nevet.
2. Ha Rendszergazda hozzájárulás megjelenítendő nevét szeretné megadni, írja be a Feladatok API írási hozzáférését.
3. A Rendszergazda hozzájárulás leírásához írja be a Tevékenység API írási hozzáférését.
Válassza a Hatókör hozzáadása lehetőséget.

2.3. lépés: Az asztali alkalmazás regisztrálása

Az asztali alkalmazásregisztráció létrehozásához tegye a következőket:

Jelentkezzen be az Azure Portalra.
Válassza a Alkalmazásregisztrációk, majd az Új regisztráció lehetőséget.
A Név területen adja meg az alkalmazás nevét (például asztali alkalmazás1).
A Támogatott fióktípusok területen válassza a Fiókok lehetőséget bármely identitásszolgáltatóban vagy szervezeti címtárban (a felhasználók felhasználói folyamatokkal való hitelesítéséhez).
Az Átirányítási URI területen válassza a Nyilvános ügyfél/natív (asztali & asztali) lehetőséget, majd az URL-mezőbe írja be a következőthttps://your-tenant-name.b2clogin.com/oauth2/nativeclient: Cserélje le your-tenant-name a bérlő nevét. További beállítások: Átirányítási URI konfigurálása.
Válassza ki a pénztárgépet.
Az alkalmazásregisztráció befejezése után válassza az Áttekintés lehetőséget.
Az asztali alkalmazás konfigurálásakor jegyezze fel az alkalmazás (ügyfél) azonosítóját későbbi használatra.

2.4. lépés: Az asztali alkalmazás engedélyeinek megadása a webes API-hoz

Az alkalmazás (alkalmazásazonosító: 1) engedélyének megadásához kövesse az alábbi lépéseket:

Válassza Alkalmazásregisztrációk, majd válassza ki a létrehozott alkalmazást (alkalmazásazonosító: 1).
A Kezelés területen válassza ki az API-engedélyeket.
A Konfigurált engedélyek csoportban válassza az Engedély hozzáadása lehetőséget.
Válassza a Saját API-k lapot.
Válassza ki azt az API-t (alkalmazásazonosító: 2), amelyhez a webalkalmazásnak hozzáférést kell biztosítani. Írja be például a my-api1 nevet.
Az Engedély területen bontsa ki a tevékenységeket, majd válassza ki a korábban definiált hatóköröket (például tasks.read és tasks.write).
Jelölje be az Engedélyek hozzáadása lehetőséget.
Válassza a bérlő nevének> rendszergazdai <hozzájárulásának megadása lehetőséget.
Válassza az Igen lehetőséget.
Válassza a Frissítés lehetőséget, majd ellenőrizze, hogy a megadott for ... jelenik-e meg mindkét hatókör állapotában .
A Konfigurált engedélyek listájában válassza ki a hatókört, majd másolja a teljes nevet a hatókörbe.

3. lépés: A minta webes API konfigurálása

Ez a minta egy hozzáférési jogkivonatot szerez be az asztali alkalmazás által a webes API-hoz használható hatókörökkel. Ha egy webes API-t kódból szeretne meghívni, tegye a következőket:

Használjon meglévő webes API-t, vagy hozzon létre egy újat. További információ: Hitelesítés engedélyezése saját webes API-ban az Azure AD B2C használatával.
A webes API konfigurálása után másolja ki a webes API-végpont URI-ját. A következő lépésekben a webes API-végpontot fogja használni.

Tipp.

Ha nem rendelkezik webes API-val, továbbra is futtathatja ezt a mintát. Ebben az esetben az alkalmazás visszaadja a hozzáférési jogkivonatot, de nem tudja meghívni a webes API-t.

4. lépés: A WPF asztali alkalmazásminta lekérése

Töltse le a .zip fájlt, vagy klónozza a minta webalkalmazást a GitHub-adattárból.
```
git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git
```
Nyissa meg az active-directory-b2c-wpf megoldást (az active-directory-b2c-wpf.sln fájlt) a Visual Studióban.

5. lépés: Az asztali mintaalkalmazás konfigurálása

Az active-directory-b2c-wpf projektben nyissa meg az App.xaml.cs fájlt. Az App.xaml.cs osztálytagok információkat tartalmaznak az Azure AD B2C-identitásszolgáltatóról. Az asztali alkalmazás ezen információk alapján megbízhatósági kapcsolatot létesít az Azure AD B2C-vel, be- és kijelentkezteti a felhasználókat, jogkivonatokat szerez be és érvényesít.

Frissítse a következő osztálytagokat:

Kulcs	Érték
`TenantName`	Az Azure AD B2C-bérlő nevének első része (például `contoso.b2clogin.com`).
`ClientId`	Az asztali alkalmazás azonosítója a 2.3. lépésből.
`PolicySignUpSignIn`	Az 1. lépésben létrehozott regisztrációs vagy bejelentkezési felhasználói folyamat vagy egyéni szabályzat.
`PolicyEditProfile`	Az 1. lépésben létrehozott szerkesztési profil felhasználói folyamata vagy egyéni szabályzata.
`ApiEndpoint`	(Nem kötelező) A 3. lépésben létrehozott webes API-végpont (például`https://contoso.azurewebsites.net/hello`).
`ApiScopes`	A 2.4. lépésben létrehozott webes API-hatókörök.

A végleges App.xaml.cs fájlnak a következő C# kódhoz hasonlóan kell kinéznie:

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";

6. lépés: Az asztali alkalmazás futtatása és tesztelése

Állítsa vissza a NuGet-csomagokat.
Válassza az F5 lehetőséget a minta létrehozásához és futtatásához.
Válassza a Bejelentkezés lehetőséget, majd regisztráljon vagy jelentkezzen be az Azure AD B2C helyi vagy közösségi fiókjával.
Sikeres regisztráció vagy bejelentkezés után a jogkivonat részletei megjelennek a WPF-alkalmazás alsó ablaktábláján.
Válassza a Hívás API lehetőséget a webes API meghívásához.

További lépések

Megtudhatja, hogyan konfigurálhat hitelesítési beállításokat asztali WPF-alkalmazásokban az Azure AD B2C használatával.

Megosztás a következőn keresztül: