Konfigurera autentisering i en WPF-exempelapp med hjälp av Azure AD B2C

  • Artikel

Den här artikeln använder ett WPF-skrivbordsprogram (Windows Presentation Foundation) som exempel för att illustrera hur du lägger till Azure Active Directory B2C-autentisering (Azure AD B2C) i dina skrivbordsappar.

Översikt

OpenID Anslut (OIDC) är ett autentiseringsprotokoll som bygger på OAuth 2.0. Du kan använda OIDC för att logga in användare på ett säkert sätt i ett program. Det här skrivbordsappexemplet använder Microsoft Authentication Library (MSAL) med OIDC-auktoriseringskoden Proof Key for Code Exchange (PKCE). MSAL är ett Microsoft-bibliotek som förenklar tillägg av stöd för autentisering och auktorisering i skrivbordsappar.

Inloggningsflödet omfattar följande steg:

  1. Användare öppnar appen och väljer inloggning.
  2. Appen öppnar datorenhetens systemwebbläsare och startar en autentiseringsbegäran till Azure AD B2C.
  3. Användare registrerar sig eller loggar in, återställer lösenordet eller loggar in med ett socialt konto.
  4. När användarna har loggat in returnerar Azure AD B2C en auktoriseringskod till appen.
  5. Appen vidtar följande åtgärder:
    1. Auktoriseringskoden byts ut mot en ID-token, åtkomsttoken och uppdateringstoken.
    2. Den läser ID-tokenanspråken.
    3. Den lagrar token i en minnesintern cache för senare användning.

Översikt över appregistrering

Om du vill att din app ska kunna logga in med Azure AD B2C och anropa ett webb-API registrerar du två program i Azure AD B2C-katalogen.

  • Med registreringen av skrivbordsprogrammet kan din app logga in med Azure AD B2C. Ange omdirigerings-URI under appregistreringen. Omdirigerings-URI:n är slutpunkten som användarna omdirigeras till av Azure AD B2C när de har autentiserats med Azure AD B2C. Appregistreringsprocessen genererar ett program-ID, även kallat klient-ID, som unikt identifierar din skrivbordsapp (till exempel app-ID: 1).

  • Med registreringen av webb-API :et kan din app anropa ett skyddat webb-API. Registreringen exponerar webb-API-behörigheter (omfång). Appregistreringsprocessen genererar ett program-ID som unikt identifierar ditt webb-API (till exempel app-ID: 2). Ge din skrivbordsapp (app-ID: 1) behörighet till webb-API-omfången (app-ID: 2).

Programregistreringen och arkitekturen visas i följande diagram:

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

Anrop till ett webb-API

När autentiseringen har slutförts interagerar användarna med appen, som anropar ett skyddat webb-API. Webb-API:et använder ägartokenautentisering . Ägartoken är den åtkomsttoken som appen fick från Azure AD B2C. Appen skickar token i auktoriseringshuvudet för HTTPS-begäran.

Authorization: Bearer <access token>

Om åtkomsttokens omfång inte matchar webb-API:ets omfång hämtar autentiseringsbiblioteket en ny åtkomsttoken med rätt omfång.

Utloggningsflödet

Utloggningsflödet omfattar följande steg:

  1. Från appen loggar användarna ut.
  2. Appen rensar sina sessionsobjekt och autentiseringsbiblioteket rensar sin tokencache.
  3. Appen tar användare till azure AD B2C-utloggningsslutpunkten för att avsluta Azure AD B2C-sessionen.
  4. Användarna omdirigeras tillbaka till appen.

Förutsättningar

En dator som kör Visual Studio 2019 med .NET-skrivbordsutveckling.

Steg 1: Konfigurera användarflödet

När användare försöker logga in på din app startar appen en autentiseringsbegäran till auktoriseringsslutpunkten via ett användarflöde. Användarflödet definierar och styr användarupplevelsen. När användarna har slutfört användarflödet genererar Azure AD B2C en token och omdirigerar sedan användarna tillbaka till ditt program.

