feat(auth): QuantEngine 관리자 로그인 페이지 및 세션 인증 체계 구현 (WBS-AUTH)

2026-07-01 11:12:20 +09:00
parent 24c1cce542
commit bdb9262f4e
10 changed files with 430 additions and 8 deletions
@@ -1,8 +1,11 @@
@inherits LayoutComponentBase
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
+@inject AuthenticationStateProvider AuthStateProvider
+@inject NavigationManager NavigationManager
@using System.IO
@using System.Text.Json
@using Microsoft.FluentUI.AspNetCore.Components
+@using QuantEngine.Web.Infrastructure

 <FluentStack Orientation="Orientation.Vertical" Class="h-100 w-100">
    <!-- Header -->
@@ -15,6 +18,16 @@
                ☰
            </FluentButton>
            <h1 style="margin: 0; font-size: 20px; font-weight: 600;">QuantEngine v@appVersion</h1>
+            <AuthorizeView>
+                <Authorized>
+                    <div style="margin-left: auto; display: flex; align-items: center; gap: 12px;">
+                        <span style="font-size: 13px; color: var(--neutral-foreground-hint);">관리자 (@context.User.Identity?.Name)</span>
+                        <FluentButton OnClick="HandleLogoutAsync" Style="color: #ff5252; background: transparent; border: 1px solid rgba(255, 82, 82, 0.2); cursor: pointer; padding: 4px 12px; border-radius: 4px;">
+                            로그아웃
+                        </FluentButton>
+                    </div>
+                </Authorized>
+            </AuthorizeView>
        </FluentStack>
    </FluentHeader>

@@ -90,5 +103,12 @@
            // Fail-safe default fallback values
        }
    }
+
+    private async Task HandleLogoutAsync()
+    {
+        var customProvider = (CustomAuthenticationStateProvider)AuthStateProvider;
+        await customProvider.MarkUserAsLoggedOutAsync();
+        NavigationManager.NavigateTo("login");
+    }
 }

