제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

세번째는 세션을 이용한 로그인 구현입니다.

서론

이전 쿠키 포스팅에서 STATELESS한 HTTP 프로토콜에서 STATEFUL한 서비스를 위한 장치로 헤더에 쿠키를 저장하는 로직으로 설계하였습니다.

하지만 해당 방법은 개인 정보들을 브라우저 단에 저장하여 위변조 및 도용이 쉽다는 문제가 있습니다. 보안적인 부분은 클라이언트가 아닌 서버에서 관리하여 외부로 해당 개인정보를 숨겨 보안성을 높여야합니다. 따라서 클라이언트는 키만 가지고 있으며 해당 정보는 서버에서 관리하고 있는 방법을 세션이라고 합니다.

저는 이 포스팅에서 세션을 두가지 방법으로 구현합니다. 첫번째는 쿠키를 이용한 세션속성 기반으로 세션을 구현할 예정입니다.

세션

정의

세션(Session)서버가 클라이언트의 상태를 유지하기 위해 일정 기간 동안 저장하는 정보를 의미합니다. 클라이언트의 요청마다 동일한 사용자임을 식별할 수 있도록 하는 상태 관리 방식입니다. 보통 서버는 클라이언트가 전달한 세션 ID를 기반으로 특정 사용자와 연결된 정보를 조회합니다.

 

역할

  • 사용자 식별: 세션 ID를 통해 동일 클라이언트의 요청임을 서버가 식별합니다.
  • 상태 유지: 로그인 상태, 장바구니 정보 등 사용자의 상태 정보를 서버에서 저장 및 관리합니다.
  • 보안 강화: 민감한 정보는 서버에 저장하고, 클라이언트는 세션 ID만 전달하므로 정보 위변조 위험을 줄입니다.

구조

세션 구조

 

  • 클라이언트 측
    • 브라우저는 서버로부터 세션 ID를 받아 저장(주로 쿠키에 저장)하고, 이후 요청마다 세션 ID를 포함하여 서버에 전달합니다.
  • 서버 측
    • 서버는 세션 저장소(메모리, 데이터베이스 등)에 세션 ID와 상태 정보를 저장하고, 세션 ID를 키로 사용하여 클라이언트 데이터를 관리합니다.

 

장점

  1. 보안성
    • 민감한 데이터가 서버에 저장되므로 클라이언트에서 정보가 노출될 위험이 줄어듭니다.
  2. 유연성
    • 상태 정보는 서버에 저장되므로 클라이언트가 브라우저를 닫더라도 세션이 만료되지 않으면 상태를 유지할 수 있습니다.
  3. 확장성
    • 서버의 세션 저장소를 확장하여 대량의 사용자 상태를 관리할 수 있습니다.

단점

 

  • 서버 부담
    • 세션 데이터를 서버에서 관리하므로 사용자 수가 많아질수록 서버 메모리나 저장소 사용량이 증가합니다.
  • 스케일링 문제
    • 서버가 분산 환경일 경우, 세션 데이터를 공유하기 위한 추가 작업(예: 세션 클러스터링)이 필요합니다.
  • 만료 관리
    • 세션 만료 시간 설정이 필요하며, 만료되지 않은 오래된 세션 데이터가 서버의 리소스를 점유할 수 있습니다.

 

Session-login(쿠키 기반)

Frontend

localhost:3000/login-session에 접근하기 위해 routepath를 지정합니다.

// RoutePath.ts
export enum RoutePath {
    HOMEPAGE = "/",
    COOKIE = "/login-cookie",
    SESSION = "/login-session"
}

// AppRoutes.tsx

const AppRoutes = () => {
    return (
      <Router>
          <Routes>
              <Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
              <Route path={RoutePath.COOKIE} element={<CookieLogin />} />
              <Route path={RoutePath.SESSION} element={<SessionLogin />} />
          </Routes>
      </Router>
    )
  }
  
  export default AppRoutes

로그인과 로그아웃 기능입니다. 이전 쿠키와 동일하지만 credential을 include 속성을 넣어줍니다.