Om du inte redan har gjort det skapar du ett användarflöde eller en anpassad princip. Upprepa stegen för att skapa tre separata användarflöden på följande sätt:

  • Ett kombinerat användarflöde för inloggning och registrering , till exempel susi. Det här användarflödet stöder även funktionen För att glömma ditt lösenord .
  • Ett användarflöde för profilredigering , till exempel edit_profile.
  • Ett användarflöde för lösenordsåterställning , till exempel reset_password.

Azure AD B2C förbereder användarflödesnamnet B2C_1_ . Till exempel kommer susi att bli B2C_1_susi.

Steg 2: Registrera dina program

Skapa skrivbordsappen och webb-API-programregistreringen och ange omfången för webb-API:et.

Steg 2.1: Registrera webb-API-appen

Så här skapar du appregistreringen för webb-API:et (app-ID: 2):

  1. Logga in på Azure-portalen.

  2. Kontrollera att du använder katalogen som innehåller din Azure AD B2C-klientorganisation. Välj ikonen Kataloger + prenumerationer i portalens verktygsfält.

  3. I portalinställningarna | Sidan Kataloger + prenumerationer, leta upp din Azure AD B2C-katalog i listan Katalognamn och välj sedan Växla.

  4. I Azure-portalen söker du efter och väljer Azure AD B2C.

  5. Välj Appregistreringar och välj sedan Ny registrering.

  6. Som Namn anger du ett namn för programmet (till exempel my-api1). Lämna standardvärdena för omdirigerings-URI och kontotyper som stöds.

  7. Välj Registrera.

  8. När appregistreringen är klar väljer du Översikt.

  9. Registrera program-ID-värdet (klient) för senare användning när du konfigurerar webbprogrammet.

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

Steg 2.2: Konfigurera webb-API-appomfattningar

  1. Välj det my-api1-program som du skapade (app-ID: 2) för att öppna sidan Översikt .

  2. Under Hantera väljer du Exponera ett API.

  3. Bredvid Program-ID-URI väljer du länken Ange. Ersätt standardvärdet (GUID) med ett unikt namn (till exempel tasks-api) och välj sedan Spara.

    När ditt webbprogram begär en åtkomsttoken för webb-API:et bör den lägga till den här URI:n som prefix för varje omfång som du definierar för API:et.

  4. Under Omfång som definieras av det här API:et väljer du Lägg till ett omfång.

  5. Så här skapar du ett omfång som definierar läsåtkomst till API:et:

    1. Ange tasks.read som Omfångsnamn.
    2. För Visningsnamn för administratörsmedgivande anger du Läs åtkomst till uppgifters API.
    3. För Beskrivning av administratörsmedgivande anger du Tillåt läsåtkomst till aktivitets-API:et.

  6. Välj Lägg till definitionsområde.

  7. Välj Lägg till ett omfång och lägg sedan till ett omfång som definierar skrivåtkomst till API:et:

    1. Ange tasks.write som Omfångsnamn.
    2. För Visningsnamn för administratörsmedgivande anger du Skrivåtkomst till aktivitets-API.
    3. För Beskrivning av administratörsmedgivande anger du Tillåt skrivåtkomst till aktivitets-API:et.

  8. Välj Lägg till definitionsområde.

Steg 2.3: Registrera skrivbordsappen

Gör följande för att skapa skrivbordsappregistreringen:

  1. Logga in på Azure-portalen.
  2. Välj Appregistreringar och välj sedan Ny registrering.
  3. Under Namn anger du ett namn för programmet (till exempel desktop-app1).
  4. Under Kontotyper som stöds, välj Konton i valfri identitetsleverantör eller organisationskatalog (för autentisering av användare med användarflöden).
  5. Under Omdirigerings-URI väljer du Offentlig klient/intern (skrivbord och skrivbord) och i rutan URL anger du https://your-tenant-name.b2clogin.com/oauth2/nativeclientsedan . Ersätt your-tenant-name med ditt klientnamn. Fler alternativ finns i Konfigurera omdirigerings-URI.
  6. Välj Registrera.
  7. När appregistreringen är klar väljer du Översikt.
  8. Registrera program-ID :t (klient) för senare användning när du konfigurerar skrivbordsprogrammet. Screenshot highlighting the desktop application ID.

