본문 바로가기
ASP.NET&C#/ASP.NET MVC

[ASP.NET/MVC CORE] #15 세션으로 로그인 페이지를 구현

미나라이 2021. 12. 26. 21:45

[ASP.NET/MVC CORE] #15 세션으로 로그인 페이지를 구현

안녕하세요 미나라이입니다.

 

이번에는 ASP.NET CORE MVC Web에서 세션을 이용한 로그인 페이지 구현을 해 보도록 하겠습니다.

프로젝트 환경

OS : Windows 10

IDE : Visual Studio Code 1.62.2

.Net SDK : 5.0.403

.Net Runtime : .NetCore.App 5.0.10 / 5.0.12

 

세션 기본 설정

먼저 세션 기본 설정입니다. 

세션 이름은 디버깅 창에서 세션이 활성화 되었을 때 표시되는 이름입니다.

세션 안에 값은 별도로 설정 해 주어야 합니다.

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    // 세션 서비스 정의
    services.AddSession(options => { 
        // 세션 이름
        options.Cookie.Name = "testSession"; 
        // 세션 지속 시간(1시간)
        options.IdleTimeout = TimeSpan.FromHours(1);
    });
    services.AddControllersWithViews();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
	...
    // 파이프라인에서 세션을 사용
    app.UseSession();
    ...
}

컨트롤러에서 세션 값을 설정 해 봅시다.

HomeController.cs

public IActionResult Index()
{
    // 세션 활성화
    HttpContext.Session.SetString("test", "테스트입니다.");
    return View();
}

View에서 설정한 세션 값을 확인 해 봅시다

Index.cshtml

<H4>세션 데이터 : @Context.Session.GetString("test")</H4>

출력화면

디버깅 창

세션이 활성화 되어있는 것을 확인 할 수 있습니다.

Startup.cs에 설정을 해 놓아도 값을 설정하지 않으면 활성화 되지 않습니다.

세션을 이용한 로그인 페이지 구현 예제

이번에는 세션을 이용한 로그인 페이지 구현을 해 보겠습니다.

로그인 세션이 없을 경우 로그인 페이지로 강제이동

로그인을 안 한 유저는 페이지 내용을 볼 수 없도록 로그인 페이지로 강제 이동 시키는 예제입니다.

ASP.NET MVC에서는 View페이지를 호출 할 때 _ViewStart.cshtml 파일을 거치게 됩니다.

해당 파일에 세션 조건을 주어서 세션이 없을 경우에는 로그인 페이지로 강제 이동시키는 기능입니다.

_ViewStart.cshtml

@{
    Layout = "_Layout";
    @using Microsoft.AspNetCore.Http 

    if(Context.Request.Path != "/Home/Login")
    {
        // 로그인 세션이 존재하지 않으면 로그인 페이지로 이동
        if(Context.Session.GetString("userid") == null)
        {
            Context.Response.Redirect("/Home/Login");
        }
    }
}

위와 같이 설정 해 놓으면 컨트롤러를 거치고 뷰를 렌더링 할 때 로그인 페이지로 강제로 이동하게 됩니다.

Login.cshtml

로그인 파일 예제입니다. 로그인 페이지는 레이아웃 메뉴를 사용하지 않기 때문에 null처리 해 줍니다.

그리고 Layout을 쓰지 않기 때문에 공통모듈 링크가  안되기 때문에 별도로 해 주어야 합니다.

