Azure AD B2C kullanarak kendi web uygulamanızda kimlik doğrulamasını etkinleştirme

Bu makalede, Azure Active Directory B2C (Azure AD B2C) kimlik doğrulamasını kendi ASP.NET web uygulamanıza nasıl ekleyeceğiniz gösterilir. OpenID Connect protokolunu kullanan ASP.NET Core ara yazılımıyla ASP.NET Core bir web uygulaması oluşturmayı öğrenin.

Örnek web uygulamasını kendi web uygulamanızla değiştirerek bu makaleyi Örnek web uygulamasında kimlik doğrulamasını yapılandırma ile birlikte kullanın.

Önkoşullar

Önkoşulları ve tümleştirme yönergelerini gözden geçirmek için bkz. Örnek bir web uygulamasında kimlik doğrulamasını yapılandırma.

1. Adım: Web uygulaması projesi oluşturma

Mevcut ASP.NET model-view-controller (MVC) web uygulaması projesini kullanabilir veya yenisini oluşturabilirsiniz. Yeni proje oluşturmak için bir komut kabuğu açın ve aşağıdaki komutu girin:

dotnet new mvc -o mywebapp

Yukarıdaki komut aşağıdakileri yapar:

  • Yeni bir MVC web uygulaması oluşturur.
  • parametresi, -o mywebapp uygulamanın kaynak dosyalarıyla mywebapp adlı bir dizin oluşturur.

2. Adım: Kimlik doğrulama kitaplıklarını ekleme

Web uygulamanıza Azure AD B2C kimlik doğrulaması ve yetkilendirme desteği eklemeyi basitleştiren bir ASP.NET Core kitaplık kümesi olan Microsoft Identity Web kitaplığını ekleyin. Microsoft Identity Web kitaplığı, tanımlama bilgisi tabanlı kimlik doğrulaması ile kimlik doğrulama işlem hattını ayarlar. HTTP kimlik doğrulama iletilerini gönderme ve alma, belirteç doğrulama, talep ayıklama ve daha fazlasını üstlenir.

Microsoft Identity Web kitaplığını eklemek için aşağıdaki komutları çalıştırarak paketleri yükleyin:

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

3. Adım: Kimlik doğrulama kitaplıklarını başlatma

Microsoft Identity Web ara yazılımı, barındırma işlemi başladığında çalışan bir başlangıç sınıfı kullanır. Bu adımda, kimlik doğrulama kitaplıklarını başlatmak için gerekli kodu eklersiniz.

Startup.cs dosyasını açın ve sınıfın başına aşağıdaki using bildirimleri ekleyin:

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

Microsoft Identity Web, web uygulamanızı korumak için tanımlama bilgisi tabanlı kimlik doğrulaması kullandığından, aşağıdaki kod SameSite tanımlama bilgisi ayarlarını ayarlar. Ardından uygulama ayarlarını okur AzureAdB2C ve ara yazılım denetleyicisini görünümüyle başlatır.

ConfigureServices(IServiceCollection services) işlevini aşağıdaki kod parçacığıyla değiştirin:

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

Aşağıdaki kod tanımlama bilgisi ilkesini ekler ve kimlik doğrulama modelini kullanır. Configure işlevini aşağıdaki kod parçacığıyla değiştirin:

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. Adım: Kullanıcı arabirimi öğelerini ekleme

Kullanıcı arabirimi öğeleri eklemek için, kullanıcıların oturum açıp açmadığını denetlemek için mantık içeren kısmi bir görünüm kullanın. Kullanıcılar oturum açmadıysa, kısmi görünüm oturum açma düğmesini işler. Oturum açmışlarsa kullanıcının görünen adı ve oturum kapatma düğmesi gösterilir.

/Views/Shared klasörünün içinde aşağıdaki kod parçacığıyla _LoginPartial.cshtml adlı yeni bir dosya oluşturun:

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

/Views/Shared_Layout.cshtml dosyanızı, eklediğiniz _LoginPartial.cshtml dosyasını içerecek şekilde değiştirin. _Layout.cshtml dosyası, kullanıcılara sayfadan sayfaya doğru tutarlı bir deneyim sağlayan yaygın bir düzendir. Düzen, uygulama üst bilgisi ve alt bilgisi gibi ortak kullanıcı arabirimi öğelerini içerir.

Not

Çalıştırdığınız .NET Core sürümüne ve mevcut bir uygulamaya oturum açma ekleyip eklemediğinize bağlı olarak, kullanıcı arabirimi öğeleri farklı görünebilir. Öyleyse, _LoginPartial sayfa düzeninde uygun konuma eklediğinizden emin olun.

/Views/Shared/_Layout.cshtml dosyasını açın ve aşağıdaki div öğeyi ekleyin.

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

Bu öğeyi aşağıdaki Razor koduyla değiştirin:

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

Yukarıdaki Razor kodu, sonraki adımda oluşturacağınız eylemin bağlantısını Claims içerir.

5. Adım: Talepler görünümünü ekleme

Kimlik belirteci taleplerini görüntülemek için , /Views/Home klasörünün altına Claims.cshtml görünümünü ekleyin.

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

Bu adımda Claims.cshtml görünümünü Giriş denetleyicisine bağlayan eylemi eklersinizClaims. Eylem Claims , kimliği doğrulanmış kullanıcılarla Authorize eyleme erişimi sınırlayan özniteliğini kullanır.

/Controllers/HomeController.cs denetleyicisine aşağıdaki eylemi ekleyin:

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

sınıfının başına aşağıdaki using bildirimi ekleyin:

using Microsoft.AspNetCore.Authorization;

6. Adım: Uygulama ayarlarını ekleme

Azure AD B2C kimlik sağlayıcısı ayarları appsettings.json dosyasında depolanır. appsettings.json dosyasını açın ve aşağıdaki ayarları ekleyin:

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

Gerekli bilgiler, Örnek bir web uygulamasında kimlik doğrulamasını yapılandırma makalesinde açıklanmıştır. Aşağıdaki ayarları kullanın:

  • Örnek: değerini Azure AD B2C kiracı adınızın ilk bölümüyle değiştirin <your-tenant-name> (örneğin, https://contoso.b2clogin.com).
  • Etki alanı: değerini <your-b2c-domain> Azure AD B2C tam kiracı adınızla değiştirin (örneğin, contoso.onmicrosoft.com).
  • İstemci Kimliği: değerini 2. Adımdaki Uygulama Kimliği ile değiştirin<web-app-application-id>.
  • İlke adı: değerini 1. Adımda oluşturduğunuz kullanıcı akışlarıyla değiştirin<your-sign-up-in-policy>.

7. Adım: Uygulamanızı çalıştırma

  1. Projeyi derleyin ve çalıştırın.
  2. https://localhost:5001 öğesine gidin.
  3. Kaydol/Giriş'i seçin.
  4. Kaydolma veya oturum açma işlemini tamamlayın.

Kimliğiniz başarıyla doğrulandıktan sonra görünen adınızı gezinti çubuğunda görürsünüz. Azure AD B2C belirtecinin uygulamanıza döndürdüğü talepleri görüntülemek için Talepler'i seçin.

Sonraki adımlar