[게시판 만들기] 로그인 화면(Login)

Login화면

<%@ Page Title="Login" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Board.Login" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <style>
        .add_button{
            padding: 8px 15px;
            background-color:#000;
            border-radius:4px;
            color:#fff;
            cursor:pointer;
            margin-left:20px;
            vertical-align:middle;
            font-size: 16px;
        }
    </style>
    <h2><%: Title %>.</h2>
    <input type="text" id="txt_id" placeholder="아이디" />
    <input type="password" id="txt_pw" placeholder="비밀번호" />
    <a class="add_button" onclick="fn_login();">로그인</a>
    <a class="add_button" runat="server" href="~/Add.aspx">회원가입</a>
    
    
    <script>
        //로그인
        function fn_login() {
            let obj = {};
            obj.userId = $("#txt_id").val();
            obj.pwd = $("#txt_pw").val();

            $.ajax({
                url: '/API.aspx/Login',
                data: JSON.stringify({ context: obj }),
                type: "POST",
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    let result = JSON.parse(data.d);
                    if (result === null) {
                        alert("계정 정보가 잘못 되었습니다.");
                        return''
                    }
                    localStorage.setItem('loginID', result.userId);
                    localStorage.setItem('loginName', result.userName);
                    alert("로그인 성공!");
                    location.href = "/";
                },
                error: function (xhr, status, error) {
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                }
            })
        }
    </script>
</asp:Content>

login.aspx 스크립트

 

ajax에서 API.aspx의 Login 메소드를 사용할 것이기 때문에URL 부분에 해당 경로를 입력해준다.

로그인 정보를 obj에 배열 형식으로 대입하고 ajax에서 data 부분에 JSON.stringify({context:obj)} 형식으로 DB에 전달한다.

 

스크립트가 실행되고 성공적으로 실행됐을 때 success부분의 함수가 실행되며 JSON.parse(data.d)를 result 변수에 넣어

원하는 방식으로 사용할 수 있다.

 

추후 다른 페이지에서 로그인 상태 값이 필요한 경우를 생각해서 session 기능으로 localStorage.setItem을 사용하였다.

localStorage.setItem('세션이름',값) 형식으로 입력하여 필요한 페이지에서 세션이름으로 사용할 수 있다.

 

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Diagnostics;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

using Newtonsoft.Json;

namespace Board
{
    public partial class API : System.Web.UI.Page
    {
        //로그인
        [WebMethod]
        public static string Login(LoginContext context)
        {
            var db = new DB();
            var result = db.Login(context);

            var jsonResult = JsonConvert.SerializeObject(result);
            return jsonResult;
        }
     }
}

API.aspx.cs

 

먼저 Nuget 패키지에서 Newtonsoft.Json이 설치되었는지 확인하고 상단에 using Newtonsoft.Json을 선언해준다.

login페이지에서 ajax를 사용하여 API.aspx.cs의 Login 메소드를 실행하게 되면 이전에 로그인 관련된 정보를 파라미터 값으로 받아와서 DB.cs 스크립트의 Login 메소드에 넘겨주고 그 결과 값을 직렬화하여 반환한다.

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using Dapper;
using System.Data;
using System.Data.SqlClient;

namespace Board
{
    public class DB
    {
        private string connString = "server= ip;uid= ;pwd= ;database= ";

        //로그인
        public Tuser Login(LoginContext context)
        {
            var result = new Tuser();
            
            using (var connection = new SqlConnection(connString))
            {
                result = connection.Query<Tuser>("proc_getLogin", context, commandType:
                    CommandType.StoredProcedure).FirstOrDefault();
            }
            return result;
        }
     }
}

DB.cs

Nuget 패키지에서 Dapper를 설치해준다.

.NET Framework의 경우 system.data.sqlclient 가 설치되어 있기 때문에 별도로 설치하지 않고 사용할 수 있다.

(.NET Core의 경우엔 설치해줘야함)

 

전역변수 connString에 데이터베이스 관련 정보를 입력하고 Login메소드를 생성하여 ssms의 저장 프로시저를 실행할 수 있도록 한다.

받은 파라미터 값 context를 넘겨주고 데이터베이서에서 처리하여 값을 가져온다.

FirstOrDefautl를 사용하여 프로시저 실행 시 첫번째 값을 가져오거나 값이 없으면 default 값을 가져온다.

 

namespace Board
{
    public class Tuser
    {
        public int seq { get; set; }
        public string userId { get; set; }
        public string pwd { get; set; }
        public string userName { get; set; }
    }

    public class LoginContext
    {
        public string userId { get; set; } 
        public string pwd { get; set; }
    }

    public class UserInsertContext
    {
        public string userId { get; set; }
        public string pwd { get; set; }
        public string userName { get; set; }
    }
}

Tuser.cs