Verificatie configureren in een voorbeeld-WPF-desktop-app met behulp van Azure AD B2C

  • Artikel

In dit artikel wordt een voorbeeld van een WPF-bureaubladtoepassing (Windows Presentation Foundation) gebruikt om te illustreren hoe u Verificatie van Azure Active Directory B2C (Azure AD B2C) toevoegt aan uw bureaublad-apps.

Overzicht

OpenID Verbinding maken (OIDC) is een verificatieprotocol dat is gebouwd op OAuth 2.0. U kunt OIDC gebruiken om gebruikers veilig aan te melden bij een toepassing. In dit voorbeeld van de desktop-app wordt gebruikgemaakt van de MSAL (Microsoft Authentication Library) met de OIDC-autorisatiecode proof key for Code Exchange -stroom (PKCE). De MSAL is een door Microsoft geleverde bibliotheek die het toevoegen van verificatie- en autorisatieondersteuning voor desktop-apps vereenvoudigt.

De aanmeldingsstroom omvat de volgende stappen:

  1. Gebruikers openen de app en selecteren aanmelding.
  2. De app opent de systeembrowser van het bureaubladapparaat en start een verificatieaanvraag voor Azure AD B2C.
  3. Gebruikers registreren of melden zich aan, het wachtwoord opnieuw instellen of zich aanmelden met een sociaal account.
  4. Nadat gebruikers zich hebben aangemeld, retourneert Azure AD B2C een autorisatiecode naar de app.
  5. De app voert de volgende acties uit:
    1. Hiermee worden de autorisatiecode voor een id-token, toegangstoken en vernieuwingstoken uitgewisseld.
    2. Het leest de id-tokenclaims.
    3. De tokens worden opgeslagen in een cache in het geheugen voor later gebruik.

Overzicht van app-registratie

Als u wilt dat de app zich kan aanmelden met Azure AD B2C en een web-API kan aanroepen, registreert u twee toepassingen in de Azure AD B2C-directory.

  • Met de registratie van de bureaubladtoepassing kan uw app zich aanmelden met Azure AD B2C. Geef tijdens de app-registratie de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar gebruikers worden omgeleid door Azure AD B2C nadat ze zich met Azure AD B2C hebben geverifieerd. Het app-registratieproces genereert een toepassings-id, ook wel de client-id genoemd, waarmee uw bureaublad-app uniek wordt geïdentificeerd (bijvoorbeeld app-id: 1).

  • Met de registratie van een web-API kan de app een beveiligde web-API aanroepen. De registratie maakt de web-API-machtigingen (bereiken) beschikbaar. Het app-registratieproces genereert een toepassings-id, waarmee uw web-API op unieke wijze wordt aangeduid (bijvoorbeeld app-id: 2). Uw bureaublad-app (app-id: 1) machtigingen verlenen aan de web-API-bereiken (app-id: 2).

De registratie en architectuur van de toepassing worden geïllustreerd in de volgende diagrammen:

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

Aanroepen naar een web-API

Nadat de verificatie is voltooid, communiceren gebruikers met de app, die een beveiligde web-API aanroept. De web-API maakt gebruik van verificatie via een Bearer-token. Het Bearer-token is het toegangstoken dat de app van Azure AD B2C heeft gekregen. De app geeft het token door in de autorisatieheader van de HTTPS-aanvraag.

Authorization: Bearer <access token>

Als het bereik van het toegangstoken niet overeenkomt met de bereiken van de web-API, verkrijgt de verificatiebibliotheek een nieuw toegangstoken met de juiste bereiken.

De afmeldingsstroom

De afmeldingsstroom omvat de volgende stappen:

  1. Gebruikers melden zich af vanuit de app.
  2. De app wist de sessieobjecten en de verificatiebibliotheek wist de tokencache.
  3. De app brengt gebruikers naar het afmeldingseindpunt van Azure AD B2C om de Azure AD B2C-sessie te beëindigen.
  4. Gebruikers worden teruggeleid naar de app.

Vereisten

Een computer waarop Visual Studio 2019 wordt uitgevoerd met .NET-desktopontwikkeling.

Stap 1: Uw gebruikersstroom configureren

Wanneer gebruikers zich proberen aan te melden bij uw app, start de app een verificatieaanvraag naar het autorisatie-eindpunt via een gebruikersstroom. De gebruikersstroom definieert en bepaalt de gebruikerservaring. Nadat gebruikers de gebruikersstroom hebben voltooid, genereert Azure AD B2C een token en leidt het gebruikers vervolgens terug naar de toepassing.

