구글 로그인 구현

react-google-login 라이브러리를 쓰지 않은 이유

 

처음에는 react-google-login 라이브러리를 사용할까 했는데, 이것을 사용하게 되면 서버에 유저 정보를

저장할 방법이 없었다. 즉, 이것을 사용했을 시 프론트단에서만 구현되는 기능이 되어 백엔드단으로의 데이터 통신이 

이루어지지 않는다는 것이다. 연습삼아서 사용해보긴 했는데 너무 쉬워서 이걸로 어떻게 살려볼 수 없을까 하고 많이 

찾아봤는데 방법은 없는것 같아서 아쉬웠다.

 

 

oauth2 구글 로그인 방식 

 

따라서 라이브러리를 사용하지않고 구글에서 인가코드를 받아 백엔드에 보내는 방식을 채택했다.

 

요약하면 이런 순서가 되겠다.

1. 구글에서 oauth관련 허가를 받고나서 REDIRECT URL을 설정해준다. (콜백 URL)

2. 구글 로그인 버튼을 누르면 https://accounts.google.com/o/oauth2/v2/auth/~~ 형식의 구글 oauth2.0 서버로

리디렉션 시킨다.

3. 인증을 성공하면 설정해 두었던 REDIRECT URL로 이동한다.

 

액세스 토큰 및 리프레시 토큰 발급 (세션 저장 방식)

 

1. 콜백 URL의 파라미터에는 해당 유저의 고유 key값이 들어있는데 이를 split으로 분해해서 리듀서로 보내준다.

2. ${GOOGLE_BASE_URL}?code=${payload}으로 GET 요청을 보낸다.

//GOOGLE_BASE_URL은 env에서 설정해놓은 환경변수

//payload는 위에서 dispatch한 고유 key값

3. GET요청하여 받은 response를 세션에 저장한다. (액세스 토큰, 리프레시 토큰, +닉네임도 저장하기로했다.)