ASP.NET Jadro

Vytvorte prihlasovací mechanizmus pomocou autentifikácie súborov cookie a vytvorte mechanizmus, ktorý bude presmerovaný, ak nie ste overení

Stránka aktualizovaná :
Dátum vytvorenia strany :

Prevádzkové prostredie

Vizuálne štúdio
  • Komunita Visual Studia 2022
ASP.NET Core (MVC, Razor Pages)
6.0

Najskôr

Tentokrát bude ASP.NET Core používať autentifikáciu súborov cookie ako mechanizmus autentifikácie prihlásenia. Autentifikáciu súborov cookie si môžete predstaviť ako podobnú autentifikácii tradičnými formulármi.

Ďalším mechanizmom autentifikácie pre ASP.NET Core je ASP.NET základná identita. Okrem autentifikácie pomocou formulárov vám to umožňuje autentifikovať sa pomocou rozhraní API, používať externé prihlasovacie služby, spravovať a resetovať heslá atď. Môžete použiť veľa funkcií. Z hľadiska vytvorenia jednoduchej prihlasovacej obrazovky však tentoraz pôjde o trochu prehnaný autentifikačný mechanizmus. Tentoraz ho nepoužijeme.

V tipoch na overovanie súborov cookie, ktoré boli tentokrát predstavené, nemôžete zobraziť nič iné ako prihlasovaciu obrazovku, pokiaľ sa neprihlásite. Ak sa pokúsite prejsť na inú obrazovku, budete presmerovaní na prihlasovaciu obrazovku. Ak sa prihlásite, môžete zobraziť ďalšie obrazovky.

Zatiaľ sa môžete prihlásiť zadaním svojho používateľského mena a hesla na prihlasovacej obrazovke. Samotná autentifikácia používateľa je implementovaná ako dočasné miesto. V tomto prípade sa hlavný dôraz kladie na implementáciu autentifikácie súborov cookie, takže podstata procesu určovania, napríklad či je heslo správne, nie je podstatou.

Tento tip popisuje iba časť programu. Pre kompletný kód si stiahnite kompletný program. Zahŕňa tiež rámce MVC a Razor Pages.

Vytvorenie projektu

Spustite Visual Studio a vytvorte nový projekt.

V časti Razor Pages vyberte ASP.NET Core Web App alebo ASP.NET MVC vyberte položku Core Web App (Model-View-Controller).

Zadajte názov projektu podľa vlastného výberu a umiestnenie projektu.

Ako typ overenia vyberte možnosť Žiadne. Ak vyberiete iné overenie, použijete ASP.NET základnú identitu. Po dokončení nastavení kliknite na tlačidlo "Vytvoriť".

Po vytvorení projektu sa po vykonaní ladenia zobrazí obrazovka zobrazená nižšie. Na základe tejto obrazovky vytvoríme program.

Upraviť program.cs (Razor Pages, MVC Common)

Pridajte definície potrebné na autentifikáciu súborov cookie do programu .cs. Menné priestory, ktoré sa majú pridať, sú tieto:

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authorization;

Tu je builder.Services kód, ktorý môžete pridať do súboru .

// === 省略 ===

// 「Razor Pages」のコード
// builder.Services.AddRazorPages();
// 「MVC」のコード
// builder.Services.AddControllersWithViews();

// ※ここから追加

// Cookie による認証スキームを追加する
builder.Services
  .AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
  .AddCookie();

builder.Services.AddAuthorization(options =>
{
  // AllowAnonymous 属性が指定されていないすべての画面、アクションなどに対してユーザー認証が必要となる
  options.FallbackPolicy = new AuthorizationPolicyBuilder()
    .RequireAuthenticatedUser()
    .Build();
});

// ※ここまで追加

var app = builder.Build();

// === 省略 ===

AddAuthenticationAddCookie Autentifikáciu súborov cookie môžete povoliť spustením metódy and. Ak nepotrebujete zmeniť názov schémy, CookieAuthenticationDefaults.AuthenticationScheme zadajte .