@@ -0,0 +1,310 @@
+@page "/login"
+@attribute [AllowAnonymous]
+@inject AuthenticationStateProvider AuthStateProvider
+@inject NavigationManager NavigationManager
+@inject IConfiguration Configuration
+
+<PageTitle>로그인 - QuantEngine</PageTitle>
+
+<div class="auth-container">
+    <div class="auth-card">
+        <div class="brand-section">
+            <img src="images/quant_engine_logo.jpg" alt="QuantEngine Logo" class="brand-logo" />
+            <h1 class="brand-title">QuantEngine</h1>
+            <p class="brand-subtitle">은퇴자산포트폴리오 투자 관리 시스템</p>
+        </div>
+
+        <form @onsubmit="HandleLoginAsync" class="auth-form">
+            <div class="form-group">
+                <label for="username">관리자 아이디</label>
+                <input type="text" id="username" class="form-control" @bind="Username" placeholder="아이디를 입력하세요" autocomplete="username" />
+            </div>
+
+            <div class="form-group">
+                <label for="password">비밀번호</label>
+                <input type="password" id="password" class="form-control" @bind="Password" placeholder="비밀번호를 입력하세요" autocomplete="current-password" />
+            </div>
+
+            @if (!string.IsNullOrEmpty(ErrorMessage))
+            {
+                <div class="error-message">
+                    <svg class="error-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    <span>@ErrorMessage</span>
+                </div>
+            }
+
+            <button type="submit" class="btn-submit" disabled="@IsSubmitting">
+                @if (IsSubmitting)
+                {
+                    <span class="spinner"></span>
+                    <span>인증 중...</span>
+                }
+                else
+                {
+                    <span>로그인</span>
+                }
+            </button>
+        </form>
+    </div>
+</div>
+
+<style>
+    .auth-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        width: 100vw;
+        background: linear-gradient(135deg, #090a15 0%, #12142d 100%);
+        font-family: 'Roboto', 'Inter', sans-serif;
+        color: #ffffff;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 9999;
+        overflow: hidden;
+    }
+
+    /* Ambient background glow */
+    .auth-container::before {
+        content: "";
+        position: absolute;
+        width: 600px;
+        height: 600px;
+        background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(79, 172, 254, 0) 70%);
+        top: -10%;
+        left: -10%;
+        pointer-events: none;
+    }
+
+    .auth-container::after {
+        content: "";
+        position: absolute;
+        width: 600px;
+        height: 600px;
+        background: radial-gradient(circle, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0) 70%);
+        bottom: -10%;
+        right: -10%;
+        pointer-events: none;
+    }
+
+    .auth-card {
+        background: rgba(255, 255, 255, 0.02);
+        backdrop-filter: blur(25px);
+        -webkit-backdrop-filter: blur(25px);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 20px;
+        padding: 48px;
+        width: 440px;
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        z-index: 10;
+        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .brand-section {
+        text-align: center;
+        margin-bottom: 36px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .brand-logo {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 2px solid rgba(0, 242, 254, 0.3);
+        box-shadow: 0 0 20px rgba(0, 242, 254, 0.15);
+        margin-bottom: 16px;
+        transition: transform 0.3s ease;
+    }
+
+    .brand-logo:hover {
+        transform: rotate(5deg) scale(1.05);
+    }
+
+    .brand-title {
+        font-size: 26px;
+        font-weight: 700;
+        margin: 0;
+        background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        letter-spacing: 0.5px;
+    }
+
+    .brand-subtitle {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.5);
+        margin: 6px 0 0 0;
+        font-weight: 300;
+    }
+
+    .auth-form {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .form-group label {
+        font-size: 13px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.8);
+        padding-left: 2px;
+    }
+
+    .form-control {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 10px;
+        padding: 14px 16px;
+        color: #ffffff;
+        font-size: 14px;
+        transition: all 0.3s ease;
+        outline: none;
+    }
+
+    .form-control:focus {
+        border-color: rgba(0, 242, 254, 0.6);
+        background: rgba(255, 255, 255, 0.08);
+        box-shadow: 0 0 12px rgba(0, 242, 254, 0.15);
+    }
+
+    .form-control::placeholder {
+        color: rgba(255, 255, 255, 0.25);
+    }
+
+    .error-message {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        background: rgba(239, 68, 68, 0.08);
+        border: 1px solid rgba(239, 68, 68, 0.2);
+        border-radius: 10px;
+        padding: 12px 16px;
+        color: #f87171;
+        font-size: 13px;
+    }
+
+    .error-icon {
+        width: 18px;
+        height: 18px;
+        flex-shrink: 0;
+    }
+
+    .btn-submit {
+        background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
+        border: none;
+        border-radius: 10px;
+        padding: 14px;
+        color: #0b0c15;
+        font-size: 15px;
+        font-weight: 700;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(0, 242, 254, 0.2);
+    }
+
+    .btn-submit:hover:not(:disabled) {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 242, 254, 0.35);
+    }
+
+    .btn-submit:active:not(:disabled) {
+        transform: translateY(0);
+    }
+
+    .btn-submit:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        box-shadow: none;
+    }
+
+    .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(11, 12, 21, 0.25);
+        border-top-color: #0b0c15;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+    }
+
+    @@keyframes spin {
+        to { transform: rotate(360deg); }
+    }
+
+    @@keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+</style>
+
+@code {
+    private string Username { get; set; } = string.Empty;
+    private string Password { get; set; } = string.Empty;
+    private string ErrorMessage { get; set; } = string.Empty;
+    private bool IsSubmitting { get; set; } = false;
+
+    private async Task HandleLoginAsync()
+    {
+        ErrorMessage = string.Empty;
+        if (string.IsNullOrWhiteSpace(Username) || string.IsNullOrWhiteSpace(Password))
+        {
+            ErrorMessage = "아이디와 비밀번호를 모두 입력해 주세요.";
+            return;
+        }
+
+        IsSubmitting = true;
+
+        try
+        {
+            // Verify against configurations in appsettings.json
+            var expectedUser = Configuration["AdminSettings:Username"] ?? "admin";
+            var expectedPass = Configuration["AdminSettings:Password"] ?? "quant123!";
+
+            if (Username == expectedUser && Password == expectedPass)
+            {
+                var customProvider = (CustomAuthenticationStateProvider)AuthStateProvider;
+                await customProvider.MarkUserAsAuthenticatedAsync(Username);
+                
+                // Redirect back to home dashboard
+                NavigationManager.NavigateTo("");
+            }
+            else
+            {
+                ErrorMessage = "아이디 또는 비밀번호가 올바르지 않습니다.";
+            }
+        }
+        catch (Exception ex)
+        {
+            ErrorMessage = $"로그인 중 오류가 발생했습니다: {ex.Message}";
+        }
+        finally
+        {
+            IsSubmitting = false;
+        }
+    }
+}
@@ -0,0 +1,8 @@
+@inject NavigationManager NavigationManager
+
+@code {
+    protected override void OnInitialized()
+    {
+        NavigationManager.NavigateTo("login");
+    }
+}
@@ -1,6 +1,12 @@
-<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
-    <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
-        <FocusOnNavigate RouteData="routeData" Selector="h1" />
-    </Found>
-</Router>
+<CascadingAuthenticationState>
+    <Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
+        <Found Context="routeData">
+            <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)">
+                <NotAuthorized>
+                    <RedirectToLogin />
+                </NotAuthorized>
+            </AuthorizeRouteView>
+            <FocusOnNavigate RouteData="routeData" Selector="h1" />
+        </Found>
+    </Router>
+</CascadingAuthenticationState>
@@ -1,4 +1,4 @@
-@using System.Net.Http
+@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@@ -11,3 +11,6 @@
@using QuantEngine.Web
@using QuantEngine.Web.Components
@using QuantEngine.Web.Components.Layout
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Authorization
+@using QuantEngine.Web.Infrastructure
@@ -118,7 +118,7 @@ public static class CollectionEndpoints
            var runId = Guid.NewGuid().ToString("N");
            var now = DateTime.UtcNow.ToString("o");

