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.

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 web-app 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:

   een. De autorisatiecode wordt uitgewisseld naar een id-token, toegangstoken en vernieuwingstoken.
   b. De id-tokenclaims worden gelezen en er wordt een cookie voor toepassingsautorisatie bewaard.
   Hoofdstuk 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 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 een van de volgende opties wordt uitgevoerd:

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: 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: 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.

   

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 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 accounttypenAccounts in een id-provider of organisatiemap (voor verificatie 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 tokens worden aangevraagd.

1. Selecteer onder Beheren de optie Certificaten en geheimen.
2. Selecteer nieuwe clientsleutel.
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 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.

    

Stap 3: Het voorbeeld van de web-app 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 waarin de totale lengte van het pad 260 of minder tekens is.

Stap 4: De voorbeeldweb-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. Dit 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:

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. Bouw 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 voorbeeldweb-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. Dit 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 te valideren. Werk de volgende eigenschappen van de app-instellingen bij:

Het uiteindelijke configuratiebestand moet eruitzien als de volgende JSON:

{
  "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. Bouw het project en voer het uit.
2. Navigeer naar https://localhost:5000.
3. Voltooi het aanmeldings- of registratieproces.

Na een geslaagde verificatie ziet u 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.