앞서 8번 과정까지해서 구현 코드 설명은 모두 끝났습니다!
이번에는 마지막으로 실제 DB에 회원 가입, 로그인이 되는지 Postman으로 동작 테스트를 해보겠습니다.
💻 index.html 생성
자체 Login은 Postman으로 테스트하도록 하고,
OAuth2 로그인을 테스트하기 위해 index.html을 생성해서 테스트해봤습니다.
(메인 화면으로 띄우기 위해 위치는 src/main/resources/static에 생성하였습니다.)
🎯 index.html 코드
<a href="/oauth2/authorization/kakao">Kakao Login</a><br>
<a href="/oauth2/authorization/google">Google Login</a><br>
<a href="/oauth2/authorization/naver">Naver Login</a><br>이런 식으로 링크를 클릭하면 "/oauth2/authorization/SocialType" URL로 요청을 보내도록 했습니다.
해당 링크로 요청을 보내면, 302 redirect로 소셜 타입별로 리다이렉트로 이동하여 로그인을 처리합니다.
개발자 도구에서 Network 탭을 확인해봤을 때, 아래와 같이 Redirect 되고 있음을 알 수 있습니다.
💻 OAuth2 로그인 예시 - 카카오 로그인
먼저 OAuth2 로그인 예시로 카카오 로그인만 간단하게 동작을 보여드리겠습니다.
Application을 실행한 후,
localhost:8080으로 접속하면 만들었던 index.html 화면이 아래와 같이 렌더링됩니다.
1. Kakao Login 클릭
먼저 Kakao Login이므로 Kakao Login을 클릭하여,
"http://localhost:8080/oauth2/authorization/kakao"으로 요청을 보냅니다.
2. Kakao 로그인 화면
1번에서 요청을 보내면 리다이렉트 되어 위와 같이 카카오 서버에서 카카오 로그인 화면을 내려줍니다.
카카오 계정으로 로그인을 진행합니다.
3. Kakao 로그인 완료
카카오 계정으로 로그인을 하게 되면,
localhost:8080/login으로 리다이렉트되면서,
Spring Security의 기본 OAuth2 로그인 화면으로 리다이렉트됩니다.
현재 프로젝트에서 OAuth2 로그인 완료 시 별다른 리다이렉트 폼을 만들지 않아서 리다이렉트 시
Jwt 인증 필터("/login" 이외의 URL이 들어왔을 때 인증 처리 필터)에 걸려서 인증 실패가 됩니다.
리다이렉트 폼을 만들고 사용하려면, Spring Security 설정 파일인 SecurityConfig의
authorizeRequests().antMatchers().permitAll()의 antMatchers 부분에
해당 리다이렉트 URI를 추가하여
인증 필요 없이 접근이 가능하도록 하고, 별도의 컨트롤러를 만들어 맵핑해주면 됩니다.
이 과정은 생략하도록 하겠습니다.
4. 회원가입이 잘 되었는지 DB 확인
H2 DB를 확인해봤을 때, 데이터가 잘 들어간 것을 확인할 수 있습니다.
5. 로그인 시 카카오 인증 서버에서 보내준 AccessToken으로 요청 테스트
이전에 만들어 놨던 요청 테스트 URI ("/jwt-test")로 AccessToken을 담아 요청을 보내봅니다.
요청 URI("/jwt-test")는 SecurityConfig 인증 URI 설정부분에서 설정한
인증 없이 접근 가능한 URI가 아니기 때문에
AccessToken을 헤더에 담아 보내서 인증을 통과해야만 접근이 가능합니다.
로그인 과정을 개발자 도구로 Network 탭에서 살펴보면,
위의 이미지처럼 입력한 카카오 계정이 올바른지 확인 후 받은 Authorization Code를 요청 URI에 담아 보내면,
카카오 인증 서버에서 Authorization Code를 검증한 후
Response에 AccessToken(Bearer ...)을 보내줍니다.
프론트 단에서 해당 AccessToken을 저장한 후 요청 시 보내주면 될 것입니다.
지금은 프론트 없이 직접 테스트하기 때문에 개발자 도구 - Network 탭에서 직접 AccessToken을 받아서
Postman의 요청 헤더에 넣어주었습니다.
위처럼 요청이 성공하는 것을 알 수 있습니다!
다른 소셜 타입(NAVER, GOOGLE)도 이와 마찬가지로
AccessToken을 추출하여 매 요청마다 헤더에 담아 요청을 보내면 될 것입니다.
💻 자체 JSON 로그인 테스트
이번에는 OAuth2 로그인이 아닌, 자체 JSON 회원가입 - 로그인을 테스트해보겠습니다.
1. 회원 가입
테스트하기 위해서 먼저 Postman에서 회원가입을 진행합니다.
"/sign-up" URI Request Body에 회원가입 JSON 정보를 담아서 요청을 보내 성공한 것을 알 수 있습니다.
2. 회원 가입이 잘 되었는지 DB 확인
요청을 보낸 회원가입 JSON 정보로 DB에 회원이 잘 저장된 것을 알 수 있습니다.
3. 로그인 요청
"/login" URI Request Body에 회원가입한 이메일과 패스워드 JSON 정보를 담아서 요청을 보냅니다.
요청 성공한 Response의 헤더에
AccessToken(Authorization)과 RefreshToken(Authorization-refresh)가
잘 담겨서 응답된 것을 알 수 있습니다.
이후에 요청 테스트를 진행하기 위해 해당 AccessToken을 복사해둡니다.
4. 요청 테스트
"/jwt-test" URI로 요청 헤더에 3번의 로그인 시 Response에 있었던 AccessToken을 담아서
요청을 보내면, 요청이 성공하는 것을 알 수 있습니다.
이상으로 동작 테스트까지 마치고, 모든 로그인 구현 과정을 끝마치도록 하겠습니다!
마치며
이렇게 긴 과정의 글을 처음 작성해봤는데,
꾸준히 매일 작성한 것이 아니라 틈틈이 작성해서 흐름이 잘 이어졌는지는 모르겠습니다,,
제가 처음에 프로젝트를 진행할 때 부딪혔던 벽이 바로 로그인 과정이었습니다.
물론 여러 블로그에서 다루고 있어서 블로그들을 참고하여 완성한 것은 맞지만
자체 로그인과 OAuth2 로그인을 함께 구현한 코드들은 제가 구글링했을 때는 찾기 힘들었습니다.
(제 구글링 실력과 이해력이 부족했던 것도 있었던 것 같습니다 ㅠㅠ)
자체 로그인 구현과 OAuth2 로그인이 각각 조각처럼 흩어져있다는 느낌을 받았고,
자체 로그인 구현과 OAuth2 로그인 부분도 각각 조각처럼 흩어져서 조각 모음을 해야 됐었던 것 같습니다.
그래서 이 자체 로그인 + OAuth2 로그인 과정을 기록으로 남겨보자고 생각했고,
그 덕분에 이렇게 끝까지 잘 마친 것 같습니다.
작성하는 동안에 정말 많이 공부가 됐고, 어렴풋이 알던 원리들을 더 자세히 알게 되었던 것 같습니다.
물론 거의 여러 블로그의 코드를 따라한 초급자의 코드라서 코드가 깨끗하지 않을 수도 있고,
잘 동작하지 않을 수도 있을 것 같습니다 ㅠㅠ
이러한 로그인 과정을 서술한 목적 중에 개인 공부 목적과 개인 프로젝트 시 재사용을 염두에 두고
작성한 것이기 때문에 완벽한 코드는 아닐 것이라는 점 양해부탁드립니다!
📖 깃허브 링크 (전체 코드)
https://github.com/KSH-beginner/oauth2WithJwtLogin
GitHub - KSH-beginner/oauth2WithJwtLogin
Contribute to KSH-beginner/oauth2WithJwtLogin development by creating an account on GitHub.
github.com
📕 전체 로그인 구현 목차
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (1) - 회원(User) 관련 클래스 생성
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (2) - JWT란?
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (3) - JWT 관련 클래스 생성 / JWT 인증 로직
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (4) - 자체 JSON 로그인 커스텀하기
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (5) - OAuth란? / OAuth 2.0 인증 과정 예시
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (6) - OAuth 2.0 로그인 구현 사전 설정
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (7) - OAuth 2.0 로그인 관련 클래스 생성
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (8) - SecurityConfig 설정 클래스 생성
Spring Security + JWT를 이용한 자체 Login & OAuth2 Login API 구현 (9)- JWT 자체 로그인 & OAuth2 Login 테스트