const loginV1 = async () => {
    try {
        const response = await fetch('http://localhost:8080/session/loginV1', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                username: username,
                password: password
            }),
            credentials: 'include'
        });

        if (response.ok) {
            const data = await response.text(); // 서버의 응답 메시지
            console.log(data);
            setLoginMessage(data);
            setIsAuthenticated(true);
        } else {
            const errorData = await response.text();
            setLoginMessage('Login failed: ' + errorData);
        }
    } catch (error) {
        setLoginMessage('Login failed: ' + error);
    }
};

// 로그아웃 V1 (세션 만료)
const logoutV1 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/logoutV1', {
          method: 'POST',
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          console.log(data);
          setLogoutMessage(data);
          setIsAuthenticated(false);
      } else {
          const errorData = await response.text();
          setLogoutMessage('Logout failed: ' + errorData);
      }
  } catch (error) {
      setLogoutMessage('Logout failed: ' + error);
  }
};

Backend

마찬가지로 username과 password를 토대로 member가 존재하면 SessionManager를 통해 쿠키를 생성하여 response에 넣어줍니다.

@Slf4j
@RestController
@RequestMapping("/session")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*", allowCredentials = "true")
public class SessionController {

    private final AuthService authService;
    private final SessionManager sessionManager;


    @PostMapping("/loginV1")
    public ResponseEntity<String> loginV1(@RequestParam String username,
                                          @RequestParam String password,
                                          HttpServletResponse response) {
        log.info("session cookie login id: {}, password: {}", username, password);

        // Authorization User
        Member member = authService.login(username, password);

        if (member != null) {
            sessionManager.createSession(member, response);
            return ResponseEntity.ok("Success session-login");
        }

        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail login");
    }

    @PostMapping("/logoutV1")
    public ResponseEntity<String> logoutV1(HttpServletRequest request) {
        log.info("logout session cookie");

        if (sessionManager.expire(request)) {
            return ResponseEntity.ok("Success session-logout");
        }

        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Fail logout");
    }
}

이 프로젝트에서는 sessionManager를 메모리에서 관리합니다. 쿠키 이름을 spring-react-auth의 쿠키로 sessionId를 UUID 값으로 넣어줍니다. 

@Component
public class SessionManager {

    public static final String SESSION_COOKIE_NAME = "spring-react-auth";
    private final Map<String, Object> sessionStore = new ConcurrentHashMap<>();

    public void createSession(Object value, HttpServletResponse response) {
        // Generate a unique session ID and store the session data.
        String sessionId = UUID.randomUUID().toString();
        sessionStore.put(sessionId, value);

        // Create a session cookie with the generated session ID.
        Cookie sessionCookie = new Cookie(SESSION_COOKIE_NAME, sessionId);
        sessionCookie.setHttpOnly(true); // Enhance security by restricting client-side access
//        sessionCookie.setPath("/");      // Make the cookie accessible across the application
        response.addCookie(sessionCookie);
    }
    
    public boolean expire(HttpServletRequest request) {
        Cookie sessionCookie = findCookie(request, SESSION_COOKIE_NAME);
        System.out.println("sessionCookie = " + sessionCookie.getName());

        if (sessionCookie != null) {
            sessionStore.remove(sessionCookie.getValue());
            return true;
        }
        return false;
    }

    public Cookie findCookie(HttpServletRequest request, String cookieName) {
        if (request.getCookies() == null) {
            return null; // No cookies present in the request
        }
        return Arrays.stream(request.getCookies())
                .filter(cookie -> cookie.getName().equals(cookieName))
                .findFirst()
                .orElse(null);
    }
}

 

Session-login(속성 기반)

Frontend

로그인과 로그아웃 기능입니다. 앞선 기능들과 동일합니다.

// 로그인 V2 (세션 객체로 로그인)
const loginV2 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/loginV2', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: new URLSearchParams({
              username: username,
              password: password
          }),
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          setLoginMessage(data);
          setIsAuthenticated(true);
      } else {
          const errorData = await response.text();
          setLoginMessage('Login failed: ' + errorData);
      }
  } catch (error) {
      setLoginMessage('Login failed: ' + error);
  }
};
  
// 로그아웃 V2 (세션 무효화)
const logoutV2 = async () => {
  try {
      const response = await fetch('http://localhost:8080/session/logoutV2', {
          method: 'POST',
          credentials: 'include'
      });

      if (response.ok) {
          const data = await response.text(); // 서버의 응답 메시지
          setLogoutMessage(data);
          setIsAuthenticated(false);
      } else {
          const errorData = await response.text();
          setLogoutMessage('Logout failed: ' + errorData);
      }
  } catch (error) {
      setLogoutMessage('Logout failed: ' + error);
  }
};