@{
    // 로그인 페이지에서는 레이아웃을 사용하지 않음
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login - TestProject_Session</title>
    <!-- 로그인 페이지는 Layout을 사용하지 않기 때문에 필요한 링크를 전부 달아 주어야 한다 -->
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
    <form id="loginForm">
        <div class="form-group">
            <label for="exampleInputUserID">User ID</label>
            <input type="text" name="userid" class="form-control" placeholder="User ID">
        </div>
            <div class="form-group">
            <label for="exampleInputPassword">Password</label>
            <input type="password" name="password" class="form-control" placeholder="Password">
        </div>
        <button type="button" id="loginCheck" class="btn btn-primary">Login</button>
    </form>
</div>
</body>
</html>

로그인 페이지로 강제 이동 된 모습

URL로 강제로 들어가려고 해도 세션정보가 존재하지 않으면 로그인 페이지로 강제 이동 됩니다.

로그인 및 관리자 & 유저 권한 구분 구현

이번에는 로그인 처리 및 관리자 유저 로그인 구분처리를 구현 해 보도록 하겠습니다.

login.cshtml

로그인 페이지에 스크립트를 추가 합니다.

ajax통신을 이용해서 로그인 정보를 가져온 후 처리를 해 보도록 하겠습니다.

$("#loginCheck").click(function() {
    var formData = $('#loginForm').serialize();
    $.ajax({
        url: "/Home/LoginCheck",
        data: formData,
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        type: "POST",
        processData: false,
        success: function (data) {
            if(data == 1) {
                location.replace('/Home/Index');
            }else if (data == 0) {
                alert("ID또는 비밀번호를 확인 해 주세요.");
            }
        },
        error: function (data) {
            alert(data);
        }
    });
});

HomeController.cs

컨트롤러에서 로그인 한 데이터를 확인 후 세션에 저장합니다.

role이라는 세션값을 설정해서 유저인지 관리자인지 구분 해 보았습니다.

public JsonResult LoginCheck(UserInfo user)
{
    int result = 0;

    // 로그인 정보 확인
    if(user.password.Equals("1111"))
    {
        // 관리자인지 유저인지 확인
        if(user.userid.Equals("admin"))
        {
            // 세션정보 추가
            HttpContext.Session.SetString("userid", user.userid);
            HttpContext.Session.SetString("role", "admin");
            result = 1;
        }
        else if(user.userid.Equals("user"))
        {
            // 세션정보 추가
            HttpContext.Session.SetString("userid", user.userid);
            HttpContext.Session.SetString("role", "user");
            result = 1;
        }
    }

    return Json(result);
}

_ViewStart.cshtml

로그인 검증이 성공해서 페이지 이동 할 경우의 처리입니다. 

뷰 시작 파일에 유저 관리자 메뉴를 구분해주는 처리를 추가합니다.

유저는 _Layout.cshtml파일을 사용하고

관리자는 _Layout2.cshtml파일을 사용하도록 했습니다.

@{
    Layout = "_Layout";
    @using Microsoft.AspNetCore.Http 

    if(Context.Request.Path != "/Home/Login")
    {
        // 로그인 세션이 존재하지 않으면 로그인 페이지로 이동
        if(Context.Session.GetString("userid") == null)
        {
            Context.Response.Redirect("/Home/Login");
        }
        else
        {
            // 유저 권한 확인(관리자일 경우 관리자 전용 메뉴 레이아웃 사용)
            if(Context.Session.GetString("role").Equals("admin"))
            {
                Layout = "_Layout2";
            }
        }
    }
}

Index.cshtml

로그인 후 페이지 예제입니다.

<H4>안녕하세요 @Context.Session.GetString("userid")님</H4>
<br />
<H4>귀하는 @(Context.Session.GetString("role") == "admin"?"관리자":"유저") 입니다.</H4>
<br />
<button type="button" id="logout" class="btn btn-primary">Logout</button>

출력화면

관리자 로그인

관리자로 로그인 했기 때문에 관리자 전용 메뉴가 활성화 되어 있는 것을 확인 할 수 있습니다.

유저 로그인

유저의 경우 관리자 전용 메뉴가 없는 것을 확인 할 수 있습니다.

로그아웃

마지막으로 로그아웃 구현입니다.

Index.cshtml

로그아웃 버튼을 누르면 로그아웃 처리 컨트롤러로 이동합니다.

<button type="button" id="logout" class="btn btn-primary">Logout</button>

<script>
    $("#logout").click(function() {
        location.href = '/Home/Logout';
    });
</script>

HomeController.cs

로그아웃 컨트롤러입니다.

세션 정보를 지우고 로그인 페이지로 다시 이동합니다. 

public IActionResult Logout()
{
    // 세션 정보 삭제
    HttpContext.Session.Remove("userid");
    HttpContext.Session.Remove("role");
    
    // 로그인 컨트롤러로 리다이렉트
    return RedirectToAction("Login");
}

샘플 프로젝트

TestProject_Session.zip
1.23MB

이상으로 간단하게 세션을 이용한 로그인 구현을 해 보았습니다.

728x90
반응형
저작자표시

'ASP.NET&C# > ASP.NET MVC' 카테고리의 다른 글

[ASP.NET CORE/MVC] 홈페이지 제작 #2 Log4net설정하기  (0) 2022.07.24
[ASP.NET CORE/MVC] 홈페이지 제작 #1 개발 환경 구축  (0) 2022.07.24
[ASP.NET/MVC CORE] #14 MIME 맵핑하기  (0) 2021.12.21
[ASP.NET CORE/MVC] #13 컨트롤러에서 받은 데이터를 Javascript변수에 넣기  (0) 2021.12.19
[ASP.NET CORE/MVC] #12 AJAX로 JSON데이터를 컨트롤러로 전송하기  (0) 2021.12.18

'ASP.NET&C#/ASP.NET MVC' Related Articles

티스토리툴바