Verificatie inschakelen in uw eigen web-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 beschreven hoe u Verificatie van Azure Active Directory B2C (Azure AD B2C) toevoegt aan uw eigen ASP.NET-webtoepassing. Meer informatie over het maken van een ASP.NET Core-webtoepassing met ASP.NET Core-middleware die gebruikmaakt van het OpenID Connect-protocol .

Gebruik dit artikel in combinatie met Verificatie configureren in een voorbeeldweb-app, waarbij u de voorbeeldweb-app vervangt door uw eigen web-app.

Vereiste voorwaarden

Zie Verificatie configureren in een voorbeeldwebtoepassing om de vereisten en integratie-instructies te bekijken.

Stap 1: Een web-app-project maken

U kunt een bestaand ASP.NET MVC-web-app-project (model-view-controller) gebruiken of een nieuw project maken. Als u een nieuw project wilt maken, opent u een opdrachtshell en voert u de volgende opdracht in:

dotnet new mvc -o mywebapp

De voorgaande opdracht doet het volgende:

• Er wordt een nieuwe MVC-web-app gemaakt.
• Met -o mywebapp de parameter maakt u een map met de naam mywebapp met de bronbestanden voor de app.

Stap 2: De verificatiebibliotheken toevoegen

Voeg de Microsoft Identity-webbibliotheek toe. Dit is een set ASP.NET Core-bibliotheken die het toevoegen van Azure AD B2C-verificatie en autorisatieondersteuning voor uw web-app vereenvoudigen. De Microsoft Identity-webbibliotheek stelt de verificatiepijplijn in met verificatie op basis van cookies. Het zorgt voor het verzenden en ontvangen van HTTP-verificatieberichten, tokenvalidatie, claimextractie en meer.

Als u de Microsoft Identity-webbibliotheek wilt toevoegen, installeert u de pakketten door de volgende opdrachten uit te voeren:

Visual Studio

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Visual Studio Code

Install-Package Microsoft.Identity.Web
Install-Package Microsoft.Identity.Web.UI 

Stap 3: De verificatiebibliotheken initiëren

De Microsoft Identity Web-middleware maakt gebruik van een opstartklasse die wordt uitgevoerd wanneer het hostingproces wordt gestart. In deze stap voegt u de benodigde code toe om de verificatiebibliotheken te initiëren.

Open Startup.cs en voeg vervolgens aan het begin van de klasse de volgende using declaraties toe:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

Omdat Microsoft Identity Web gebruikmaakt van verificatie op basis van cookies om uw web-app te beveiligen, worden met de volgende code de cookie-instellingen van SameSite ingesteld. Vervolgens worden de AzureAdB2C toepassingsinstellingen gelezen en wordt de middlewarecontroller gestart met de weergave.

Vervang de ConfigureServices(IServiceCollection services) functie door het volgende codefragment:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

Met de volgende code wordt het cookiebeleid toegevoegd en wordt het verificatiemodel gebruikt. Vervang de Configure functie door het volgende codefragment:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

Stap 4: De elementen van de gebruikersinterface toevoegen

Als u elementen van de gebruikersinterface wilt toevoegen, gebruikt u een gedeeltelijke weergave die logica bevat om te controleren of gebruikers zijn aangemeld. Als gebruikers niet zijn aangemeld, wordt in de gedeeltelijke weergave de aanmeldingsknop weergegeven. Als ze zijn aangemeld, wordt de weergavenaam en afmeldingsknop van de gebruiker weergegeven.

Maak een nieuw bestand , _LoginPartial.cshtml, in de map /Views/Shared met het volgende codefragment:

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

Wijzig uw bestand /Views/Shared_Layout.cshtml om het bestand _LoginPartial.cshtml op te nemen dat u hebt toegevoegd. Het bestand _Layout.cshtml is een algemene indeling die gebruikers een consistente ervaring biedt wanneer ze van pagina naar pagina gaan. De indeling bevat algemene elementen van de gebruikersinterface, zoals de koptekst en voettekst van de app.

Opmerking

Afhankelijk van de .NET Core-versie die u uitvoert en of u aanmelding aan een bestaande app toevoegt, kunnen de elementen van de gebruikersinterface er anders uitzien. Als dit het geval is, moet u _LoginPartial opnemen op de juiste locatie binnen de pagina-indeling.

Open het bestand /Views/Shared/_Layout.cshtml en voeg het volgende div element toe.

<div class="navbar-collapse collapse">
...
</div>

Vervang dit element door de volgende Razor-code:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

De voorgaande Razor-code bevat een koppeling naar de Claims actie die u in de volgende stap gaat maken.

Stap 5: De claimweergave toevoegen

Als u de id-tokenclaims wilt weergeven, voegt u onder de map /Views/Home de weergave Claims.cshtml toe.

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

In deze stap voegt u de Claims actie toe waarmee de weergave Claims.cshtml wordt gekoppeld aan de startcontroller . De Claims actie maakt gebruik van het Authorize kenmerk, waarmee de toegang tot de actie wordt beperkt tot geverifieerde gebruikers.

Voeg in de controller /Controllers/HomeController.cs de volgende actie toe:

[Authorize]
public IActionResult Claims()
{
    return View();
}

Voeg aan het begin van de klasse de volgende using declaratie toe:

using Microsoft.AspNetCore.Authorization;

Stap 6: De app-instellingen toevoegen

Azure AD B2C-id-providerinstellingen worden opgeslagen in het appsettings.json-bestand . Open appsettings.jsonen voeg de volgende instellingen toe:

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

De vereiste informatie wordt beschreven in het artikel Verificatie configureren in een voorbeeld van een web-app . Gebruik de volgende instellingen:

• Exemplaar: Vervang <your-tenant-name> door het eerste deel van uw Azure AD B2C-tenantnaam (bijvoorbeeld https://contoso.b2clogin.com).
• Domein: Vervang deze door <your-b2c-domain> de volledige tenantnaam van uw Azure AD B2C (bijvoorbeeld contoso.onmicrosoft.com).
• Client-id: vervang <web-app-application-id> door de toepassings-id uit stap 2.
• Beleidsnaam: vervang door <your-sign-up-in-policy> de gebruikersstromen die u in stap 1 hebt gemaakt.

Stap 7: Uw toepassing uitvoeren

1. Bouw het project en voer het uit.
2. Ga naar https://localhost:5001.
3. Selecteer Registreren/aanmelden.
4. Voltooi het aanmeldings- of registratieproces.

Nadat u bent geverifieerd, ziet u de weergavenaam in de navigatiebalk. Als u de claims wilt weergeven die het Azure AD B2C-token naar uw app retourneert, selecteert u Claims.

Volgende stappen

• Meer informatie over het aanpassen en verbeteren van de Azure AD B2C-verificatie-ervaring voor uw webtoepassing.