Backend

이번에는 속성을 통해서 넣어줍니다. LOGIN_MEMBER의 속성에 member를 넣어주면 JSESSIONID가 할당됩니다.

@Slf4j
@RestController
@RequestMapping("/session")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "*", allowCredentials = "true")
public class SessionController {

    private final AuthService authService;
    private final SessionManager sessionManager;
    private final String LOGIN_MEMBER = "Spring-React-Session-Login";

    @PostMapping("/loginV2")
    public ResponseEntity<String> loginV2(@RequestParam String username,
                                          @RequestParam String password,
                                          HttpServletRequest request) {
        log.info("session Attribute login id: {}, password: {}", username, password);

        Member member = authService.login(username, password);
        if (member != null) {
            // Login success handling
            // Return the existing session if it exists; otherwise, create a new session
            HttpSession session = request.getSession();
            // Store login member information in the session
            session.setAttribute(LOGIN_MEMBER, member);

            return ResponseEntity.ok("Success session-login using request");
        }

        // Return an error response if login fails (optional: add this block for clarity)
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");
    }

    @PostMapping("/logoutV2")
    public ResponseEntity<String> logoutV2(HttpServletRequest request) {
        log.info("logout session Attribute");

        StringBuilder sb = new StringBuilder();
        sb.append("Success session-logout: ");

        HttpSession session = request.getSession(false);
        if (session != null) {
            Member member = (Member) session.getAttribute(LOGIN_MEMBER);
            System.out.println("session value: " + (member == null ? "not found member" : member.getUsername()));
            session.invalidate();
            sb.append("expire session");
        }

        return ResponseEntity.ok(sb.toString());
    }
}

 

결과

로그인 창(쿠키기반 세션)
쿠키 값이 제대로 할당된 것을 볼 수 있습니다.
속성을 기반으로 한 세션
JESSIONID가 설정된 것을 확인할 수 있습니다.
logout되어 쿠키가 없는 것을 확인할 수 있습니다.

깃허브 및 참조

제가 공부한 내용을 정리하는 블로그입니다.
아직 많이 부족하고 배울게 너무나도 많습니다. 틀린내용이 있으면 언제나 가감없이 말씀해주시면 감사하겠습니다😁

스프링부트와 리액트를 활용해 로그인을 구현 프로젝트를 진행합니다. 순서는
1. 프로젝트 초기화
2. 쿠키를 이용한 로그인 구현
3. 세션을 이용한 로그인 구현
4. JWT 토큰을 활용한 로그인 구현
입니다. 

첫번째는 프론트와 백엔드 설정입니다.

서론

로그인은 현대 웹 애플리케이션에서 필수적인 기능으로 자리 잡았습니다. 사용자 인증은 단순히 애플리케이션에 접근하기 위한 절차를 넘어, 보안, 데이터 보호, 그리고 맞춤형 서비스 제공의 핵심 역할을 담당합니다. 따라서 신뢰할 수 있고 효율적인 로그인 시스템을 설계하고 구현하는 것은 개발자의 중요한 과제 중 하나입니다.

이 포스팅에서는 로그인 시스템을 체계적으로 정리하고자 합니다. 이를 통해 로그인 시스템의 기본 원리부터 실제 구현 방법까지 폭넓게 다루고자 합니다.

프론트는 react를 사용하고 백엔드는 Spring Framework를 활용하여 다음과 같은 방식으로 로그인 시스템을 구현할 예정입니다:

  1. 쿠키와 세션을 이용한 상태 관리
  2. Spring Security를 활용한 인증 및 권한 부여
  3. OAuth2를 통한 소셜 로그인 연동

 

Frontend 설정

프론트는 리액트를 활용하고 언어는 TypeScript를 이용할 것입니다. 리액트 프로젝트를 생성하기 위해
npx create-react-frontend를 통해 프로젝트를 생성합니다.

해당 프로젝트에서 TypeScript를 사용하기 위해 tsconfig.json을 설정해줍니다.

 

tsconfig.json

{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": [
      "src"
    ]
  }