AddAuthorization Ak pre metódu určíte options.FallbackPolicy RequireAuthenticatedUser Politiku vyžadovanú overením môžete použiť na všetky stránky, všetky ovládače a akcie. Ak chcete vyžadovať autentifikáciu pre čokoľvek iné ako prihlasovaciu obrazovku, je to užitočná metóda, pokiaľ ide o zníženie kódu a zabránenie chybám v popise. Budete musieť napísať kód, ktorý nevyžaduje autentifikáciu pre prihlasovaciu obrazovku samostatne.

Nasleduje app kód pre .

// === 省略 ===

app.UseRouting();

app.UseAuthentication(); // [追加] 認証
app.UseAuthorization(); // 認可

// 「Razor Pages」のコード
// app.MapRazorPages();
// 「MVC」のコード
// app.MapControllerRoute(
//     name: "default",
//     pattern: "{controller=Home}/{action=Index}/{id?}");

// === 省略 ===

Keďže chceme do aplikácie pridať autentifikačnú funkcionalitu, app.UseAuthentication() pridáme . Umiestnenie popisu je podľa dokumentácie MSDN, aplikácie. UseAuthorization(). Okrem toho je to stále šablóna.

Programy pre projekty Razor Pages

Vytvorenie prihlasovacej stránky (Pages/Account/Login.cshtml.cs)

Vytvorenie súboru

Vytvorte prihlasovaciu stránku. Cesta k súboru by mala byť vytvorená ako "/Pages/Account/Login.cshtml". Je to preto, že predvolená prihlasovacia cesta je takáto. Ak chcete zmeniť túto cestu, môžete Program.cs tak urobiť nastavením argumentu AddCookie metódy .

Môžete ho vytvoriť kopírovaním iných súborov namiesto vytvárania z ponuky, ale v takom prípade program opravte správne.

Umožnite používateľom prístup na prihlasovaciu stránku bez prihlásenia

Program.cs Keďže všetky stránky sú prístupné iba vtedy, keď ste prihlásení, musíte nastaviť iba prihlasovaciu stránku, aby ste k nej mali prístup, aj keď nie ste prihlásení.

AllowAnonymous Pridaním atribútov je cieľová stránka prístupná, aj keď nie je overená. AllowAnonymous Atribúty môžu byť použité na iných miestach ako na prihlasovacej obrazovke, napríklad operácie API, ktoré nesúvisia s autentifikáciou súborov cookie.

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Security.Claims;

namespace AspNetCoreCookieAuthenticationRazorPages.Pages.Account
{
  [AllowAnonymous]
  public class LoginModel : PageModel
  {
  }
}

Vytvorenie premennej na príjem vstupu

Keď sa prihlásite, deklarujete svoje používateľské meno, že môžete prijímať tieto hodnoty, pretože zadáte svoje heslo.

// 省略

[AllowAnonymous]
public class LoginModel : PageModel
{
  /// <summary>ユーザー名。</summary>
  [BindProperty]
  [Required]
  [DisplayName("ユーザー名")]
  public string UserName { get; set; } = "";

  /// <summary>パスワード。</summary>
  [BindProperty]
  [Required]
  [DataType(DataType.Password)]
  [DisplayName("パスワード")]
  public string Password { get; set; } = "";
}

Definujte používateľské meno a heslo pre autentifikáciu prihlásenia

Pôvodne by to bolo uložené v databáze atď., Ale keďže úsudok používateľa tentoraz nie je hlavným cieľom, urobím to ako dočasné miesto.

// 省略

[AllowAnonymous]
public class LoginModel : PageModel
{
  // 省略

  /// <summary>仮のユーザーデータベースとする。</summary>
  private Dictionary<string, string> UserAccounts { get; set; } = new Dictionary<string, string>
    {
      { "user1", "password1" },
      { "user2", "password2" },
    };
}

Proces prihlásenia

