Share via


Verificatie configureren in een voorbeeld-webtoepassing met behulp van Azure AD B2C

In dit artikel wordt een voorbeeld van een ASP.NET-webtoepassing gebruikt om te laten zien hoe u verificatie van Azure Active Directory B2C (Azure AD B2C) aan uw webtoepassingen kunt toevoegen.

Belangrijk

De voorbeeld-ASP.NET-webtoepassing waarnaar in dit artikel wordt verwezen, kan niet worden gebruikt om een REST API aan te roepen, omdat deze een id-token in plaats van een toegangstoken retourneert. Zie Een web-API die is gebouwd met ASP.NET Core beveiligen met behulp van Azure AD B2C voor een webtoepassing die een REST API kan aanroepen.

Overzicht

OpenID Connect (OIDC) is een verificatieprotocol dat is gebaseerd op OAuth 2.0. U kunt OIDC gebruiken om gebruikers 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 die het toevoegen van verificatie- en autorisatieondersteuning aan webtoepassingen vereenvoudigen.

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 id-token naar de app.
  5. De app valideert het id-token, leest de claims en retourneert een beveiligde pagina aan gebruikers.

Wanneer het id-token is verlopen of de app-sessie ongeldig is, initieert de app een nieuwe verificatieaanvraag en worden gebruikers omgeleid naar Azure AD B2C. Als de sessie met eenmalige aanmelding van Azure AD B2C actief is, geeft Azure AD B2C een toegangstoken af zonder dat gebruikers zich opnieuw hoeven aan te melden. Als de Azure AD B2C-sessie verloopt of ongeldig wordt, worden gebruikers gevraagd zich opnieuw aan te melden.

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 programma's 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_ vóór de naam van de gebruikersstroom toe. Zo wordt susi gewijzigd in B2C_1_susi.

Stap 2: Een webtoepassing registreren

Als u wilt dat uw toepassing zich kan aanmelden met Azure AD B2C, registreert u uw toepassing in de Azure AD B2C-map. Door uw toepassing te registreren, wordt een vertrouwensrelatie tot stand gebracht tussen de toepassing en Azure AD B2C.

Tijdens de toepassingsregistratie geeft u de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar gebruikers worden geleid door Azure AD B2C nadat ze zich bij Azure AD B2C hebben geverifieerd. Het toepassingsregistratieproces genereert een toepassings-id, ook wel client-id genoemd, waarmee uw toepassing op unieke wijze wordt aangeduid. Nadat uw toepassing is geregistreerd, gebruikt Azure AD B2C zowel de toepassings-id als de omleidings-URI om verificatieaanvragen te maken.

Voer de volgende stappen uit om de registratie van de web-app uit te voeren:

  1. Meld u aan bij het Azure-portaal.

  2. Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Azure AD B2C-tenant in het menu Mappen en abonnementen.

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

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

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

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

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

  8. Schakel onder Beheren het selectievakje Verificatie in, ga naar Impliciete toekenning en hybride stromen, schakel het selectievakje ID-tokens in (gebruikt voor impliciete en hybride stromen).

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

  10. Selecteer Registreren.

  11. Selecteer Overzicht.

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

    Schermopname van de overzichtspagina van de webtoepassing voor het vastleggen van uw webtoepassings-id.

Stap 3: Het voorbeeld van de webtoepassing ophalen

Download het ZIP-bestand of kloon de voorbeeldwebtoepassing 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 voorbeeldwebtoepassing configureren

Open in de voorbeeldmap onder de map 1-WebApp-OIDC/1-5-B2C/ het project WebApp-OpenIDConnect-DotNet.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. 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 id van de webtoepassing (client) uit stap 2.
AzureAdB2C SignUpSignInPolicyId De gebruikersstromen of het aangepaste beleid dat u in stap 1 hebt gemaakt.

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>",
  "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Stap 5:De voorbeeld-webtoepassing uitvoeren

  1. Maak het project en voer het uit.

  2. Ga naar https://localhost:44316.

  3. Selecteer Registreren/aanmelden.

    Schermopname van de knop voor aanmelden en registreren op de welkomstpagina van het project.

  4. Voltooi het aanmeldings- of registratieproces.

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

Schermopname van de claims van de webtoepassingstoken.

Uw toepassing implementeren

In een productietoepassing is de omleidings-URI voor app-registratie gewoonlijk 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.

Volgende stappen