드디어 긴 포스팅 시리즈의 막을 내린다..! 글을 올린 주기는 짧지만 계속 임시저장 글을 활용하면서 여러 개의 글을 동시에 작성하느라 시간이 많이 소요되었다.. 그래도 이렇게 마무리까지 오게 되어서 매우 기쁘다! 이번 포스팅에서는 직접 코드를 실행하여 구현한 이미지와 함께 간단한 설명을 할 예정이다.
회원가입
먼저 회원가입 과정이다. 처음 화면에는 로그인, 회원가입 버튼이 있으면 회원가입 버튼을 클릭하면 이메일, 비밀번호, 닉네임을 입력하는 칸이 나온다. 모든 항목을 입력하고 회원가입 버튼을 누르면 회원가입이 완료되었다는 메시지와 함께 홈으로 이동한다.
로그인
회원가입한 계정으로 로그인을 시도한다. 올바른 계정을 입력하면 내 닉네임과 함꼐 내 정보, 로그아웃 버튼이 보인다.
내 정보 확인 및 로그아웃
내 정보 버튼을 클릭하면 현재 로그인한 사용자의 이메일과 닉네임을 확인할 수 있다. 또한 로그아웃 버튼을 누르면 맨 처음 보았던 화면을 볼 수 있다.
카카오 로그인 페이지
로그인 화면에서 카카오 로그인 버튼을 클릭하면 카카오 로그인 페이지로 이동한다.
카카오 로그인 및 회원가입
카카오 계정으로 로그인하면 아래와 같은 화면이 나오고 동의하기 버튼을 클릭하면 회원가입 페이지로 이동한다. 닉네임을 입력하면 정상적으로 회원가입이 완료된다. 다시 한 번 카카오 로그인 버튼을 클릭하면 바로 로그인 처리가 되는 것을 확인할 수 있다.
회원가입 예외 처리
- 이미 가입된 이메일로 회원가입을 할 경우, 이미 가입된 이메일이라는 문구가 나온다.
- 이미 가입된 닉네임으로 회원가입을 할 경우, 이미 존재하는 닉네임이라는 문구가 나온다.
로그인 오류 처리
잘못된 이메일 또는 비밀번호를 입력하였을 경우, 다시 시도해달라는 문구가 나온다.
마무리
이렇게 JWT + OAuth2.0을 이용한 회원가입, 로그인 프로젝트가 모두 완료되었다. 이번 프로젝트를 시작으로 구글, 네이버 로그인도 같이 구현해 볼 계획이고 더 많은 회원 기능들을 추가하여 더 나은 프로젝트로 돌아올 수 있도록 할 것이다.
