주특기 프로젝트 중 소셜 로그인 회고

👣 개요

나는 주로 OAuth2 인증 과정을 Spring Boot 내에서만 사용해봤지
React와 함께 사용해본 적은 없었다.

때문에 Redirect URI는 당연히 백엔드 서버를 향하게 설정해왔고
React 팀과 함께하는 주특기 프로젝트 또한 Redirect URI를 백엔드 서버를 향하게
설정했다.

우선 OAuth2 인증 과정을 어찌 구현했는지 코드와 함께 이야기해야
어떤 문제가 있었는지 표현할 수 있을 것 같다.

 

👣 OAuth2 인증 과정

Authorization Code 취득 - 과정 1~3

우선 React 컴포넌트 내에
3번 과정을 수행할 Authorization Code 취득 링크를
클릭할 수 있도록 a 태그를 작성한다.
이 때, fetch가 아닌 a 태그로 이동하게 해야 한다.
왜냐 하면, fetch는 SOP 정책을 고수해야 하지만 a 태그는 CORS 정책을 따르기 때문이다.

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

결국, React에서는 다음과 같은 코드로 Authorization Code를 받아와야 한다.

 

Authorization Code 전달

사용자는 카카오 인증 서버에서 해당 서버의 방식으로 로그인을 수행하고
인증의 징표로 Authorization Code를 받는다.

해당 Authorization Code는 300번 대의 응답으로 보내지기 때문에
사용자가 직접 서버로 Authorization Code를 전달하는 요청을 날리지 않아도
미리 Client Server가 설정한 Redirect URI로 Authorization Code를 전달하는 요청을 보낸다.

이런 사실을 알고 있었기에 우리 프로젝트에서는
Redirect URI를 http://localhost:8080/api/user/login/callback으로 설정했다.

 

Access Token 취득 후, Kakao에 저장된 User 정보 조회 - 과정 4 ~ 5

서버에서는 Authorization Code를 받고 해당 정보를 Client ID와 함께 동봉해
Access Token을 발급받는 요청을 보내고 해당 토큰으로
다시 유저 정보를 조회하는 요청을 보내서 해당 유저 정보를 기반으로
JWT를 발급하는 구조다.

 

👣 문제 인식

모든 부분은 구현되었고 테스트까지 진행되었기에 문제없이 적용될 것이라
믿고 있었지만 문제가 생겼다.

[👣 OAuth2 인증 과정] 중에서 유저가 Authorization Code를 받아서
300번 대의 응답에 의해 자동으로 서버로 응답을 받으면 JWT를 취득해야 한다.
하지만 문제는 자동으로 리다이렉트된 요청의 응답을 React에서 받을 방법이
없다는 것이다. 다른 서버로부터 API를 받기 위해선 Promise 객체를 보유하고 있어야 하지만
이 문제가 발생했을 당시 오로지 a 태그를 통해 링크 이동을 시키고 있었기에 불가능했다.

때문에 이것을 구현하기 위해 여러 가지 방법을 고안했다.

 

👣 문제 해결

1. React에서 리다이렉트된 요청의 응답을 받기 위해
비동기 통신 방법을 이용해서 직접 리다이렉트 요청을 하고 응답처리를 하는 것

해당 방법이면 당연히 해결 가능할 것이라 생각하고 axios를 이용해서
응답을 처리해보려 했지만 [https://kauth.kakao.com/] 라는 Origin으로는
Cors 문제가 발생하여 도저히 수행할 수가 없었다.

해당 방법은 Cors를 해결할 수 없어서 더 이상 수행할 수 없었다.

2. 서버에서 쿠키에 JWT를 담아서 전달하기.

해당 방법은 리다이렉트 요청을 보내도 쿠키가 자동으로 브라우저에 저장되기 때문에 
응답을 굳이 처리하지 않아도 된다.
하지만 절망스럽게도 쿠키는 Web Server와 API Server의 도메인이 다르면 
브라우저 차원에서 저장하지 않기 때문에 이것을 받기 어려워진다.

이것을 수행하기 위해선 2개의 서버를 배포하고 도메인을 같은 것으로
할당하면 해결할 수 있다. 하지만 이것은 현재로서는 불가능하고 테스트하기도 어렵다.

따라서 쿠키로 해결하기는 쉽지 않아 보인다.

3. Redirect URI를 서버를 향하게 설정하는 것이 아닌 브라우저를 향하게 설정하기

해당 방법은 리다이렉트 응답에 의해 자동으로 서버에 요청하는 것을 막고
API만 처리하기 위한 컴포넌트를 설계해 카카오 인증 서버로의 Authorization Code를 받고
해당 Authorization Code를 이용해 서버에게 JWT 토큰으로 변환하는 요청을 보내게 하면 된다.

이 방법은 1번 처럼 Cors 오류를 내지도 않고 쿠키를 사용하지 않고도 요청-응답을 주고 받을 수 있기 때문에
아무런 부작용 없이 해결할 수 있었다.

React 팀에서 위 Redirect URI에 대한 컴포넌트를 제작해
해당 컴포넌트가 활성화가 되면 서버를 향해 JWT를 요구하는 요청을 하게 끔하면 해결할 수 있다.

 

👣 결론

결과적으로 React와 API 서버 사이의 소셜 로그인 문제를 해결하기 위해선
Redirect URI를 서버 쪽으로 설정하는 것이 아닌 브라우저를 향하게 만들어야 한다.