Maak een gebruikersstroom of een aangepast beleid als u dit nog niet hebt gedaan. Herhaal de stappen om de volgende drie afzonderlijke gebruikersstromen te maken:

  • Een gecombineerde gebruikersstroom voor aanmelden en registreren, zoals susi. Deze gebruikersstroom ondersteunt ook de ervaring Wachtwoord vergeten.
  • Een gebruikersstroom voor profielbewerking, zoals edit_profile.
  • Een gebruikersstroom voor Wachtwoord opnieuw instellen, zoals reset_password.

Azure AD B2C voegt B2C_1_ vóór de naam van de gebruikersstroom toe. Zo wordt susi gewijzigd in B2C_1_susi.

Stap 2: Uw toepassingen registreren

Maak de bureaublad-app en de registratie van de web-API-toepassing en geef de bereiken van uw web-API op.

Stap 2.1: Web-API-app registreren

Voer de volgende stappen uit om de web-API-app (app-id: 2) te registreren:

  1. Meld u aan bij de Azure-portal.

  2. Zorg ervoor dat u de map gebruikt die uw Azure AD B2C-tenant bevat. Selecteer op de portalwerkbalk het pictogram Mappen + abonnementen.

  3. Ga op de pagina Portalinstellingen | Directory's en abonnementen naar uw Azure AD B2C-directory in de lijst Mapnaam en selecteer vervolgens Omzetten.

  4. Zoek en selecteer Azure AD B2C in de Azure-portal.

  5. Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.

  6. Voer bij Naam een naam in voor de toepassing (bijvoorbeeld my-api1). Laat de standaardwaarden voor omleidings-URI en ondersteunde accounttypen staan.

  7. Selecteer Registreren.

  8. Nadat de app-registratie is voltooid, selecteert u Overzicht.

  9. Noteer voor later gebruik de waarde van de toepassings-id (client) wanneer u de webtoepassing configureert.

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

Stap 2.2: Bereiken van een web-API-app configureren

  1. Selecteer de my-api1-toepassing die u hebt gemaakt (app-id: 2) om de overzichtspagina te openen.

  2. Selecteer onder BeherenEen API beschikbaar maken.

  3. Selecteer naast URI voor de toepassings-id de link Instellen. Vervang de standaardwaarde (GUID) door een unieke naam (bijvoorbeeld tasks-api) en selecteer Opslaan.

    Wanneer uw webtoepassing een toegangstoken voor de web-API aanvraagt, moet deze URI als voorvoegsel worden toegevoegd voor elk bereik dat u voor de API definieert.

  4. Onder Bereiken die door deze API worden bepaald selecteert u Een bereik toevoegen.

  5. Een bereik maken dat de leestoegang tot de API definieert:

    1. Voer voor Bereiknaamtasks.read in.
    2. Voer voor Weergavenaam beheerderstoestemmingLeestoegang tot Tasks-API in.
    3. Voer voor Beschrijving beheerderstoestemmingStaat leestoegang toegang tot de Tasks-API toe in.

  6. Selecteer Bereik toevoegen.

  7. Selecteer Bereik toevoegen en voeg vervolgens een bereik toe dat de schrijftoegang tot de API definieert:

    1. Voer voor Bereiknaamtasks.write in.
    2. Voer voor Weergavenaam beheerderstoestemmingSchrijftoegang tot Tasks-API in.
    3. Voer voor Beschrijving beheerderstoestemmingStaat schrijftoegang tot de Tasks-API toe in.

  8. Selecteer Bereik toevoegen.

Stap 2.3: De bureaublad-app registreren

Ga als volgt te werk om de registratie van de bureaublad-app te maken:

  1. Meld u aan bij de Azure-portal.
  2. Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.
  3. Voer onder Naam een naam in voor de toepassing (bijvoorbeeld desktop-app1).
  4. Selecteer onder Ondersteunde accounttypen de optie Accounts in een identiteitsprovider of organisatiemap (voor het verifiëren van gebruikers met gebruikersstromen).
  5. Selecteer onder Omleidings-URI de optie Openbare client/systeemeigen (desktop en desktop) en voer vervolgens in het VAK URL de tekst https://your-tenant-name.b2clogin.com/oauth2/nativeclientin. Vervang door your-tenant-name de naam van uw tenant. Zie Omleidings-URI configureren voor meer opties.
  6. Selecteer Registreren.
  7. Nadat de app-registratie is voltooid, selecteert u Overzicht.
  8. Noteer de toepassings-id (client) voor later gebruik wanneer u de bureaubladtoepassing configureert. Screenshot highlighting the desktop application ID.