/// <summary>ログイン処理。</summary>
public async Task<ActionResult> OnPost()
{
  // 入力内容にエラーがある場合は処理を中断してエラー表示
  if (ModelState.IsValid == false) return Page();

  // ユーザーの存在チェックとパスワードチェック (仮実装)
  // 本 Tips は Cookie 認証ができるかどうかの確認であるため入力内容やパスワードの厳密なチェックは行っていません
  if (UserAccounts.TryGetValue(UserName, out string? getPass) == false || Password != getPass)
  {
    ModelState.AddModelError("", "ユーザー名またはパスワードが一致しません。");
    return Page();
  }

  // サインインに必要なプリンシパルを作る
  var claims = new[] { new Claim(ClaimTypes.Name, UserName) };
  var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
  var principal = new ClaimsPrincipal(identity);

  // 認証クッキーをレスポンスに追加
  await HttpContext.SignInAsync(principal);

  // ログインが必要な画面にリダイレクトします
  return RedirectToPage("/Index");
}

Toto je proces autentifikácie po stlačení prihlasovacieho tlačidla. Ak sa meno používateľa a heslo zhodujú, overenie je možné.

Opísaný kód je minimálny kód požadovaný na autentifikáciuClaimClaimsIdentityClaimsPrincipal a HttpContext.SignInAsync Vyvolaním metódy sa vygeneruje a overí súbor cookie.

Ak sú potrebné ďalšie reklamácie alebo sa vyžaduje vypršanie platnosti súboru cookie, pridajú sa ďalšie parametre.

Po prihlásení budete presmerovaný na , kde /Index sa vyžaduje overenie.

Proces odhlásenia

/// <summary>ログアウト処理。</summary>
public async Task OnGetLogout()
{
  // 認証クッキーをレスポンスから削除
  await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
}

Logout Pri prístupe pomocou obslužného programu sa spracuje na odhlásenie. HttpContext.SignOutAsync Vyvolaním metódy môžete súbor cookie vymazať a vrátiť ho do stavu, v ktorom nie ste prihlásení.

Vytvorenie zobrazenia

Vzhľad neberieme do úvahy. Pridajte polia na zadanie používateľského mena a hesla, ako je uvedené nižšie, a umiestnite tlačidlo na prihlásenie. Mali by ste mať tiež odkaz na prístup bez prihlásenia na /Index testovanie.

Keďže je problematické zadať meno používateľa a heslo, nastaví sa počiatočná hodnota.

@page
@model AspNetCoreCookieAuthenticationRazorPages.Pages.Account.LoginModel
@{}

<form asp-action="Login">
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    </div>
  </div>

  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <label asp-for="UserName" class="form-label"></label>
      <input asp-for="UserName" class="form-control" value="user1" />
      <span asp-validation-for="UserName" class="text-danger"></span>
    </div>
  </div>
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <label asp-for="Password" class="form-label"></label>
      <input asp-for="Password" class="form-control" value="password1" />
      <span asp-validation-for="Password" class="text-danger"></span>
    </div>
  </div>
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <button type="submit" class="btn btn-primary">ログイン</button>
    </div>
  </div>
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <a asp-page="/Index">認証が必要な画面へ直接リンク</a>
    </div>
  </div>
</form>

