rexondex's blog

React 애플리케이션에서의 JWT 기반 사용자 인증 시스템 구현

React 애플리케이션에서의 JWT 기반 사용자 인증 시스템 구현React 환경에서 JSON Web Token(JWT)을 활용한 사용자 인증 시스템 구축과 효과적인 로그아웃 전략에 대해서 정리했습니다.1. JWT 인증 흐름사용자 로그인 요청서버 인증 및 JWT 발급클라이언트 JWT 저장 (HttpOnly Cookie 권장)인증 필요 요청 시 JWT를 Authorization 헤더에 담아 전송서버 JWT 검증 후 응답2. React 구현 단계2.1. 로그인 컴포넌트 및 API 연동로그인 UI 컴포넌트 개발로그인 API 호출 및 JWT 수신HttpOnly Cookie를 통한 JWT 저장 권장2.2. JWT 저장 및 관리HttpOnly Cookie: XSS 방어에 효과적, JavaScript 접근 불가Axio..

세션 기반 인증 vs 토큰 기반 인증: 차이점과 사용 사례

세션 기반 인증 vs 토큰 기반 인증세션 기반 인증과 토큰 기반 인증은 웹 애플리케이션에서 사용자를 식별하고 권한을 관리하는 두 가지 주요 방식입니다. 작동 방식과 특징에 뚜렷한 차이가 있으며, 특정 상황에 더 적합한 방식이 있습니다.1. 작동 방식세션 기반 인증 (Session-based Authentication):사용자 인증 성공 시, 서버는 사용자 정보를 저장하는 세션(Session)을 생성하고 고유한 세션 ID를 발급합니다.세션 ID는 쿠키(Cookie)를 통해 클라이언트에게 전달됩니다.이후 요청 시 클라이언트는 쿠키를 통해 세션 ID를 서버에 전송하여 인증 상태를 유지합니다.로그아웃 시 서버는 해당 세션을 파기합니다.토큰 기반 인증 (Token-based Authentication):사용자 인..

카카오 API 문서에 따라 로그인버튼을 구현해보겠습니다. 1) index.html 을 작성합니다.index.html 카카오 로그인  2)  로그인 이후 리다이렉트 될 home.html 을 작성합니다.home.html로그인 성공.  3) KakaoController 를 작성합니다.@Controllerpublic class KakaoController { // 어플리케이션 프로퍼티스에서 값을 가져옴 @Value("${KAKAO_CLIENT_ID}") private String KAKAO_CLIENT_ID; // 어플리케이션 프로퍼티스에서 값을 가져옴 @Value("${KAKAO_SERVER_REDIRECT_URI}") private String KAKAO_SERVER_REDIREC..