Verificatie inschakelen in uw eigen web-app met behulp van Azure AD B2C

In dit artikel wordt beschreven hoe u Azure Active Directory B2C-verificatie (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 voorbeeld-web-app, waarbij u de voorbeeldweb-app vervangt door uw eigen web-app.

Vereisten

Zie Verificatie configureren in een voorbeeldwebtoepassing voor meer informatie over de vereisten en integratie-instructies.

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 de -o mywebapp parameter maakt u een map met de naam mywebapp met de bronbestanden voor de app.

Stap 2: De verificatiebibliotheken toevoegen

Voeg de Microsoft Identity Web-bibliotheek toe. Dit is een set ASP.NET Core bibliotheken die het toevoegen van ondersteuning voor Azure AD B2C-verificatie en autorisatie aan uw web-app vereenvoudigen. De Microsoft Identity Web-bibliotheek 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 Web-bibliotheek 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 middleware-controller met de bijbehorende weergave gestart.

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, worden 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 het bestand /Views/Shared_Layout.cshtml zodat het bestand _LoginPartial.cshtml dat u hebt toegevoegd, wordt opgenomen. 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 kop- en voettekst van de app.

Notitie

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

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

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 die de weergave Claims.cshtml koppelt aan de home-controller . De Claims actie maakt gebruik van het Authorize kenmerk, waardoor 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 instellingen van de B2C-id-provider worden opgeslagen in het bestand appsettings.json. Open appsettings.json en 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-web-app . Gebruik de volgende instellingen:

• Exemplaar: vervang door <your-tenant-name> het eerste deel van uw Azure AD B2C-tenantnaam (bijvoorbeeld https://contoso.b2clogin.com).
• Domein: vervang door <your-b2c-domain> uw Azure AD volledige B2C-tenantnaam (bijvoorbeeld contoso.onmicrosoft.com).
• Client-id: vervang door <web-app-application-id> 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. Maak 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.