Włączanie uwierzytelniania we własnej aplikacji internetowej przy użyciu usługi Azure AD B2C

  • Artykuł

W tym artykule przedstawiono sposób dodawania uwierzytelniania usługi Azure Active Directory B2C (Azure AD B2C) do własnej aplikacji internetowej ASP.NET. Dowiedz się, jak utworzyć aplikację internetową ASP.NET Core za pomocą oprogramowania pośredniczącego ASP.NET Core korzystającego z protokołu OpenID Connect.

Użyj tego artykułu w połączeniu z konfigurowaniem uwierzytelniania w przykładowej aplikacji internetowej, zastępując przykładową aplikację internetową własną aplikacją internetową.

Wymagania wstępne

Aby zapoznać się z wymaganiami wstępnymi i instrukcjami dotyczącymi integracji, zobacz Konfigurowanie uwierzytelniania w przykładowej aplikacji internetowej.

Krok 1. Tworzenie projektu aplikacji internetowej

Możesz użyć istniejącego projektu aplikacji internetowej ASP.NET model-view-controller (MVC) lub utworzyć nowy. Aby utworzyć nowy projekt, otwórz powłokę poleceń, a następnie wprowadź następujące polecenie:

dotnet new mvc -o mywebapp

Poprzednie polecenie wykonuje następujące czynności:

  • Tworzy nową aplikację internetową MVC.
  • Parametr -o mywebapp tworzy katalog o nazwie mywebapp z plikami źródłowymi aplikacji.

Krok 2. Dodawanie bibliotek uwierzytelniania

Dodaj bibliotekę sieci Web tożsamości firmy Microsoft, która jest zestawem bibliotek ASP.NET Core, które upraszczają dodawanie Azure AD uwierzytelniania B2C i obsługi autoryzacji do aplikacji internetowej. Biblioteka sieci Web tożsamości firmy Microsoft konfiguruje potok uwierzytelniania przy użyciu uwierzytelniania opartego na plikach cookie. Zajmuje się wysyłaniem i odbieraniem komunikatów uwierzytelniania HTTP, weryfikacji tokenu, wyodrębniania oświadczeń i nie tylko.

Aby dodać bibliotekę sieci Web usługi Microsoft Identity, zainstaluj pakiety, uruchamiając następujące polecenia:

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

Krok 3. Inicjowanie bibliotek uwierzytelniania

Oprogramowanie pośredniczące microsoft Identity Web używa klasy uruchamiania uruchamianej po uruchomieniu procesu hostingu. W tym kroku dodasz niezbędny kod do zainicjowania bibliotek uwierzytelniania.

Otwórz plik Startup.cs , a następnie na początku klasy dodaj następujące using deklaracje:

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

Ponieważ usługa Microsoft Identity Web używa uwierzytelniania opartego na plikach cookie w celu ochrony aplikacji internetowej, poniższy kod ustawia ustawienia plików cookie SameSite . Następnie odczytuje ustawienia aplikacji i inicjuje AzureAdB2C kontroler oprogramowania pośredniczącego z jego widokiem.

Zastąp ConfigureServices(IServiceCollection services) funkcję następującym fragmentem kodu:

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

Poniższy kod dodaje zasady plików cookie i używa modelu uwierzytelniania. Zastąp Configure funkcję następującym fragmentem kodu:

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. Dodawanie elementów interfejsu użytkownika

Aby dodać elementy interfejsu użytkownika, użyj widoku częściowego zawierającego logikę sprawdzania, czy użytkownicy są zalogowani. Jeśli użytkownicy nie są zalogowani, widok częściowy renderuje przycisk logowania. Jeśli są one zalogowane, zostanie wyświetlona nazwa wyświetlana użytkownika i przycisk wyloguj się.

Utwórz nowy plik _LoginPartial.cshtml w folderze /Views/Shared z następującym fragmentem kodu:

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

Zmodyfikuj plik /Views/Shared_Layout.cshtml , aby uwzględnić dodany plik _LoginPartial.cshtml . Plik _Layout.cshtml jest typowym układem, który zapewnia użytkownikom spójne środowisko podczas przechodzenia ze strony do strony. Układ zawiera typowe elementy interfejsu użytkownika, takie jak nagłówek i stopka aplikacji.

Uwaga

W zależności od uruchomionej wersji platformy .NET Core i tego, czy dodasz logowanie do istniejącej aplikacji, elementy interfejsu użytkownika mogą wyglądać inaczej. Jeśli tak, pamiętaj, aby uwzględnić _LoginPartial w odpowiedniej lokalizacji w układzie strony.

Otwórz plik /Views/Shared/_Layout.cshtml , a następnie dodaj następujący div element.

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

Zastąp ten element następującym kodem 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>

Powyższy kod Razor zawiera link do Claims akcji, którą utworzysz w następnym kroku.

Krok 5. Dodawanie widoku oświadczeń

Aby wyświetlić oświadczenia tokenu identyfikatora, w folderze /Views/Home dodaj widok 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>

W tym kroku dodasz Claims akcję, która łączy widok Claims.cshtml z kontrolerem głównym . Akcja Claims używa atrybutu Authorize , który ogranicza dostęp do akcji dla uwierzytelnionych użytkowników.

W kontrolerze /Controllers/HomeController.cs dodaj następującą akcję:

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

Na początku klasy dodaj następującą using deklarację:

using Microsoft.AspNetCore.Authorization;

Krok 6. Dodawanie ustawień aplikacji

Azure AD ustawienia dostawcy tożsamości B2C są przechowywane w pliku appsettings.json. Otwórz plik appsettings.json, a następnie dodaj następujące ustawienia:

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

Wymagane informacje opisano w artykule Konfigurowanie uwierzytelniania w przykładowej aplikacji internetowej . Użyj następujących ustawień:

  • Wystąpienie: zastąp <your-tenant-name> element pierwszą częścią nazwy dzierżawy usługi Azure AD B2C (na przykład https://contoso.b2clogin.com).
  • Domena: zastąp <your-b2c-domain> ciąg nazwą pełnej dzierżawy Azure AD B2C (na przykład contoso.onmicrosoft.com).
  • Identyfikator klienta: zastąp <web-app-application-id> ciąg identyfikatorem aplikacji z kroku 2.
  • Nazwa zasad: zastąp element <your-sign-up-in-policy> przepływami użytkownika utworzonymi w kroku 1.

Krok 7. Uruchamianie aplikacji

  1. Skompiluj i uruchom projekt.
  2. Przejdź do witryny https://localhost:5001.
  3. Wybierz pozycję Zarejestruj/W.
  4. Ukończ proces rejestracji lub logowania.

Po pomyślnym uwierzytelnieniu na pasku nawigacyjnym zobaczysz nazwę wyświetlaną. Aby wyświetlić oświadczenia, które Azure AD token B2C powraca do aplikacji, wybierz pozycję Oświadczenia.

Następne kroki