Blazor Server 쿠키 인증 코드 조각

• 4/3/2023
• 2 minutes to read

현재 코드 조각은 Blazor Part 3-2 강좌의 09_01_Blazor Server에서 쿠키 인증을 사용하여 로그인 처리하기 강좌에서 진행하는 내용입니다. 전체 소스는 다음 경로에 있습니다.

• https://github.com/VisualAcademy/HawasoCookies

Startup.cs

// D:\HawasoCookies\Hawaso\Startup.cs
// 쿠키 인증 사용
services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie();

LoginController.cs

// D:\HawasoCookies\Hawaso\Controllers\LoginController.cs
public class LoginController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public async Task<IActionResult> Index(string email, string password)
    {
        if (email == "a@a.com" && password == "password")
        {
            // DotNetNoteCookies
            //[!] 인증 부여: 인증된 사용자의 주요 정보(Name, Role, ...)를 기록
            var claims = new List<Claim>
            {
                // 로그인 아이디 지정
                new Claim(ClaimTypes.Email, email),
                new Claim(ClaimTypes.Name, "박용준"),
            };

            var ci = new ClaimsIdentity(claims,
                CookieAuthenticationDefaults.AuthenticationScheme);

            await HttpContext.SignInAsync(
                CookieAuthenticationDefaults.AuthenticationScheme
                , new ClaimsPrincipal(ci));

            return LocalRedirect(Url.Content("~/"));
        }

        return View();
    }

    [Authorize]
    public IActionResult UserInfor() => View();
}

Index.cshtml

// D:\HawasoCookies\Hawaso\Views\Login\Index.cshtml
@{
    Layout = null;
}

<h1>로그인</h1>

<form action="/Login" method="post">
    아이디: <input type="text" id="email" name="email" /><br />
    암호: <input type="password" id="password" name="password" /><br />
    <input type="submit" value="로그인" />
</form>

UserInfor.cshtml

// D:\HawasoCookies\Hawaso\Views\Login\UserInfor.cshtml
@{
    Layout = null;
}

<h1>사용자 정보 페이지 - 로그인 사용자 전용</h1>

LogoutController.cs

// D:\HawasoCookies\Hawaso\Controllers\LogoutController.cs
public class LogoutController : Controller
{
    [HttpPost]
    public async Task<IActionResult> Index()
    {
        // 로그아웃
        await HttpContext.SignOutAsync(
            CookieAuthenticationDefaults.AuthenticationScheme);

        return LocalRedirect("/");
    }
}

LoginDisplay.razor

// D:\HawasoCookies\Hawaso\Shared\LoginDisplay.razor
<AuthorizeView>
    <Authorized>
        <a href="Identity/Account/Manage">
            @context.User.Identity.Name 님, 안녕하세요.
        </a>
        <form method="post" action="Identity/Account/LogOut">
            <button type="submit" class="nav-link btn btn-link">
                Log out
            </button>
        </form>
        @*<a href="/Logout">Log out Cookies</a>*@
        <form method="post" action="/Logout">
            <button type="submit" class="nav-link btn btn-link">
                Log out Cookies
            </button>
        </form>
    </Authorized>
    <NotAuthorized>
        <a href="Identity/Account/Register">Register</a>
        <a href="Identity/Account/Login">Log in</a>
        <a href="/Login">Log in Cookies</a>
    </NotAuthorized>
</AuthorizeView>

App.razor

// D:\HawasoCookies\Hawaso\App.razor
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
    <NotAuthorized>
        <h1>로그인 하지 않았습니다.</h1>
    </NotAuthorized>
</AuthorizeRouteView>

Counter.razor

// D:\HawasoCookies\Hawaso\Pages\Counter.razor
@page "/counter"

@attribute [Authorize]

<h1>Counter</h1>

FetchData.razor

// D:\HawasoCookies\Hawaso\Pages\FetchData.razor
@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthenticationStateRef;
        if (authState.User.Identity.IsAuthenticated)
        {
            if (authState.User.Identity.Name == "박용준")
            {
                forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
            }
        }
    }

    [CascadingParameter]
    public Task<AuthenticationState> AuthenticationStateRef { get; set; }
}

Blazor 로그아웃 코드 조각

다음 코드는 Blazor에서 로그아웃하는 샘플 코드입니다.

***코드: ***

//  D:\SingleSignOn\SingleSignOn.Blazor\Pages\LogoutSso.cshtml.cs
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace SingleSignOn.Blazor
{
    public class LogoutSsoModel : PageModel
    {
        public async Task OnGetAsync()
        {
            await HttpContext.SignOutAsync(
                CookieAuthenticationDefaults.AuthenticationScheme);
            await HttpContext.SignOutAsync(
                OpenIdConnectDefaults.AuthenticationScheme);
        }
    }
}

Blazor 인증 이름 확인 코드 조각

***코드: ***

//  D:\SingleSignOn\SingleSignOn.Blazor\Shared\NavMenu.razor
<AuthorizeView>
    <Authorized>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="LogoutSso">
                <span class="oi oi-list-rich" aria-hidden="true"></span>
                Logout(@context.User.Claims.FirstOrDefault(
                      c => c.Type == "name")?.Value)
            </NavLink>
        </li>
    </Authorized>
</AuthorizeView>