-            var body = await request.ReadAsAsync<CollectionRunRequest>();
+            var body = await request.ReadFromJsonAsync<CollectionRunRequest>();
            var account = body?.Account ?? "real";
            var tickers = body?.Tickers ?? new List<string> { "005930", "000660" };

@@ -0,0 +1,65 @@
+using System.Security.Claims;
+using Microsoft.AspNetCore.Components.Authorization;
+using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
+
+namespace QuantEngine.Web.Infrastructure
+{
+    public class CustomAuthenticationStateProvider : AuthenticationStateProvider
+    {
+        private readonly ProtectedLocalStorage _localStorage;
+        private readonly ClaimsPrincipal _anonymous = new ClaimsPrincipal(new ClaimsIdentity());
+        private const string StorageKey = "quant_admin_session";
+
+        public CustomAuthenticationStateProvider(ProtectedLocalStorage localStorage)
+        {
+            _localStorage = localStorage;
+        }
+
+        public override async Task<AuthenticationState> GetAuthenticationStateAsync()
+        {
+            try
+            {
+                // ProtectedLocalStorage call will throw an exception during pre-rendering
+                var result = await _localStorage.GetAsync<string>(StorageKey);
+                if (result.Success && !string.IsNullOrEmpty(result.Value))
+                {
+                    var username = result.Value;
+                    var identity = new ClaimsIdentity(new[]
+                    {
+                        new Claim(ClaimTypes.Name, username),
+                        new Claim(ClaimTypes.Role, "Admin")
+                    }, "QuantAdminAuth");
+
+                    var user = new ClaimsPrincipal(identity);
+                    return new AuthenticationState(user);
+                }
+            }
+            catch
+            {
+                // Return anonymous state during pre-rendering or if storage reading fails
+            }
+
+            return new AuthenticationState(_anonymous);
+        }
+
+        public async Task MarkUserAsAuthenticatedAsync(string username)
+        {
+            await _localStorage.SetAsync(StorageKey, username);
+
+            var identity = new ClaimsIdentity(new[]
+            {
+                new Claim(ClaimTypes.Name, username),
+                new Claim(ClaimTypes.Role, "Admin")
+            }, "QuantAdminAuth");
+
+            var user = new ClaimsPrincipal(identity);
+            NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(user)));
+        }
+
+        public async Task MarkUserAsLoggedOutAsync()
+        {
+            await _localStorage.DeleteAsync(StorageKey);
+            NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(_anonymous)));
+        }
+    }
+}
@@ -1,6 +1,7 @@
 using QuantEngine.Web.Components;
 using QuantEngine.Web.Services;
 using QuantEngine.Infrastructure.Data;
+using Microsoft.AspNetCore.Components.Authorization;
 using QuantEngine.Infrastructure.Repositories;
 using QuantEngine.Infrastructure.Services;
 using QuantEngine.Core.Interfaces;
@@ -26,6 +27,11 @@ builder.Host.UseSerilog();
 builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

+// Authentication and Custom State Provider
+builder.Services.AddCascadingAuthenticationState();
+builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthenticationStateProvider>();
+builder.Services.AddAuthorizationCore();
+
 // Fluent UI Services
 builder.Services.AddFluentUIComponents();

@@ -8,5 +8,9 @@
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DefaultConnection": "Host=127.0.0.1;Database=giteadb;Username=gitea;Password=;Search Path=quantengine;"
+  },
+  "AdminSettings": {
+    "Username": "admin",
+    "Password": "quant123!"
  }
 }