Verificatie configureren in een voorbeeldweb-app die een web-API aanroept met behulp van Azure AD B2C

In dit artikel wordt een voorbeeld-ASP.NET-webtoepassing gebruikt die een web-API aanroept om te illustreren hoe u Verificatie van Azure Active Directory B2C (Azure AD B2C) toevoegt aan uw webtoepassingen.

Belangrijk

De voorbeeld-ASP.NET web-app waarnaar in dit artikel wordt verwezen, wordt gebruikt om een web-API aan te roepen met een bearer-token. Zie Verificatie configureren in een voorbeeldwebtoepassing met behulp van Azure AD B2C voor een web-app die geen web-API aanroept.

Overzicht

OpenID Connect (OIDC) is een verificatieprotocol dat is gebaseerd op OAuth 2.0. U kunt OIDC gebruiken om een gebruiker veilig aan te melden bij een toepassing. Dit voorbeeld van een webtoepassing maakt gebruik van Microsoft Identity Web. Microsoft Identity Web is een set ASP.NET Core-bibliotheken waarmee u eenvoudiger verificatie- en autorisatieondersteuning kunt toevoegen aan web-apps die een beveiligde web-API kunnen aanroepen.

De aanmeldingsstroom omvat de volgende stappen:

1. Gebruikers gaan naar de webtoepassing en selecteren Aanmelden.

2. De app initieert een verificatieaanvraag en leidt gebruikers om naar Azure AD B2C.

3. Gebruikers registreren zich of melden zich aan en stellen het wachtwoord opnieuw in. Ze kunnen zich ook aanmelden met een sociaal account.

4. Nadat gebruikers zich hebben aangemeld, retourneert Azure AD B2C een autorisatiecode naar de app.

5. De app doet het volgende:

   a. Hiermee worden de autorisatiecode voor een id-token, toegangstoken en vernieuwingstoken uitgewisseld.
   b. De id-tokenclaims worden gelezen en er wordt een cookie voor toepassingsautorisatie bewaard.
   c. Het vernieuwingstoken wordt 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 web-toepassing kan uw app zich aanmelden met Azure AD B2C. Tijdens de registratie geeft u 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 client-id genoemd, waarmee uw toepassing op unieke wijze wordt aangeduid. U maakt ook een clientgeheim dat door uw app wordt gebruikt om de tokens veilig te verkrijgen.

• Met de registratie van een web-API kan de app een beveiligde web-API aanroepen. De registratie omvat de web-API-bereiken. De bereiken bieden een manier om machtigingen tot beveiligde resources te beheren, zoals uw web-API. U verleent de webtoepassing machtigingen voor de web-API-bereiken. Wanneer een toegangstoken wordt aangevraagd, geeft uw app de gewenste machtigingen op in de parameter Bereik van de aanvraag.

De app-architectuur en -registraties worden geïllustreerd in het volgende diagram:

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.

Afmelden

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 een van de volgende opties wordt uitgevoerd:

Visual Studio

• Visual Studio 2022 17.0 of hoger met de workload ASP.NET en webontwikkeling
• .NET 6.0 SDK

Visual Studio Code

• Visual Studio Code
• C# voor Visual Studio Code (nieuwste versie)
• .NET 6.0 SDK

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: Webtoepassingen registreren

In deze stap maakt u de web-app en de registratie van de web-API-toepassing en geeft u 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.

   

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 Beheren Een 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 Bereiknaam tasks.read in.
   2. Voer voor Weergavenaam beheerderstoestemming Leestoegang tot Tasks-API in.
   3. Voer voor Beschrijving beheerderstoestemming Staat 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 Bereiknaam tasks.write in.
   2. Voer voor Weergavenaam beheerderstoestemming Schrijftoegang tot Tasks-API in.
   3. Voer voor Beschrijving beheerderstoestemming Staat schrijftoegang tot de Tasks-API toe in.

8. Selecteer Bereik toevoegen.

Stap 2.3: De web-app registreren

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

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

2. Voer onder Naam een naam in voor de toepassing (bijvoorbeeld webapp1).

3. Selecteer onder Ondersteunde accounttypen de optie Accounts in een identiteitsprovider of organisatiemap (voor het verifiëren van gebruikers met gebruikersstromen).

4. Selecteer onder Omleidings-URI de optie Web en voer vervolgens in het vak URL https://localhost:5000/signin-oidc in.

5. Schakel onder Machtigingen het selectievakje Beheerdersgoedkeuring verlenen aan machtigingen van OpenID en offline_access in.

6. Selecteer Registreren.

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

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

   

Stap 2.4: Een clientgeheim voor een web-app maken

Maak een clientgeheim voor de geregistreerde webtoepassing. De webtoepassing gebruikt het clientgeheim om de identiteit te bewijzen wanneer er tokens worden aangevraagd.

1. Selecteer onder Beheren de optie Certificaten en geheimen.
2. Selecteer Nieuw clientgeheim.
3. Voer in het vak Beschrijving een beschrijving in voor het clientgeheim (bijvoorbeeld clientsecret1).
4. Selecteer onder Verloopt een duur waarvoor het geheim geldig is en selecteer vervolgens Toevoegen.
5. Noteer de Waarde van het geheim. U gebruikt deze waarde voor configuratie in een latere stap.

Stap 2.5: De web-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 taken 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.

    

Stap 3: Het voorbeeld van de webtoepassing ophalen

Download het zip-bestand of voer de volgende Bash-opdracht uit om de voorbeeldwebtoepassing te klonen vanuit GitHub.

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Pak het voorbeeldbestand uit naar een map waarvoor de totale lengte van het pad 260 of minder tekens is.

Stap 4: De voorbeeld web-API configureren

