Povolení ověřování ve vlastní webové aplikaci pomocí Azure AD B2C

  • Článek

V tomto článku se dozvíte, jak přidat ověřování Azure Active Directory B2C (Azure AD B2C) do vlastní ASP.NET webové aplikace. Zjistěte, jak vytvořit ASP.NET Core webovou aplikaci pomocí ASP.NET Core middlewaru, který používá protokol OpenID Connect.

Tento článek použijte společně s konfigurací ověřování v ukázkové webové aplikaci a nahrazením ukázkové webové aplikace vlastní webovou aplikací.

Požadavky

Požadavky a pokyny k integraci najdete v tématu Konfigurace ověřování v ukázkové webové aplikaci.

Krok 1: Vytvoření projektu webové aplikace

Můžete použít existující projekt webové aplikace MVC (model-view-controller) ASP.NET nebo vytvořit nový. Pokud chcete vytvořit nový projekt, otevřete příkazové prostředí a zadejte následující příkaz:

dotnet new mvc -o mywebapp

Předchozí příkaz provede následující:

  • Vytvoří novou webovou aplikaci MVC.
  • Parametr -o mywebapp vytvoří adresář mywebapp se zdrojovými soubory aplikace.

Krok 2: Přidání knihoven ověřování

Přidejte webovou knihovnu Microsoft Identity, což je sada ASP.NET Core knihoven, které zjednodušují přidávání podpory ověřování a autorizace Azure AD B2C do webové aplikace. Webová knihovna Microsoft Identity nastaví ověřovací kanál s ověřováním na základě souborů cookie. Zajišťuje odesílání a příjem ověřovacích zpráv HTTP, ověřování tokenů, extrakci deklarací identity a další.

Pokud chcete přidat webovou knihovnu Microsoft Identity, nainstalujte balíčky spuštěním následujících příkazů:

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

Krok 3: Zahájení knihoven ověřování

Middleware Microsoft Identity Web používá spouštěcí třídu, která se spouští při spuštění hostitelského procesu. V tomto kroku přidáte potřebný kód pro inicializaci knihoven ověřování.

Otevřete soubor Startup.cs a na začátek třídy přidejte následující using deklarace:

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

Vzhledem k tomu, že web Microsoft Identity Web používá k ochraně vaší webové aplikace ověřování na základě souborů cookie, nastaví následující kód nastavení souborů cookie SameSite . Pak přečte AzureAdB2C nastavení aplikace a inicializuje kontroler middlewaru s jeho zobrazením.

ConfigureServices(IServiceCollection services) Nahraďte funkci následujícím fragmentem kódu:

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

Následující kód přidá zásadu souborů cookie a použije model ověřování. Configure Nahraďte funkci následujícím fragmentem kódu:

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

Krok 4: Přidání prvků uživatelského rozhraní

Chcete-li přidat prvky uživatelského rozhraní, použijte částečné zobrazení, které obsahuje logiku pro kontrolu, zda jsou uživatelé přihlášení. Pokud uživatelé nejsou přihlášení, vykreslí se tlačítko pro přihlášení částečným zobrazením. Pokud jsou přihlášení, zobrazí se zobrazované jméno a tlačítko pro odhlášení uživatele.

Ve složce /Views/Shared vytvořte nový soubor _LoginPartial.cshtml s následujícím fragmentem kódu:

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

Upravte soubor /Views/Shared_Layout.cshtml tak, aby zahrnoval vámi přidaný soubor _LoginPartial.cshtml . Soubor _Layout.cshtml je běžné rozložení, které uživatelům poskytuje konzistentní prostředí při přechodu ze stránky na stránku. Rozložení obsahuje běžné prvky uživatelského rozhraní, jako je záhlaví a zápatí aplikace.

Poznámka

V závislosti na verzi .NET Core, kterou používáte, a na tom, jestli přidáváte přihlašování do existující aplikace, můžou prvky uživatelského rozhraní vypadat jinak. Pokud ano, nezapomeňte _LoginPartial zahrnout do správného umístění v rámci rozložení stránky.

Otevřete soubor /Views/Shared/_Layout.cshtml a přidejte následující div element.

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

Nahraďte tento element následujícím kódem Razor:

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

Předchozí kód Razor obsahuje odkaz na Claims akci, kterou vytvoříte v dalším kroku.

Krok 5: Přidání zobrazení deklarací identity

Pokud chcete zobrazit deklarace identity tokenu ID, přidejte do složky /Views/Home zobrazení Claims.cshtml .

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

V tomto kroku přidáte Claims akci, která propojí zobrazení Claims.cshtml s kontrolerem Home . Akce Claims používá atribut , Authorize který omezuje přístup k akci na ověřené uživatele.

Do kontroleru /Controllers/HomeController.cs přidejte následující akci:

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

Na začátek třídy přidejte následující using deklaraci:

using Microsoft.AspNetCore.Authorization;

Krok 6: Přidání nastavení aplikace

Azure AD nastavení zprostředkovatele identity B2C se ukládají do souboru appsettings.json. Otevřete soubor appsettings.json a přidejte následující nastavení:

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

Požadované informace jsou popsané v článku Konfigurace ověřování v ukázkové webové aplikaci . Použijte následující nastavení:

  • Instance: Nahraďte <your-tenant-name> první částí názvu tenanta Azure AD B2C (například https://contoso.b2clogin.com).
  • Doména: Nahraďte <your-b2c-domain> úplným názvem tenanta Azure AD B2C (například contoso.onmicrosoft.com).
  • ID klienta: Nahraďte <web-app-application-id> ID aplikace z kroku 2.
  • Název zásady: Nahraďte <your-sign-up-in-policy> toky uživatelů, které jste vytvořili v kroku 1.

Krok 7: Spuštění aplikace

  1. Sestavte a spusťte projekt.
  2. Přejděte na https://localhost:5001.
  3. Vyberte Sign Up/In (Zaregistrovat se/přihlásit).
  4. Dokončete proces registrace nebo přihlášení.

Po úspěšném ověření se na navigačním panelu zobrazí vaše zobrazované jméno. Pokud chcete zobrazit deklarace identity, které Azure AD token B2C vrací do vaší aplikace, vyberte Deklarace identity.

Další kroky