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

2023. 8. 8. 00:21·Spring/Spring Security
반응형

로그인 뷰를 보여주고 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";  // 로그인 페이지로 리다이렉트
    }


}
  1. 로그인 페이지 뷰:
    • @GetMapping("/login"): HTTP GET 요청을 "/login" 경로로 받아들인다.
    • public String login(): 이 메서드는 **"login"** 문자열을 반환한다. 이는 Spring MVC에서 "login"이라는 이름의 뷰(예: login.html)를 렌더링하라는 의미이다.

  2. 로그인 프로세스:
    • @PostMapping("/user/login"): HTTP POST 요청을 "/user/login" 경로로 받아들인다.
    • public ResponseEntity<?> authenticateUser(): 현재 코드에서는 로그인 프로세스의 구체적인 로직이 구현되어 있지 않다. 단순히 OK 상태 코드를 반환하는 응답을 생성한다. 왜냐하면 “/user/login”으로 들어오면 CustomAuthenticationFilter 에서 이 경로를 메서드를 처리하기 때문이다. 그래서 딱히 로직이 필요없다.

  3. 로그아웃 프로세스:
    • @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>
  1. 로그아웃 버튼:
    • "Logout" 버튼이 있으며, 이 버튼을 클릭하면 아래에 정의된 JavaScript 함수가 실행된다.

  2. 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 > 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
'Spring/Spring Security' 카테고리의 다른 글
  • Spring Security 6 이해하기: 동작 원리와 보안 기능 탐구
  • Spring Boot 3.1 & Spring Security 6: 로그인 프로세스 및 JWT 토큰 동작 설명 (10편)
  • Spring Boot 3 & Security 6 시리즈: UserDetailsService, DTO 작성하기 (8편)
  • Spring Boot 3 & Security 6 시리즈: JWT Util 클래스 작성 (7편)
Stark97
Stark97
문의사항 또는 커피챗 요청은 링크드인 메신저를 보내주세요! : https://www.linkedin.com/in/writedev/
  • Stark97
    오늘도 개발중입니다
    Stark97
  • 전체
    오늘
    어제
    • 분류 전체보기 (248) N
      • 개발지식 (20)
        • 스레드(Thread) (8)
        • WEB, DB, GIT (3)
        • 디자인패턴 (8)
      • JAVA (21)
      • Spring (88)
        • Spring 기초 지식 (35)
        • Spring 설정 (6)
        • JPA (7)
        • Spring Security (17)
        • Spring에서 Java 활용하기 (8)
        • 테스트 코드 (15)
      • 아키텍처 (6)
      • MSA (15)
      • DDD (12) N
      • gRPC (9)
      • Apache Kafka (18)
      • DevOps (23)
        • nGrinder (4)
        • Docker (1)
        • k8s (1)
        • 테라폼(Terraform) (12)
      • AWS (32)
        • ECS, ECR (14)
        • EC2 (2)
        • CodePipeline, CICD (8)
        • SNS, SQS (5)
        • RDS (2)
      • notion&obsidian (3)
      • AI 탐험대 (1)
      • 팀 Pulse (0)
  • 링크

    • notion기록
    • 깃허브
    • 링크드인
  • hELLO· Designed By정상우.v4.10.0
Stark97
Spring Boot 3.1 & Spring Security 6: 로그인 & 메인 페이지 컨트롤러 (9편)
상단으로

티스토리툴바