@section Scripts {
  @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Vytvorenie odkazu na odhlásenie (/Pages/Shared/_Layout.cshtml)

Na domovskej obrazovke nebudeme vykonávať žiadne zmeny, ale na navigačný panel umiestnime odkaz na odhlásenie. Na testovanie tiež uverejnite odkaz, ktorý vás presmeruje na prihlasovaciu obrazovku bez odhlásenia.

<!-- 中略 -->
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
  <ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
    </li>
    <!-- ここから追加 -->
    <li class="nav-item">
      <a class="nav-link text-dark" asp-page="/Account/Login" asp-page-handler="Logout">ログアウト</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-dark" asp-page="/Account/Login">ログアウトせずログインへ</a>
    </li>
    <!-- ここまで追加 -->
  </ul>
</div>
<!-- 中略 -->

To je všetko pre kód Razor Pages.

Programy pre projekty MVC

Vytvorenie modelu prihlásenia

Vytvorili ste model, ktorý prijíma hodnoty zadané na prihlasovacej obrazovke.

namespace AspNetCoreCookieAuthenticationMvc.Models
{
  public class LoginModel
  {
    /// <summary>ユーザー名。</summary>
    [Required]
    [DisplayName("ユーザー名")]
    public string UserName { get; set; } = "";

    /// <summary>パスワード。</summary>
    [Required]
    [DataType(DataType.Password)]
    [DisplayName("パスワード")]
    public string Password { get; set; } = "";
  }
}

Vytvorenie AccountController

Vytvorte ovládače a akcie potrebné na vytvorenie prihlasovacej obrazovky. Vytvorte názov AccountController ovládača ako . Je to preto, že v predvolenom nastavení sú názov ovládača a názov akcie na prihlasovacej obrazovke nastavené na "~/Account/Login". Ak chcete zmeniť túto cestu, môžete tak urobiť v možnostiach AddCookie metódy v programe Program.cs. Zatiaľ budeme pokračovať s predvolenými nastaveniami.

Najprv vytvorme stranu ovládača.

using AspNetCoreCookieAuthenticationMvc.Models;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System.Security.Claims;

namespace AspNetCoreCookieAuthenticationMvc.Controllers
{
  /// <remarks>
  /// <see cref="AllowAnonymous"/> 属性は Cookie 認証していなくてもアクセスできる Action (Controller) であることを示す。
  /// </remarks>
  [AllowAnonymous]
  public class AccountController : Controller
  {
  }
}

AllowAnonymous Udelením atribútu je možné vykonať všetky akcie v ňom bez overenia. To vám umožní prístup iba k prihlasovacej obrazovke bez autentifikácie.

AllowAnonymous Atribúty môžu byť použité aj v kontroléroch iba API, ktoré nesúvisia s autentifikáciou súborov cookie na iných miestach ako na prihlasovacej obrazovke.

Ďalej definujte používateľov a heslá, ktoré sa môžu prihlásiť. Pôvodne by to bolo uložené v databáze atď., Ale keďže úsudok používateľa tentoraz nie je hlavným cieľom, urobím to ako dočasné miesto.

[AllowAnonymous]
public class AccountController : Controller
{
  /// <summary>仮のユーザーデータベースとする。</summary>
  private Dictionary<string, string> UserAccounts { get; set; } = new Dictionary<string, string>
    {
      { "user1", "password1" },
      { "user2", "password2" },
    };
}

Nasleduje akcia, ktorá zobrazí prihlasovaciu obrazovku. Keďže sa iba zobrazuje, vráti zobrazenie tak, ako je.

/// <summary>ログイン画面を表示します。</summary>
public IActionResult Login() => View();

Nižšie je uvedený kód, ktorý sa má spracovať pri prihlasovaní.

/// <summary>ログイン処理を実行します。</summary>
[HttpPost]
public async Task<IActionResult> Login(LoginModel model)
{
  // 入力内容にエラーがある場合は処理を中断してエラー表示
  if (ModelState.IsValid == false) return View(model);

  // ユーザーの存在チェックとパスワードチェック (仮実装)
  // 本 Tips は Cookie 認証ができるかどうかの確認であるため入力内容やパスワードの厳密なチェックは行っていません
  if (UserAccounts.TryGetValue(model.UserName, out string? getPass) == false || model.Password != getPass)
  {
    ModelState.AddModelError("", "ユーザー名またはパスワードが一致しません。");
    return View(model);
  }

  // サインインに必要なプリンシパルを作る
  var claims = new[] { new Claim(ClaimTypes.Name, model.UserName) };
  var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
  var principal = new ClaimsPrincipal(identity);

  // 認証クッキーをレスポンスに追加
  await HttpContext.SignInAsync(principal);

  // ログインが必要な画面にリダイレクトします
  return RedirectToAction(nameof(HomeController.Index), "Home");
}

Toto je proces autentifikácie po stlačení prihlasovacieho tlačidla. Ak sa meno používateľa a heslo zhodujú, overenie je možné.

Opísaný kód je minimálny kód požadovaný na autentifikáciuClaimClaimsIdentityClaimsPrincipal a HttpContext.SignInAsync Vyvolaním metódy sa vygeneruje a overí súbor cookie.

Ak sú potrebné ďalšie reklamácie alebo sa vyžaduje vypršanie platnosti súboru cookie, pridajú sa ďalšie parametre.

Po prihlásení budete presmerovaný na , kde ~/Home/Index sa vyžaduje overenie.

Nakoniec sa pridá proces odhlásenia.

/// <summary>ログアウト処理を実行します。</summary>
public async Task<IActionResult> Logout()
{
  // 認証クッキーをレスポンスから削除
  await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);

  // ログイン画面にリダイレクト
  return RedirectToAction(nameof(Login));
}