App.js 파일에서는 react-router-dom 라이브러리를 사용하여 애플리케이션의 라우팅을 설정합니다.
이 설정은 SPA(Single Page Application) 형태의 웹사이트에서 페이지 간 전환을 빠르고 부드럽게 구현할 수 있도록 해줍니다.
BrowserRouter, Routes, Route 등의 컴포넌트를 사용하여 라우트 경로와 해당 경로에 매핑된 컴포넌트를 정의합니다.

npm install react-route-dom을 통해 라이브러리 설치를 진행해줍니다.

 

 

App.js

import AppRoutes from "./pages/AppRoutes";

function App() {
  return (
      <AppRoutes />
  );
}

export default App;

AppRoutes.ts

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import { RoutePath } from '../interface/RoutePath';
import HomePage from './home/HomePage';

const AppRoutes = () => {
    return (
      <Router>
          <Routes>
              <Route path={RoutePath.HOMEPAGE} element={<HomePage />} />
          </Routes>
      </Router>
    )
  }
  
  export default AppRoutes

RoutePath.ts

export enum RoutePath {
    HOMEPAGE = "/",
}

HomePage.tsx 파일은 애플리케이션의 메인 페이지 역할을 하는 컴포넌트를 정의합니다.

이 페이지는 사용자가 사이트에 처음 방문했을 때 렌더링되는 기본 화면을 제공합니다.
HomePage 컴포넌트는 React를 사용하여 작성되며, 사용자가 볼 수 있는 다양한 콘텐츠와 네비게이션 링크들을 포함할 수 있습니다.

 

HomePage.tsx는 github를 참조하시길 바랍니다.

HomePage 화면

 

 

 

Backend 설정

백엔드는 Spring Boot 프레임워크를 기반으로 하며, 데이터 관리를 위해 JPA(Java Persistence API)를 사용하여 객체-관계 매핑을 지원합니다. 이를 통해 데이터베이스와의 상호작용을 더욱 간편하고 직관적으로 구현할 수 있습니다.

 

데이터베이스는 경량화된 H2 데이터베이스를 활용하여, 개발 및 테스트 단계에서 빠르고 효율적인 데이터 관리를 수행할 예정입니다. 이를 통해 초기 설정 및 테스트 과정을 간소화하고 생산성을 높일 수 있습니다.

 

start.spring.io에 해당 프로젝트를 생성해줍니다.

spring 프로젝트 생성

 

build.gradle은 다음과 같습니다. swagger를 위한 dependency는 넣어주지 않으셔도 됩니다.

build.gradle

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.3.5'
	id 'io.spring.dependency-management' version '1.1.6'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'

java {
	toolchain {
		languageVersion = JavaLanguageVersion.of(17)
	}
}

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	compileOnly 'org.projectlombok:lombok'
	runtimeOnly 'com.h2database:h2'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
	implementation group: 'org.springdoc', name: 'springdoc-openapi-starter-webmvc-ui', version: '2.6.0'
}

tasks.named('test') {
	useJUnitPlatform()
}

 

데이터베이스 h2 생성

경량화된 h2 데이터베이스를 사용할 것입니다. 해당 설치하기 위해 h2 데이터베이스를 다운로드 사이트로 이동합니다.

Platform-Independent.Zip을 클릭합니다

압축 파일을 해제 한 후 h2가 설치한 곳으로 이동하여 chmod 755 ./bin/h2.sh로 h2를 실행할 수 있는 권한을 설정해줍니다. bin 폴더로 이동 후 ./h2.sh를 통해 h2 데이터베이스를 실행해보면

h2 데이터베이스 콘솔

다음과 같은 콘솔창이 뜹니다. JDBC URL을 설정은 데이터베이스 생성입니다. 저는 auth라는 데이터베이스를 생성하기 위해 url을 auth로 변경해줍니다. 이후 연결을 해줍니다.

💡 만약 해당 창이 뜨지 않는다면 도메인 앞쪽을 localhost로 변경해줍니다.
http://218.38.137.27:8082/(...)
=> http://localhost:8082/(...)

 

Spring 프로젝트를 이동하여 application.yml을 다음과 같이 설정해줍니다.

application.yml

spring:
  datasource:
    url: jdbc:h2:tcp://localhost/~/auth
    username: sa
    password:
    driver-class-name: org.h2.Driver

  jpa:
    hibernate:
      ddl-auto: create
    properties:
      hibernate:
        show_sql: true
        format_sql: true

