Delen via

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

Belangrijk

Vanaf 1 mei 2025 is Azure AD B2C niet meer beschikbaar voor nieuwe klanten. Meer informatie vindt u in onze veelgestelde vragen.

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 Connect (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 aanmelden.
  2. De app opent de systeembrowser van het bureaubladapparaat en start een verificatieaanvraag voor Azure AD B2C.
  3. Gebruikers registreren of zich aanmelden, 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. De autorisatiecode wordt uitgewisseld naar een id-token, toegangstoken en vernieuwingstoken.
    2. De id-tokenclaims worden gelezen.
    3. De tokens worden opgeslagen in een cache in het geheugen voor later gebruik.

Overzicht van app-registratie

Als u wilt dat uw app zich aanmeldt met Azure AD B2C en een web-API aanroept, 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 zijn geverifieerd met Azure AD B2C. 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 web-API-registratie kan uw app een beveiligde web-API aanroepen. De registratie toont de web-API-machtigingen (bereiken). Het app-registratieproces genereert een toepassings-id, die uw web-API uniek identificeert (bijvoorbeeld app-id: 2). Uw bureaublad-app (app-id: 1) machtigingen verlenen aan de web-API-bereiken (app-id: 2).

De toepassingsregistratie en -architectuur worden geïllustreerd in de volgende diagrammen:

Diagram van de bureaublad-app met web-API, registraties en 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.

Het afmeldproces

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 token-cache.
  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.

Vereiste voorwaarden

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_ aan de naam van de gebruikersstroom toe. susi wordt bijvoorbeeld 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: De web-API-app registreren

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

  1. Meld u aan bij het Azure-portaal.

  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 Directorynaam en selecteer vervolgens Wisselen.

  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.

    Schermopname waarin wordt getoond hoe u een web-API-toepassings-id kunt krijgen.

Stap 2.2: Web-API-app-scopes 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. Selecteer onder bereiken die zijn gedefinieerd door deze APIde optie 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 de Tasks-API in.
    3. Voer voor Beschrijving beheerderstoestemmingStaat leestoegang tot de taken-API toe in.

  6. Selecteer Voeg bereik toe.

  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 van de beheerderstoestemming de schrijftoegang tot de Tasks-API in.
    3. Voer bij Beschrijving beheerderstoestemming in: geeft schrijftoegang tot de taken-API.

  8. Selecteer Voeg bereik toe.

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 het Azure-portaal.
  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 accounttypenAccounts in een id-provider of organisatiemap (voor verificatie van gebruikers met gebruikersstromen).
  5. Selecteer onder Omleidings-URIde 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. Schermopname met de bureaubladtoepassings-id gemarkeerd.

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 Machtiging de sectie Taken uit en selecteer vervolgens de scopes 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. Klik op Vernieuwen en controleer vervolgens of Verleend voor... wordt weergegeven onder Status voor beide toepassingsgebieden.

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

    Schermopname van het geconfigureerde venster met machtigingen, waarop te zien is dat toegangsmachtigingen zijn verleend.

Stap 3: De voorbeeldweb-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 eindpunt van de web-API.

Aanbeveling

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 . De App.xaml.cs klasseleden bevatten 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:

Sleutelcode Waarde
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 App.xaml.cs-bestand 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 meld u vervolgens aan met uw lokale of sociale account van Azure AD B2C.

    Schermopname waarin wordt uitgelegd hoe u de aanmeldingsstroom start.

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

    Schermopname met het Azure AD B2C-toegangstoken en de gebruikers-id gemarkeerd.

  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.