Share via

Hitelesítés engedélyezése a saját webalkalmazásban Azure AD B2C használatával

  • Cikk

Ez a cikk bemutatja, hogyan adhat hozzá Azure Active Directory B2C-hitelesítést (Azure AD B2C-hitelesítést saját ASP.NET webalkalmazásához. Megtudhatja, hogyan hozhat létre ASP.NET Core webalkalmazást ASP.NET Core OpenID Connect protokollt használó köztes szoftverrel.

Használja ezt a cikket a Hitelesítés konfigurálása minta webalkalmazásban című témakörben, és cserélje le a minta webalkalmazást a saját webalkalmazására.

Előfeltételek

Az előfeltételek és az integrációs utasítások áttekintéséhez lásd: Hitelesítés konfigurálása minta webalkalmazásban.

1. lépés: Webalkalmazás-projekt létrehozása

Használhat egy meglévő ASP.NET modellnézet-vezérlő (MVC) webalkalmazás-projektet, vagy létrehozhat egy újat. Új projekt létrehozásához nyisson meg egy parancshéjat, majd írja be a következő parancsot:

dotnet new mvc -o mywebapp

Az előző parancs a következőket hajtja végre:

  • Létrehoz egy új MVC-webalkalmazást.
  • A -o mywebapp paraméter létrehoz egy mywebapp nevű könyvtárat az alkalmazás forrásfájljaival.

2. lépés: A hitelesítési kódtárak hozzáadása

Adja hozzá a Microsoft Identity webtárat, amely ASP.NET Core kódtárak készlete, amely leegyszerűsíti Azure AD B2C-hitelesítés és -engedélyezés támogatását a webalkalmazáshoz. A Microsoft Identity webtár cookie-alapú hitelesítéssel állítja be a hitelesítési folyamatot. Gondoskodik a HTTP-hitelesítési üzenetek küldéséről és fogadásáról, a jogkivonatok érvényesítéséről, a jogcímek kinyeréséről és egyebekről.

A Microsoft Identity Web Library hozzáadásához telepítse a csomagokat az alábbi parancsok futtatásával:

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

3. lépés: Hitelesítési kódtárak kezdeményezése

A Microsoft Identity Web köztes szoftver egy indítási osztályt használ, amely az üzemeltetési folyamat indításakor fut. Ebben a lépésben hozzáadja a hitelesítési kódtárak elindításához szükséges kódot.

Nyissa meg a Startup.cs fájlt, majd az osztály elején adja hozzá a következő using deklarációkat:

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

Mivel a Microsoft Identity Web cookie-alapú hitelesítést használ a webalkalmazás védelméhez, az alábbi kód a SameSite cookie-beállításokat állítja be. Ezután beolvassa az AzureAdB2C alkalmazásbeállításokat, és elindítja a köztes szoftvervezérlőt a nézetével.

Cserélje le a függvényt ConfigureServices(IServiceCollection services) a következő kódrészletre:

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

Az alábbi kód hozzáadja a cookie-szabályzatot, és a hitelesítési modellt használja. Cserélje le a függvényt Configure a következő kódrészletre:

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

4. lépés: A felhasználói felület elemeinek hozzáadása

Felhasználói felület elemeinek hozzáadásához használjon részleges nézetet, amely logikát tartalmaz annak ellenőrzéséhez, hogy a felhasználók bejelentkezve vannak-e. Ha a felhasználók nincsenek bejelentkezve, a részleges nézet megjeleníti a bejelentkezési gombot. Ha be vannak jelentkezve, az megjeleníti a felhasználó megjelenítendő nevét és a kijelentkezés gombot.

Hozzon létre egy új fájlt a _LoginPartial.cshtml fájlban a /Views/Shared mappában a következő kódrészlettel:

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

Módosítsa a /Views/Shared_Layout.cshtml fájlt úgy, hogy tartalmazza a hozzáadott _LoginPartial.cshtml fájlt. A _Layout.cshtml fájl egy gyakori elrendezés, amely egységes felületet biztosít a felhasználóknak, miközben lapról lapra haladnak. Az elrendezés tartalmazza a felhasználói felület gyakori elemeit, például az alkalmazás élőfejét és élőlábát.

Megjegyzés

A futó .NET Core-verziótól és attól függően, hogy egy meglévő alkalmazáshoz ad-e be bejelentkezést, a felhasználói felület elemei eltérőek lehetnek. Ha igen, ügyeljen arra, hogy _LoginPartial szerepeljen a lapelrendezés megfelelő helyén.

Nyissa meg a /Views/Shared/_Layout.cshtml fájlt, majd adja hozzá a következő div elemet.

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

Cserélje le ezt az elemet a következő Razor-kódra:

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

Az előző Razor-kód tartalmaz egy hivatkozást a Claims következő lépésben létrehozandó műveletre.

5. lépés: A jogcímnézet hozzáadása

Az azonosítójogkivonat-jogcímek megtekintéséhez a /Views/Home mappában adja hozzá a Claims.cshtml nézetet .

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

Ebben a lépésben hozzáadja azt a Claims műveletet, amely a Claims.cshtml nézetet a Kezdőlap vezérlőhöz kapcsolja. A Claims művelet az Authorize attribútumot használja, amely a hitelesített felhasználók számára korlátozza a művelethez való hozzáférést.

A /Controllers/HomeController.cs vezérlőben adja hozzá a következő műveletet:

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

Az osztály elején adja hozzá a következő using deklarációt:

using Microsoft.AspNetCore.Authorization;

6. lépés: Az alkalmazásbeállítások hozzáadása

Azure AD B2C identitásszolgáltató beállításai az appsettings.json fájlban vannak tárolva. Nyissa meg az appsettings.json fájlt, majd adja hozzá a következő beállításokat:

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

A szükséges információkat a Hitelesítés konfigurálása egy minta webalkalmazásban című cikk ismerteti. Használja a következő beállításokat:

  • Példány: Cserélje le a elemet <your-tenant-name> a Azure AD B2C-bérlő nevének első részére (például https://contoso.b2clogin.com).
  • Tartomány: Cserélje le a elemet <your-b2c-domain> a Azure AD B2C teljes bérlőnevére (például contoso.onmicrosoft.com).
  • Ügyfélazonosító: Cserélje le <web-app-application-id> a 2. lépésben szereplő alkalmazásazonosítóra.
  • Szabályzat neve: Cserélje le a elemet <your-sign-up-in-policy> az 1. lépésben létrehozott felhasználói folyamatokra.

7. lépés: Az alkalmazás futtatása

  1. Hozza létre és futtassa a projektet.
  2. Nyissa meg a következőt: https://localhost:5001.
  3. Válassza a Regisztráció/Bejelentkezés lehetőséget.
  4. Fejezze be a regisztrációt vagy a bejelentkezési folyamatot.

A sikeres hitelesítés után megjelenik a megjelenítendő név a navigációs sávon. Ha meg szeretné tekinteni azokat a jogcímeket, amelyeket a Azure AD B2C-jogkivonat visszatér az alkalmazáshoz, válassza a Jogcímek lehetőséget.

Következő lépések