Steg 2.4: Bevilja skrivbordsappen behörigheter för webb-API:et

Följ dessa steg för att ge din app (app-ID: 1) behörighet:

  1. Välj Appregistreringar och välj sedan den app som du skapade (app-ID: 1).

  2. Under Hantera väljer du API-behörigheter.

  3. Under Konfigurerade behörigheter väljer du Lägg till en behörighet.

  4. Välj fliken Mina API:er .

  5. Välj det API (app-ID: 2) som webbprogrammet ska beviljas åtkomst till. Ange till exempel my-api1.

  6. Under Behörighet expanderar du aktiviteter och väljer sedan de omfång som du definierade tidigare (till exempel tasks.read och tasks.write).

  7. Välj Lägg till behörigheter.

  8. Välj Bevilja administratörsmedgivande för< ditt klientnamn>.

  9. Välj Ja.

  10. Välj Uppdatera och kontrollera sedan att Beviljad för ... visas under Status för båda omfången.

  11. I listan Konfigurerade behörigheter väljer du ditt omfång och kopierar sedan det fullständiga omfångsnamnet.

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

Steg 3: Konfigurera exempelwebb-API:et

Det här exemplet hämtar en åtkomsttoken med relevanta omfång som skrivbordsappen kan använda för ett webb-API. Om du vill anropa ett webb-API från kod gör du följande:

  1. Använd ett befintligt webb-API eller skapa ett nytt. Mer information finns i Aktivera autentisering i ditt eget webb-API med Azure AD B2C.
  2. När du har konfigurerat webb-API:et kopierar du URI:n för webb-API-slutpunkten. Du kommer att använda webb-API-slutpunkten i nästa steg.

Dricks

Om du inte har något webb-API kan du fortfarande köra det här exemplet. I det här fallet returnerar appen åtkomsttoken men kan inte anropa webb-API:et.

Steg 4: Hämta WPF-skrivbordsappexemplet

  1. Ladda ned .zip-filen eller klona exempelwebbprogrammet från GitHub-lagringsplatsen.

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

  2. Öppna lösningen active-directory-b2c-wpf (filen active-directory-b2c-wpf.sln) i Visual Studio.

Steg 5: Konfigurera exempelskrivbordsappen

Öppna filen App.xaml.cs i projektet active-directory-b2c-wpf. Klassmedlemmarna App.xaml.cs innehåller information om din Azure AD B2C-identitetsprovider. Skrivbordsappen använder den här informationen för att upprätta en förtroenderelation med Azure AD B2C, logga in och ut användare, hämta token och verifiera dem.

Uppdatera följande klassmedlemmar:

Tangent Värde
TenantName Den första delen av ditt Azure AD B2C-klientnamn (till exempel contoso.b2clogin.com).
ClientId Skrivbordsprogrammets ID från steg 2.3.
PolicySignUpSignIn Användarflödet för registrering eller inloggning eller den anpassade princip som du skapade i steg 1.
PolicyEditProfile Användarflödet för redigeringsprofilen eller den anpassade princip som du skapade i steg 1.
ApiEndpoint (Valfritt) Webb-API-slutpunkten som du skapade i steg 3 (till exempel https://contoso.azurewebsites.net/hello).
ApiScopes Webb-API:ets omfång som du skapade i steg 2.4.

Din sista App.xaml.cs-fil bör se ut som följande C#-kod:

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

Steg 6: Kör och testa skrivbordsappen

  1. Återställ NuGet-paketen.

  2. Välj F5 för att skapa och köra exemplet.

  3. Välj Logga in och registrera dig eller logga sedan in med ditt lokala eller sociala Azure AD B2C-konto.

    Screenshot highlighting how to start the sign-in flow.

  4. Efter en lyckad registrering eller inloggning visas tokeninformationen i den nedre rutan i WPF-appen.

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

  5. Välj Anropa API för att anropa webb-API:et.

Nästa steg

Lär dig hur du konfigurerar autentiseringsalternativ i en WPF-skrivbordsapp med hjälp av Azure AD B2C.