HttpContext.SignOutAsync Vyvolaním metódy môžete súbor cookie vymazať a vrátiť ho do stavu, v ktorom nie ste prihlásení.

Vytvorenie zobrazenia (prihlasovací formulár) (/Views/Account/Login.cshtml)

Login Kliknutím pravým tlačidlom myši na akciu pridajte zobrazenie. Môžete ho vytvoriť aj skopírovaním z iného súboru.

Vzhľad neberieme do úvahy. Pridajte polia na zadanie používateľského mena a hesla, ako je uvedené nižšie, a umiestnite tlačidlo na prihlásenie. Mali by ste mať tiež odkaz na prístup bez prihlásenia na Home/Index testovanie.

Keďže je problematické zadať meno používateľa a heslo, nastaví sa počiatočná hodnota.

@model LoginModel
@{}

<form asp-action="Login">
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    </div>
  </div>

  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <label asp-for="UserName" class="form-label"></label>
      <input asp-for="UserName" class="form-control" value="user1" />
      <span asp-validation-for="UserName" class="text-danger"></span>
    </div>
  </div>
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <label asp-for="Password" class="form-label"></label>
      <input asp-for="Password" class="form-control" value="password1" />
      <span asp-validation-for="Password" class="text-danger"></span>
    </div>
  </div>
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <button type="submit" class="btn btn-primary">ログイン</button>
    </div>
  </div>
  <div class="row m-1 g-3">
    <div class="col-sm-6 offset-sm-3">
      <a asp-controller="Home" asp-action="Index">認証が必要な画面へ直接リンク</a>
    </div>
  </div>
</form>

@section Scripts {
  @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Vytvorenie odkazu na odhlásenie (/Views/Shared/_Layout.cshtml)

Na domovskej obrazovke nebudeme vykonávať žiadne zmeny, ale na navigačný panel umiestnime odkaz na odhlásenie. Na testovanie tiež uverejnite odkaz, ktorý vás presmeruje na prihlasovaciu obrazovku bez odhlásenia.

<!-- 中略 -->
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
  <ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </li>
    <!-- ここから追加 -->
    <li class="nav-item">
      <a class="nav-link text-dark" asp-controller="Account" asp-action="Logout">ログアウト</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-dark" asp-controller="Account" asp-action="Login">ログアウトせずログインへ</a>
    </li>
    <!-- ここまで追加 -->
  </ul>
</div>
<!-- 中略 -->

To je všetko pre kód MVC.

Potvrdenie prevádzky

Tým sa dokončí minimálna požadovaná implementácia autentifikácie súborov cookie. Skúste ho spustiť a uvidíte, ako to funguje. Správanie by sa malo zmeniť v závislosti od toho, či ste prihlásení alebo nie. Ako jednoduchý príklad môžete vidieť nasledujúce správanie.

prevádzky
Výsledok⇒ prevádzky
Choďte domov bez prihlásenia ⇒ Presmerovanie na prihlasovaciu obrazovku
prihlásenie ⇒ Prechod na domovskú obrazovku
Odhláste sa z domu a choďte domov bez prihlásenia ⇒ Presmerovanie na prihlasovaciu obrazovku
Choďte domov bez odhlásenia z domu a prihlásenia ⇒ Prechod na domovskú obrazovku
Použitie čiastočného zobrazenia na načítanie čiastočného HTML asynchrónne na strane klienta
Vytvorte viacero prihlasovacích obrazoviek a obmedzte stránky, ku ktorým máte prístup z obrazovky, na ktorú ste prihlásení