Stap 2.4: De bureaublad-app machtigingen verlenen voor de web-API

Voer de volgende stappen uit om uw app (app-id: 1) machtigingen te verlenen:

  1. Selecteer App-registraties en selecteer vervolgens de app die u hebt gemaakt (App-id: 1).

  2. Selecteer onder Beheren de optie API-machtigingen.

  3. Selecteer onder Geconfigureerde machtigingen de optie Een machtiging toevoegen.

  4. Selecteer het tabblad Mijn API's.

  5. Selecteer de API (App-id: 2) waarvoor aan de webclienttoepassing toegang moet worden verleend. Voer bijvoorbeeld my-api1 in.

  6. Vouw onder Machtigingtaken uit en selecteer vervolgens de bereiken die u eerder hebt gedefinieerd (bijvoorbeeld tasks.read en tasks.write).

  7. Selecteer Machtigingen toevoegen.

  8. Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam>.

  9. Selecteer Ja.

  10. Selecteer Vernieuwen en controleer vervolgens of voor beide bereiken Verleend voor... wordt weergegeven onder Status.

  11. Selecteer uw bereik in de lijst geconfigureerde machtigingen en kopieer vervolgens de volledige naam van het bereik.

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

Stap 3: De voorbeeld web-API configureren

Dit voorbeeld verkrijgt een toegangstoken met de relevante bereiken die de bureaublad-app kan gebruiken voor een web-API. Ga als volgt te werk om een web-API aan te roepen vanuit code:

  1. Gebruik een bestaande web-API of maak een nieuwe. Zie Verificatie inschakelen in uw eigen web-API met behulp van Azure AD B2C voor meer informatie.
  2. Nadat u de web-API hebt geconfigureerd, kopieert u de URI van het web-API-eindpunt. In de volgende stappen gebruikt u het web-API-eindpunt.

Tip

Als u geen web-API hebt, kunt u dit voorbeeld nog steeds uitvoeren. In dit geval retourneert de app het toegangstoken, maar kan de web-API niet worden aangeroepen.

Stap 4: Het voorbeeld van de WPF-desktop-app ophalen

  1. Download het ZIP-bestand of kloon de voorbeeldwebtoepassing uit de GitHub-opslagplaats.

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

  2. Open de oplossing active-directory-b2c-wpf (het bestand active-directory-b2c-wpf.sln ) in Visual Studio.

Stap 5: De voorbeeld-bureaublad-app configureren

Open in het project active-directory-b2c-wpf het bestand App.xaml.cs . Het bestand App.xaml.cs klasseleden bevat informatie over uw Azure AD B2C-id-provider. De bureaublad-app gebruikt deze informatie om een vertrouwensrelatie tot stand te brengen met Azure AD B2C, gebruikers aan te melden en uit te schakelen, tokens te verkrijgen en te valideren.

Werk de volgende klasseleden bij:

Sleutel Weergegeven als
TenantName Het eerste deel van uw Azure AD B2C-tenantnaam (bijvoorbeeld contoso.b2clogin.com).
ClientId De bureaubladtoepassings-id van stap 2.3.
PolicySignUpSignIn De gebruikersstroom voor registreren of aanmelden of aangepast beleid dat u in stap 1 hebt gemaakt.
PolicyEditProfile De gebruikersstroom van het profiel bewerken of aangepast beleid dat u in stap 1 hebt gemaakt.
ApiEndpoint (Optioneel) Het web-API-eindpunt dat u in stap 3 hebt gemaakt (bijvoorbeeld https://contoso.azurewebsites.net/hello).
ApiScopes De web-API-bereiken die u in stap 2.4 hebt gemaakt.

Het uiteindelijke bestand App.xaml.cs moet eruitzien als de volgende C#-code:

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

Stap 6: de bureaublad-app uitvoeren en testen

  1. Herstel de NuGet-pakketten.

  2. Selecteer F5 om het voorbeeld te bouwen en uit te voeren.

  3. Selecteer Aanmelden en registreer u of meld u vervolgens aan met uw lokaal of sociale account van Azure AD B2C.

    Screenshot highlighting how to start the sign-in flow.

  4. Na een geslaagde registratie of aanmelding worden de tokendetails weergegeven in het onderste deelvenster van de WPF-app.

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

  5. Selecteer Api aanroepen om uw web-API aan te roepen.

Volgende stappen

Meer informatie over het configureren van verificatieopties in een WPF-desktop-app met behulp van Azure AD B2C.