Quickstart: Aanmelding instellen voor een ASP.NET-toepassing met Azure Active Directory B2C

Azure Active Directory B2C (Azure AD B2C) bevat functionaliteit voor identiteitsbeheer in de cloud ter bescherming van uw toepassing, bedrijf en klanten. Met Azure AD B2C kunnen uw toepassingen zich met behulp van open-standaardprotocollen te verifiëren bij sociale en enterpriseaccounts.

In deze snelstart gebruikt u een ASP.NET-toepassing. Deze toepassing wordt gebruikt voor het aanmelden via een id-provider voor sociale netwerken en voor het aanroepen van een met Azure AD B2C beveiligde web-API.

Vereisten

  • Visual Studio 2019 met de ASP.NET- en webontwikkelworkload.

  • Een sociaal account van Facebook, Google of Microsoft.

  • Download een ZIP-bestand of kloon de voorbeeld-web-app vanuit GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git
    

    Er bevinden zich twee projecten in de voorbeeldoplossing:

    • TaskWebApp: een webtoepassing die een takenlijst maakt en bewerkt. De webtoepassing gebruikt de gebruikersstroom voor registratie of aanmelding om gebruikers te registreren of aan te melden.
    • TaskService: een web-API die ondersteuning biedt voor functionaliteit voor het maken, lezen, bijwerken en verwijderen van takenlijsten. De web-API wordt beveiligd door Azure AD B2C en wordt aangeroepen door de web-app.

De toepassing uitvoeren in Visual Studio

  1. In de projectmap van de voorbeeldtoepassing opent u de oplossing B2C-WebAPI-DotNet.sln in Visual Studio.

  2. Voor deze snelstart voert u de projecten TaskWebApp en TaskService tegelijk uit. Klik in Solution Explorer met de rechtermuisknop op de oplossing B2C-WebAPI-DotNet en selecteer vervolgens Opstartprojecten instellen.

  3. Selecteer Meerdere opstartprojecten en wijzig de Actie voor beide projecten in Start.

  4. Selecteer OK.

  5. Druk op F5 om fouten in beide toepassingen op te sporen. Elke toepassing wordt geopend op een eigen browsertabblad:

    • https://localhost:44316/: de ASP.NET-webtoepassing. U communiceert rechtstreeks met deze toepassing in de snelstart.
    • https://localhost:44332/: de web-API die wordt aangeroepen door de ASP.NET-webtoepassing.

Aanmelden met uw account

  1. Selecteer Registreren/aanmelden in de ASP.NET webtoepassing om de werkstroom te starten.

    Voorbeeld-ASP.NET-web-app in een browser met de gemarkeerde koppeling Registreren/Aanmelden

    In de voorbeeldtoepassing worden verschillende registratiemogelijkheden ondersteund. U kunt bijvoorbeeld een provider voor sociale identiteit gebruiken of een lokale account maken met behulp van een e-mailadres. Voor deze quickstart gebruikt u een account van een id-provider voor sociale netwerken (Facebook, Google of Microsoft).

  2. Azure AD B2C opent een aanmeldingspagina voor een fictief bedrijf genaamd Fabrikam voor het voorbeeld van de webtoepassing. Selecteer de knop van de id-provider voor sociale netwerken die u wilt gebruiken om u aan te melden via een id-provider voor sociale netwerken.

    De pagina Aanmelden of Registreren met de knoppen van de id-provider

    U moet zich verifiëren (aanmelden) met behulp van de referenties van uw sociaalnetwerkaccount en de toepassing autoriseren om informatie uit uw sociaalnetwerkaccount te lezen. Door toegang te verlenen, kan de toepassing profielgegevens van het sociaalnetwerkaccount ophalen, zoals uw naam en plaats.

  3. Voltooi het aanmeldingsproces voor de id-provider.

Het profiel bewerken

Azure Active Directory B2C biedt functionaliteit waarmee gebruikers hun profielen kunnen bijwerken. In de voorbeeldweb-app wordt een Azure AD B2C-gebruikersstroom voor profielbewerking gebruikt voor de werkstroom.

  1. Selecteer in de menubalk van de toepassing de naam van uw profiel en selecteer vervolgens Profiel bewerken om het profiel te bewerken dat u hebt gemaakt.

    Voorbeeld-web-app in een browser met de gemarkeerde koppeling Profiel bewerken

  2. Wijzig uw Weergavenaam of Plaats en selecteer vervolgens Doorgaan om uw profiel bij te werken.

    De wijziging wordt weergegeven in de rechterbovenhoek van de startpagina van de webtoepassing.

Toegang tot een beveiligde API-resource

  1. Selecteer To-Do lijst om uw lijstitems voor uw werklijst in te voeren en te wijzigen.

  2. Voer tekst in het tekstvak Nieuw item in. Als u de Azure AD B2C web-API wilt aanroepen die een lijstitem toevoegt, selecteert u Toevoegen.

    Voorbeeld-web-app in een browser met Een takenlijstitem toevoegen

    De ASP.NET-webtoepassing bevat een Azure AD-toegangstoken in de aanvraag voor de beveiligde web-API-resource, waarmee bewerkingen op de takenlijstitems van de gebruiker kunnen worden uitgevoerd.

U hebt uw Azure AD B2C-gebruikersaccount gebruikt voor het geautoriseerd aanroepen van een web-API die met Azure AD B2C is beveiligd.

Volgende stappen

Een Azure Active Directory B2C-tenant maken in Azure Portal