logging.level:
  org.hibernate.SQL: debug
#  org.hibernate.type: trace
더보기

만약 h2를 설치하기를 원하지 않으신다면 yml datasource의 url를 jdbc:h2:mem:test로 변경하시면 됩니다.

spring:
  datasource:
    url: jdbc:h2:mem:test

서버가 제대로 띄워졌는지 확인하기 위한 healthCheck를 위한 컨트롤러를 만들어줍니다.

StatusController

@Slf4j
@RestController
@RequestMapping("/status")
@Tags(value = @Tag(name = "StatusController", description = "Retrieve any status"))
public class StatusController {

    @GetMapping
    public ResponseEntity<?> serverStatusCheck() {
        log.info("this server is health");
        return ResponseEntity.ok("ok");
    }

    @GetMapping("/all")
    public ResponseEntity<?> anyOneCanAccess() {
        log.info("all people can access");
        return ResponseEntity.ok("all people can access");
    }
}

서버가 제대로 실행되었는지 확인하기 위해 postman을 통해 확인해보면

health-check

다음과 같이 제대로 띄워져 있는 결과를 얻을 수 있습니다.

데이터베이스와의 연동 확인

데이터베이스와의 연동을 확인하기 위해 간단한 create 요청을 만들어 디비에 제대로 적제되었는지 확인해보겠습니다.

 

AccountDto와 SignUpRequest는 Java의 record를 사용해 생성됩니다. record는 Java 16 이상에서 제공되는 기능으로, 불변 객체를 간결하게 정의할 수 있게 해줍니다. 이를 통해 DTO(Data Transfer Object)와 요청 객체를 더 짧고 명확한 코드로 작성할 수 있습니다.

 

SignUpRequest

public record AccountDto() {
    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public static final class SignUpRequest {
        private String username;
        private String password;
    }
}

 

다음은 controller를 생성합니다. @RequestBody를 통해 받은 SignUpRequest를 통해 service의 joinMember를 호출합니다.

TestController

@Slf4j
@RestController
@RequiredArgsConstructor
@RequestMapping("/test")
@Tags(value = @Tag(name = "TestController", description = "check database"))
public class TestController {

    private final TestService testService;

    @PostMapping("/members")
    public ResponseEntity<String> createUser(@RequestBody SignUpRequest signUpRequest) throws Exception {
        log.info("Controller: createUser");
        String createName = testService.joinMember(signUpRequest.getUsername(), signUpRequest.getPassword());

        return ResponseEntity.ok(createName);
    }
}

 

엔티티 Member를 생성합니다.

Member

@Entity
@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class Member {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String username;
    private String password;

    public Member(String username, String password) {
        this.username = username;
        this.password = password;
    }
}

TestService는 서비스 계층으로 Repository와의 상호작용을 담당하고 비즈니스 로직을 담당하는 부분입니다.

TestService

@Slf4j
@RequiredArgsConstructor
@Service
public class TestService {

    private final MemberRepository memberRepository;

    public String joinMember(String username, String password) throws Exception {
        log.info("Service: joinMember");
        if (memberRepository.existsByUsername(username)) {
            throw new RuntimeException("fail join member");
        }

        Member member = new Member(username, password);

        memberRepository.save(member);

        return member.getUsername();
    }
}

MemberRepository는 Spring Data JPA의 JpaRepository 인터페이스를 확장하여 데이터베이스와 상호작용하는 저장소(Repository)입니다. 이 인터페이스를 구현함으로써, 기본적인 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 자동으로 제공받을 수 있습니다. 이를 통해 개발자는 복잡한 SQL 쿼리 작성 없이 간단한 메서드 호출만으로 데이터베이스 작업을 수행할 수 있습니다.

 

 

MemberRepository

@Repository
public interface MemberRepository extends JpaRepository<Member, Long> {
    boolean existsById(Long id);
    boolean existsByUsername(String username);
    Member findByUsername(String username);
}

포스트맨을 통해서 확인해본 결과는 다음과 같습니다.

멤버 생성 포스트맨

Spring의 SQL문은 다음과 같습니다.

데이터베이스에 잘 적제된 것을 확인할 수 있습니다.

 

 

깃허브 및 참조

 

+ Recent posts