Spring Boot 3.1 & Spring Security 6: 로그인 & 메인 페이지 컨트롤러 (9편)

로그인 뷰를 보여주고 action을 실행시킬 로그인 컨트롤러와 메인페이지를 보여주게될 메인 컨트롤러를 작성한다.

1. @Controller - 로그인, 메인페이지 컨트롤러

1-1. LoginController

이 코드는 사용자의 로그인 및 로그아웃을 관리하는 컨트롤러이다. Spring의 @Controller 어노테이션을 사용하여 웹 요청을 처리하는 클래스임을 나타낸다.

@Slf4j
@RequiredArgsConstructor
@Controller
public class LoginController {


    /**
     * [View] 로그인 페이지를 엽니다.
     */
    @GetMapping("/login")
    public String login() {
        return "login";
    }

    /**
     * [Action] 로그인 프로세스를 동작시킨다.
     */
    @PostMapping("/user/login")
    public ResponseEntity<?> authenticateUser() {
        return ResponseEntity.ok().build();
    }

    /**
     * [Action] 로그아웃 프로세스를 동작시킨다.
     */
    @GetMapping("/user/logout")
    public String logout(HttpServletResponse response) {
        // JWT 토큰을 저장하는 쿠키의 값을 삭제
        Cookie jwtCookie = new Cookie("jwt", null);
        jwtCookie.setMaxAge(0);  // 쿠키의 유효기간을 0으로 설정하여 즉시 삭제
        jwtCookie.setPath("/");
        response.addCookie(jwtCookie);

        return "redirect:/login";  // 로그인 페이지로 리다이렉트
    }


}

로그인 페이지 뷰:
- @GetMapping("/login"): HTTP GET 요청을 "/login" 경로로 받아들인다.
- public String login(): 이 메서드는 **"login"** 문자열을 반환한다. 이는 Spring MVC에서 "login"이라는 이름의 뷰(예: login.html)를 렌더링하라는 의미이다.
로그인 프로세스:
- @PostMapping("/user/login"): HTTP POST 요청을 "/user/login" 경로로 받아들인다.
- public ResponseEntity<?> authenticateUser(): 현재 코드에서는 로그인 프로세스의 구체적인 로직이 구현되어 있지 않다. 단순히 OK 상태 코드를 반환하는 응답을 생성한다. 왜냐하면 “/user/login”으로 들어오면 CustomAuthenticationFilter 에서 이 경로를 메서드를 처리하기 때문이다. 그래서 딱히 로직이 필요없다.
로그아웃 프로세스:
- @GetMapping("/user/logout"): HTTP GET 요청을 "/user/logout" 경로로 받아들인다.
- public String logout(HttpServletResponse response): 이 메서드는 로그아웃 프로세스를 처리한다.
  - 쿠키에서 "jwt"라는 이름의 쿠키를 찾아 값을 null로 설정하고, 유효 기간을 0으로 설정하여 즉시 삭제한다.
  - response.addCookie(jwtCookie): 응답에 쿠키를 추가하여 클라이언트에게 전송한다.
  - 마지막으로 "redirect:/login"을 반환하여 사용자를 로그인 페이지로 리다이렉트시킨다.

이 컨트롤러는 기본적인 로그인 및 로그아웃의 뷰와 액션을 처리한다.

1-2. login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Login</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .login-form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
        }
        .login-form input, .login-form button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        .login-form button {
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
        }
        .login-form button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="login-form">
    <div>
        <label>loginId: </label>
        <input type="text" id="loginId"/>
    </div>
    <div>
        <label>Password: </label>
        <input type="password" id="password"/>
    </div>
    <div>
        <button id="login">Login</button>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('#login').click(function() {
            let loginId = $('#loginId').val();
            let password = $('#password').val();

            $.ajax({
                url: '/user/login',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({
                    loginId: loginId,
                    password: password
                }),
                success: function(data, textStatus, jqXHR) {
                    window.location.href = "/main/rootPage";
                },
                error: function(err) {
                    console.log(err);
                }
            });
        });
    });
</script>

</body>
</html>

