화면
소개
트레이니 및 트레이너의 회원가입 및 로그인 담당하는 페이지입니다.
회원가입
1.
이메일 인증
•
회원가입 시, 먼저 이메일 인증 버튼을 눌러 이메일 중복 확인을 진행합니다.
•
중복 확인이 통과되면, 6자리 숫자로 된 인증 코드를 해당 이메일로 전송합니다.
2.
인증 코드 확인
•
인증 코드가 성공적으로 전송되면, 인증 코드 확인 버튼이 활성화됩니다.
•
인증 코드는 10분 동안 유효하며, 10분이 지나면 인증 절차가 실패합니다.
3.
회원가입 완료 및 자동 로그인
•
인증이 성공적으로 완료되면, 회원가입이 완료됩니다.
•
회원가입이 완료된 후 자동으로 로그인되며, 쿠키에 인증 권한이 부여됩니다.
로그인
1.
인증 및 검증
•
로그인 시, 유저의 보안을 위해 HTTP 쿠키에서 인증 권한을 확인합니다.
•
JWT의 토큰을 사용하여 유저를 인증하고 검증합니다.
구현한 기능
FE
react-hook-form을 사용하여 회원가입 폼에서 실시간 유효성 검사 후, 각 폼에 맞는 에러 메세지를 보여주고 불필요한 리렌더링을 방지합니다.
버튼에 의해 동작하는 이메일 인증, 인증코드 확인 등의 기능은 애니메이션을 적용한 별도의 알림 메세지를 구현하여 눈에 띄기 쉽게 중앙 집중적으로 주목성을 높입니다.
회원가입 및 로그인에 성공하면 zustand를 사용하여 애플리케이션 전반에 걸쳐 일관된 유저 상태를 유지합니다. protected route와 public route에서 유저 정보를 판별하여 페이지 이동시키거나, 유저 role에 따라 분기처리하여 페이지를 렌더링합니다.
Firebase Cloud Messaging을 사용하여 푸쉬 알림 수신에 대한 동의를 얻고, FCM token을 발급하여 이벤트에 따라 포그라운드와 백그라운드 상태에서 푸쉬 알림을 받습니다.
BE
이메일 중복 체크 및 인증 코드 보내기
•
중복 체크: 이메일 중복 여부를 확인합니다. 중복이 있으면 에러 메세지를 표시합니다.
•
인증 코드 발송: Google Mail Sender를 통해 6자리 숫자로 구성된 인증 코드를 이메일로 보냅니다.
•
인증 코드 다시 보내기: 인증 코드를 다시 보냅니다. 이전의 인증 코드는 무효화가 됩니다.
•
비동기 처리: 메일 발송에 시간이 걸리기 때문에, @Async를 사용하여 중복 확인이 통과되면 즉시 성공 응답을 보내고, 이후에 메일이 도착합니다.
아래는 이메일 인증 이미지입니다.
인증 코드 확인하기
•
코드 일치 확인: 사용자가 입력한 6자리 숫자 코드가 이메일로 발송된 코드와 일치하는지 확인합니다.
•
오류 처리: 코드가 일치하지 않거나 인증 시간이 초과된 경우 에러 메시지를 표시합니다.
비밀번호 설정
•
형식 확인: 비밀번호는 8 ~ 15자리의 영문, 대문자 하나, 특수 문자 하나, 숫자가 포함되어야 합니다.
•
유효성 검사: 비밀번호가 형식에 맞지 않거나 일치하지 않는 경우 에러 메시지를 표시합니다.
•
암호화: PasswordEncoder를 사용하여 비밀번호를 암호화합니다.
회원가입 성공
•
회원가입 처리: 위의 모든 절차가 성공적으로 완료되면, 회원가입이 완료됩니다.
•
자동 로그인: 회원가입 후 자동으로 로그인되며, 쿠키에 인증 권한이 부여됩니다. JWT 토큰을 발급하여 유저를 인증하고 검증합니다.
로그인
•
로그인 처리: 유저의 이메일과 비밀번호를 받아 인증이 성공하면, JWT 토큰을 발급받고 쿠키에 인증 권한을 부여합니다.
•
로그인 실패: 로그인 실패한 에러 코드가 나옵니다.
로그아웃
•
로그아웃 처리: 로그아웃 시 JWT 토큰을 블랙리스트에 추가하여 더 이상 사용할 수 없도록 합니다.
토큰 관리
•
쿠키: JWT를 통해 Refresh 토큰과 Access 토큰을 생성합니다. Refresh 토큰의 유효기간은 1주일이며, Access 토큰은 24시간입니다. 사용자가 로그아웃하지 않는 이상, Refresh 토큰이 유효하고 Access 토큰이 만료되었을 경우 서버에서 Refresh 토큰의 유효성을 확인하여 새로운 Access 토큰을 쿠키에 담아줍니다. 권한이 없는 사용자가 접근하면 401 에러를 반환합니다.
•
Redis로 토큰 관리: 보다 효율적으로 API 요청 시 In-memory에서 토큰을 확인하여 빠르게 인증 권한을 확인할 수 있도록 Redis를 사용해 토큰을 관리합니다.
•
환경에 따른 쿠키 설정: 로컬 환경에서는 쿠키 설정을 Lax로 하여 HTTP 요청을 승인하고, 배포된 환경에서는 SameSite를 None으로 설정하고 HTTPS 요청을 승인하도록 설정합니다.
유저 관리
•
캐싱: 로그인한 유저를 Caffeine Cache를 이용해 캐싱합니다. 캐시 저장 시간은 10분으로 설정하여, API 수행 전에 토큰 유효성을 검사할 때 캐싱된 유저라면 데이터베이스 쿼리를 생략하고 바로 수행하도록 최적화했습니다.
추가적으로 구현하고 싶은 기능
소셜 로그인 (네이버, 구글, 카카오)