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

Fontos

2025. május 1-jére az Azure AD B2C már nem lesz elérhető az új ügyfelek számára. További információ a GYIK-ben.

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

Ezt a cikket a hitelesítés konfigurálása egy minta webalkalmazásban való konfigurálásához használja, é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, amelyek leegyszerűsítik az Azure AD B2C-hitelesítés és -engedélyezés támogatását a webalkalmazáshoz. A Microsoft Identity Web Library 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:

Visual Studio
Visual Studio Code

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

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

3. lépés: A 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 felolvassa az AzureAdB2C alkalmazás beállításait, és a nézetével elindítja a köztes szoftvervezérlőt.

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 egy 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, megjelenik a felhasználó megjelenítendő neve és kijelentkezés gombja.

Hozzon létre egy új fájlt ( _LoginPartial.cshtml) 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 felhasználói élményt nyújt a felhasználóknak lapról lapra haladva. Az elrendezés gyakori felhasználói felületi elemeket tartalmaz, 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 meglévő alkalmazáshoz ad-e bejelentkezést, a felhasználói felület elemei eltérőek lehetnek. Ha igen, ügyeljen arra, hogy _LoginPartial a lapelrendezés megfelelő helyén szerepeljen.

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ímeinek 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 korlátozza a művelethez való hozzáférést a hitelesített felhasználók számára.

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

Az Azure AD B2C identitásszolgáltatói beállításai a appsettings.json fájlban vannak tárolva. Nyissa meg appsettings.json, 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ás-cikkben ismerteti. Használja a következő beállításokat:

Példány: Cserélje le <your-tenant-name> az Azure AD B2C-bérlő nevének első részére (például https://contoso.b2clogin.com).
Tartomány: Cserélje le <your-b2c-domain> az Azure AD B2C teljes bérlőnevét (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 <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

Hozza létre és futtassa a projektet.
Ugrás ide: https://localhost:5001.
Válassza a Regisztráció/Bejelentkezés lehetőséget.
Fejezze be a regisztrációs vagy bejelentkezési folyamatot.

A sikeres hitelesítés után megjelenik a megjelenítendő név a navigációs sávon. Az Azure AD B2C-jogkivonat által az alkalmazáshoz visszaküldött jogcímek megtekintéséhez válassza a Jogcímek lehetőséget.

Következő lépések

Megtudhatja, hogyan szabhatja testre és fejlesztheti az Azure AD B2C hitelesítési felületét a webalkalmazáshoz.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-05-08