AJAX 및 JSON 으로 로그인 확인 기능 구현

소개

이 프로젝트에서는 AJAX 와 JSON 데이터 전송을 사용하여 로그인 인증 기능을 구현하는 방법을 배우게 됩니다. 이 프로젝트는 로그인 양식을 만들고, AJAX 를 사용하여 양식 제출을 처리하며, 서버 측에서 사용자의 로그인 자격 증명을 검증하는 것을 포함합니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

프로젝트 환경을 준비하고 필요한 파일 및 종속성을 설정하는 방법.
HTML 을 사용하여 AjaxJson.jsp 페이지에서 로그인 양식을 구현하는 방법.
jQuery 와 AJAX 를 사용하여 로그인 양식 제출을 처리하는 방법.
JSON 형식으로 로그인 데이터를 캡슐화하여 서버로 전송하는 방법.
서버에서 JSON 응답을 수신하고 처리하여 로그인 상태를 결정하는 방법.
로그인 결과에 따라 사용자를 적절한 페이지로 리디렉션하는 방법.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

전체 페이지 새로 고침 없이 AJAX 를 사용하여 서버로 데이터를 전송합니다.
클라이언트와 서버 간의 데이터 전송을 위해 JSON 데이터 형식을 사용합니다.
클라이언트 측에서 양식 제출 및 사용자 입력 유효성 검사를 처리합니다.
서버의 응답을 처리하고 사용자 인터페이스를 적절하게 업데이트합니다.
완전한 로그인 인증 기능을 만들기 위해 클라이언트 측 및 서버 측 구성 요소를 통합합니다.

프로젝트 환경 준비

이 단계에서는 프로젝트 환경을 준비하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

랩 환경을 열고 다음 명령을 사용하여 AjaxJsonProject 디렉토리로 이동합니다:
```
cd AjaxJsonProject/AjaxJsonProject
```
다음 명령으로 Tomcat 서버를 시작합니다:
```
mvn tomcat7:run
```
환경 상단의 Web 8080 탭으로 전환하여 프로젝트가 실행 중인지 확인합니다.

✨ 솔루션 확인 및 연습

로그인 폼 구현

이 단계에서는 AjaxJson.jsp 페이지에서 로그인 양식을 구현하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

AjaxJsonProject/AjaxJsonProject/src/main/webapp 디렉토리에서 AjaxJson.jsp 파일을 엽니다.

다음 HTML 코드를 추가하여 로그인 양식을 만듭니다:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
</head>
<body>
    <h2>Login Form</h2>
    <form id="loginForm">
        <label for="userName">Username:</label>
        <input type="text" id="userName" name="userName"><br><br>

        <label for="userPwd">Password:</label>
        <input type="password" id="userPwd" name="userPwd"><br><br>

        <input type="submit" value="Login">
    </form>
</body>
</html>

<head> 섹션에 다음 스크립트 태그를 추가하여 jQuery 라이브러리를 포함합니다:
```
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
```

✨ 솔루션 확인 및 연습

AJAX 를 이용한 로그인 폼 전송 처리

이 단계에서는 AJAX 를 사용하여 로그인 양식 제출을 처리하는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

AjaxJson.jsp 파일의 <script> 태그 안에 다음 JavaScript 코드를 추가합니다:

<script>
    $(document).ready(function(){
        $("#loginForm").submit(function(event){
            // Prevent the default form submission behavior
            event.preventDefault();

            // Get the entered username and password
            var $userName = $("#userName").val();
            var $userPwd = $("#userPwd").val();

            // Check if the username and password are empty
            if($userName.trim() === "" || $userPwd.trim() === ""){
                alert("Username and password cannot be empty");
                return;
            }

            // Encapsulate the data to be sent in JSON format
            var data = {
                "u_name": $userName,
                "u_pwd": $userPwd
            };

            // Send an AJAX request
            $.ajax({
                type: "POST",
                url: "/AJAXJSONLoginServlet",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function(response){
                    // Check if the login was successful based on the returned data
                    if(response.code === 200){
                        alert("Login successful");
                        // Redirect to index.jsp after successful login
                        window.location.href = "index.jsp";
                    } else {
                        alert("Incorrect username or password");
                    }
                },
                error: function(xhr, status, error){
                    console.error("AJAX request failed: " + status + ", " + error);
                }
            });
        });
    });
</script>

이 코드는 기본 양식 동작을 방지하고, 입력된 사용자 이름과 비밀번호를 가져와 /AJAXJSONLoginServlet 엔드포인트로 AJAX 요청을 전송하여 양식 제출을 처리합니다.
백엔드는 code 속성이 있는 JSON 응답을 반환합니다. 코드가 200 이면 로그인이 성공하고 사용자는 index.jsp 페이지로 리디렉션됩니다. 코드가 200 이 아니면 로그인이 실패하고 오류 메시지가 표시됩니다.