Aktivera autentisering i din egen webbapp med hjälp av Azure AD B2C

  • Artikel

Den här artikeln visar hur du lägger till Azure Active Directory B2C-autentisering (Azure AD B2C) i din egen ASP.NET webbapp. Lär dig hur du skapar en ASP.NET Core webbapp med ASP.NET Core mellanprogram som använder OpenID Connect-protokollet.

Använd den här artikeln tillsammans med Konfigurera autentisering i en exempelwebbapp och ersätt exempelwebbappen med din egen webbapp.

Förutsättningar

Om du vill granska förutsättningarna och integreringsinstruktionerna kan du läsa Konfigurera autentisering i ett exempelwebbprogram.

Steg 1: Skapa ett webbappsprojekt

Du kan använda ett befintligt ASP.NET MVC-webbappsprojekt (model-view-controller) eller skapa ett nytt. Om du vill skapa ett nytt projekt öppnar du ett kommandogränssnitt och anger sedan följande kommando:

dotnet new mvc -o mywebapp

Föregående kommando gör följande:

  • Den skapar en ny MVC-webbapp.
  • Parametern -o mywebapp skapar en katalog med namnet mywebapp med appens källfiler.

Steg 2: Lägg till autentiseringsbiblioteken

Lägg till Webbbiblioteket för Microsoft Identity, som är en uppsättning ASP.NET Core bibliotek som förenklar tillägg av Azure AD B2C-autentisering och auktoriseringsstöd till webbappen. Webbbiblioteket för Microsoft Identity konfigurerar autentiseringspipelinen med cookiebaserad autentisering. Den tar hand om att skicka och ta emot HTTP-autentiseringsmeddelanden, tokenverifiering, extrahering av anspråk med mera.

Om du vill lägga till Webbbiblioteket för Microsoft Identity installerar du paketen genom att köra följande kommandon:

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

Steg 3: Initiera autentiseringsbiblioteken

Microsoft Identity Web-mellanprogrammet använder en startklass som körs när värdprocessen startar. I det här steget lägger du till den kod som krävs för att initiera autentiseringsbiblioteken.

Öppna Startup.cs och lägg sedan till följande using deklarationer i början av klassen:

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

Eftersom Microsoft Identity Web använder cookiebaserad autentisering för att skydda din webbapp anger följande kod cookieinställningarna för SameSite . Den läser AzureAdB2C sedan programinställningarna och initierar mellanprogramkontrollanten med dess vy.

ConfigureServices(IServiceCollection services) Ersätt funktionen med följande kodfragment:

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"));
}

Följande kod lägger till cookie-principen och använder autentiseringsmodellen. Configure Ersätt funktionen med följande kodfragment:

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();
    });
};

Steg 4: Lägg till gränssnittselementen

Om du vill lägga till användargränssnittselement använder du en partiell vy som innehåller logik för att kontrollera om användare är inloggade. Om användarna inte är inloggade renderar den partiella vyn inloggningsknappen. Om användaren är inloggad visas användarens visningsnamn och utloggningsknapp.

Skapa en ny fil , _LoginPartial.cshtml, i mappen /Views/Shared med följande kodfragment:

@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>
}

Ändra filen /Views/Shared_Layout.cshtml så att den innehåller filen _LoginPartial.cshtml som du har lagt till. Filen _Layout.cshtml är en vanlig layout som ger användarna en konsekvent upplevelse när de går från sida till sida. Layouten innehåller vanliga användargränssnittselement, till exempel appens sidhuvud och sidfot.

Anteckning

Beroende på vilken .NET Core-version du kör och om du lägger till inloggning i en befintlig app kan gränssnittselementen se annorlunda ut. I så fall måste du inkludera _LoginPartial på rätt plats i sidlayouten.

Öppna filen /Views/Shared/_Layout.cshtml och lägg sedan till följande div element.

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

Ersätt det här elementet med följande Razor-kod:

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

Föregående Razor-kod innehåller en länk till den Claims åtgärd som du skapar i nästa steg.

Steg 5: Lägg till anspråksvyn

Om du vill visa ID-tokenanspråken lägger du till vyn Claims.cshtml under mappen /Views/Home.

@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>

I det här steget lägger du till åtgärden Claims som länkar vyn Claims.cshtml till startkontrollanten . Åtgärden Claims använder attributet Authorize , vilket begränsar åtkomsten till åtgärden till autentiserade användare.

Lägg till följande åtgärd i kontrollanten /Controllers/HomeController.cs :

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

Lägg till följande using deklaration i början av klassen:

using Microsoft.AspNetCore.Authorization;

Steg 6: Lägg till appinställningarna

Azure AD inställningarna för B2C-identitetsprovider lagras i filen appsettings.json. Öppna appsettings.json och lägg sedan till följande inställningar:

"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>"
}

Nödvändig information beskrivs i artikeln Konfigurera autentisering i en exempelwebbapp . Använd följande inställningar:

  • Instans: Ersätt <your-tenant-name> med den första delen av din Azure AD B2C-klientnamn (till exempel ). https://contoso.b2clogin.com
  • Domän: Ersätt <your-b2c-domain> med ditt fullständiga Azure AD B2C-klientnamn (till exempel contoso.onmicrosoft.com).
  • Klient-ID: Ersätt <web-app-application-id> med program-ID:t från steg 2.
  • Principnamn: Ersätt <your-sign-up-in-policy> med de användarflöden som du skapade i steg 1.

Steg 7: Kör ditt program

  1. Skapa och kör projektet.
  2. Gå till https://localhost:5001.
  3. Välj Registrera dig/in.
  4. Slutför registreringen eller inloggningsprocessen.

När du har autentiserats visas visningsnamnet i navigeringsfältet. Om du vill visa de anspråk som Azure AD B2C-token returnerar till din app väljer du Anspråk.

Nästa steg