JavaScript
- 문서가 준비되면 ($(document).ready), "Login" 버튼(#login)을 클릭하면 아래의 동작이 수행된다.
  1. 입력 필드에서 loginId와 password 값을 가져온다.
  2. 이 값을 사용하여 서버에 로그인 요청을 보낸다. 요청은 /user/login 엔드포인트로 POST 방식으로 전송되며, 데이터는 JSON 형식이다.
  3. 요청이 성공하면 사용자를 /main/rootPage로 리다이렉트한다.
  4. 요청이 실패하면 오류를 콘솔에 출력한다.
이 코드는 사용자가 로그인 정보를 입력하고 "Login" 버튼을 클릭하면 서버에 로그인 요청을 보내는 기본적인 로그인 페이지를 나타낸다.

1- 3. MainController

이 코드는 너무 간단해서 설명을 생략하겠다. 단순히 rootPage라는 html을 로딩하는 컨트롤러다.

@RequestMapping("/main")
@RequiredArgsConstructor
@Controller
public class MainController {

    @GetMapping("/rootPage")
    public String rootPage() {

        return "rootPage";
    }
}

1-4. rootPage.html

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .logout-button {
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
        }
        .logout-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div>
    <button id="logout" class="logout-button">Logout</button>
</div>

<script>
    $(document).ready(function() {
        $('#logout').click(function() {
            // 로그아웃 요청을 서버에 전송
            $.ajax({
                url: '/user/logout',
                type: 'GET',
                success: function() {
                    // 로그인 페이지로 리다이렉트
                    window.location.href = '/login';
                },
                error: function(err) {
                    console.log(err);
                }
            });
        });
    });
</script>

</body>
</html>

로그아웃 버튼:
- "Logout" 버튼이 있으며, 이 버튼을 클릭하면 아래에 정의된 JavaScript 함수가 실행된다.
JavaScript:
- 문서가 준비되면 ($(document).ready), "Logout" 버튼(#logout)을 클릭하면 아래의 동작이 수행된다.
  1. 서버에 로그아웃 요청을 보낸다. 요청은 /user/logout 엔드포인트로 GET 방식으로 전송된다.
  2. 요청이 성공하면 사용자를 로그인 페이지(/login)로 리다이렉트한다.
  3. 요청이 실패하면 오류를 콘솔에 출력한다.

이 코드는 로그인 한 사용자가 로그아웃 할 수 있는 기능을 제공하는 메인 페이지를 나타낸다. 로그아웃 버튼을 클릭하면 서버에 로그아웃 요청을 보내고, 요청이 성공하면 로그인 페이지로 리다이렉트된다.

2023.08.08 - [SpringBoot 개발/Spring Security] - Spring Boot 3.1 & Spring Security 6: 로그인 프로세스 및 JWT 토큰 동작 설명 (10편)

Spring Boot 3.1 & Spring Security 6: 로그인 프로세스 및 JWT 토큰 동작 설명 (10편)

지금까지 만든 시큐리티의 동작을 설명하겠다. 1. 로그인 과정 로그인 페이지 접근: 사용자는 웹 브라우저에서 로그인 페이지(/login)에 접근한다. 로그인 페이지에는 사용자 이름과 비밀번호를

curiousjinan.tistory.com

2023.08.07 - [SpringBoot 개발/Spring Security] - Spring Boot 3.1 & Spring Security 6: 서비스 레이어와 보안 DTO 구현 (8편)

Spring Boot 3.1 & Spring Security 6: 서비스 레이어와 보안 DTO 구현 (8편)

서비스 레이어의 클래스와 시큐리티에서 사용할 전용 dto 클래스를 구현한다. 1. CustomUserDetailsService - UserDetailsService 구현 이 코드는 Spring Security의 UserDetailsService 인터페이스를 구현하여 사용자의

curiousjinan.tistory.com

'Spring Security' 카테고리의 다른 글

Spring Security 6 이해하기: 동작 원리와 보안 기능 탐구 (0)	2023.09.04
Spring Boot 3.1 & Spring Security 6: 로그인 프로세스 및 JWT 토큰 동작 설명 (10편) (0)	2023.08.08
Spring Boot 3 & Security 6 시리즈: UserDetailsService, DTO 작성하기 (8편) (0)	2023.08.07
Spring Boot 3 & Security 6 시리즈: JWT Util 클래스 작성 (7편) (0)	2023.08.07
Spring Boot 3 & Security 6 시리즈: JWT 검증 인터셉터 작성하기 (6편) (0)	2023.08.07

로그인 뷰를 보여주고 action을 실행시킬 로그인 컨트롤러와 메인페이지를 보여주게될 메인 컨트롤러를 작성한다.

1. @Controller - 로그인, 메인페이지 컨트롤러

'Spring Security' 카테고리의 다른 글

티스토리툴바