Open in de voorbeeldmap in de map 4-WebApp-your-API/4-2-B2C/TodoListService het project TodoListService.csproj met Visual Studio of Visual Studio Code.

Open het bestand appsettings.json in de hoofdmap van het project. Het bestand bevat informatie over uw Azure AD B2C-id-provider. De web-API-app gebruikt deze informatie om het toegangstoken te valideren dat de web-app als Bearer-token doorgeeft. Werk de volgende eigenschappen van de app-instellingen bij:

Sectie	Sleutel	Weergegeven als
AzureAdB2C	Exemplaar	Het eerste deel van uw Azure AD B2C-tenantnaam. Bijvoorbeeld: https://contoso.b2clogin.com.
AzureAdB2C	Domain	De volledige tenantnaam van uw Azure AD B2C-tenant. Bijvoorbeeld: contoso.onmicrosoft.com.
AzureAdB2C	ClientId	De web-API-toepassings-id uit stap 2.1.
AzureAdB2C	SignUpSignInPolicyId	De gebruikersstromen of het aangepaste beleid dat u in stap 1 hebt gemaakt.

Het uiteindelijke configuratiebestand moet eruitzien als het volgende JSON-bestand:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Stap 4.1: Het machtigingsbeleid instellen

De web-API controleert of de gebruiker is geverifieerd met het bearer-token en het bearer-token heeft de geconfigureerde geaccepteerde bereiken. Als het Bearer-token geen van deze geaccepteerde bereiken heeft, retourneert de web-API HTTP-statuscode 403 (Verboden) en schrijft deze naar de hoofdtekst van het antwoord, waarin wordt opgegeven welke bereiken in het token worden verwacht.

Als u de geaccepteerde bereiken wilt configureren, opent u de Controller/TodoListController.cs klasse en stelt u de bereiknaam in, zonder de volledige URI.

[RequiredScope("tasks.read")]

Stap 4.2: De voorbeeld-web-API-app uitvoeren

Als u wilt toestaan dat de web-app het web-API-voorbeeld aanroept, voert u de web-API als volgt uit:

1. Als u dit wilt doen, herstelt u afhankelijkheden.
2. Maak het project en voer het uit.
3. Nadat het project is gemaakt, start Visual Studio of Visual Studio Code de web-API in de browsers met het volgende adres: https://localhost:44332.

Stap 5: De voorbeeld web-app configureren

Open in de voorbeeldmap onder de 4-WebApp-your-API/4-2-B2C/Client map het project TodoListClient.csproj met Visual Studio of Visual Studio Code.

Open het bestand onder de hoofdmap van het appsettings.json project. Het bestand bevat informatie over uw Azure AD B2C-id-provider. De web-app gebruikt deze informatie om een vertrouwensrelatie tot stand te brengen met Azure AD B2C, gebruikers aan te melden en af te melden, tokens te verkrijgen en deze te valideren. Werk de volgende eigenschappen van de app-instellingen bij:

Sectie	Sleutel	Weergegeven als
AzureAdB2C	Exemplaar	Het eerste deel van uw Azure AD B2C-tenantnaam (bijvoorbeeld https://contoso.b2clogin.com).
AzureAdB2C	Domain	De volledige tenantnaam van uw Azure AD B2C-tenant (bijvoorbeeld contoso.onmicrosoft.com).
AzureAdB2C	ClientId	De webtoepassings-id uit stap 2.3.
AzureAdB2C	ClientSecret	Het geheim van de webtoepassing uit stap 2.4.
AzureAdB2C	SignUpSignInPolicyId	De gebruikersstromen of het aangepaste beleid dat u in stap 1 hebt gemaakt.
Takenlijst	TodoListScope	De web-API-bereiken die u in stap 2.5 hebt gemaakt.
Takenlijst	TodoListBaseAddress	De basis-URI van uw web-API (bijvoorbeeld https://localhost:44332).

Het definitieve configuratiebestand moet er als de volgende JSON uitzien:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

Stap 6: De voorbeeldweb-app uitvoeren

1. Maak het project en voer het uit.
2. Blader naar https://localhost:5000.
3. Voltooi het aanmeldings- of registratieproces.

Als de verificatie is geslaagd, staat uw weergavenaam in de navigatiebalk. Als u de claims wilt weergeven die door het Azure AD B2C-token naar uw app worden geretourneerd, selecteert u TodoList.

Uw toepassing implementeren

In een productietoepassing is de omleidings-URI voor app-registratie meestal een openbaar toegankelijk eindpunt waarop uw app wordt uitgevoerd, zoals https://contoso.com/signin-oidc.

U kunt op elk gewenst moment omleidings-URI's toevoegen en wijzigen in uw geregistreerde toepassingen. De volgende beperkingen zijn van toepassing op omleidings-URI's:

• De antwoord-URL moet beginnen met het schema https.
• De antwoord-URL is hoofdlettergevoelig. Het hoofdlettergebruik moet overeenkomen met het URL-pad van de actieve toepassing.

Tokencache voor een web-app

In het voorbeeld van de web-app wordt serialisatie van tokens in het geheugen gebruikt. Deze implementatie is geweldig in voorbeelden. Het is ook goed in productietoepassingen, mits u het niet erg vindt als de tokencache verloren gaat wanneer de web-app opnieuw wordt opgestart.

Voor een productieomgeving raden we u aan een gedistribueerde geheugencache te gebruiken. Bijvoorbeeld Redis Cache, NCache of een SQL Server-cache. Zie Serialisatie van tokencache voor meer informatie over de implementaties van gedistribueerde geheugencaches.

Volgende stappen

• Meer informatie over het codevoorbeeld.
• Meer informatie over het inschakelen van verificatie in uw eigen webtoepassing met behulp van Azure AD B2C.
• Meer informatie over het inschakelen van verificatie in uw eigen web-API.