[게시판 서버] 구글 SNS 로그인 구현하기

https://github.com/sglee487/isolia-spring-api/tree/e83aa6a850de8f3770f2c9a78b17c9fa673c592e

GitHub - sglee487/isolia-spring-api: change FastAPI to Spring boot

https://github.com/sglee487/isolia/tree/8ce6773e88879d83910a3b3d4253579ea3e00c72

GitHub - sglee487/isolia: https://isolia.shop/

 

 

완전히 나 혼자 한건 아니고 다른 글들을 참고했다.

https://darrenlog.tistory.com/40

[OAuth 2.0] 스프링부트로 Google 로그인 구현해보기 -2

0. Sequence Diagram

3~7번까지는 위 링크대로 따라했다..

 

 

그래도 내가 한걸 차례대로 보자.

 

1. 구글 로그인 버튼

구글 로그인 버튼을 누르면 내 spring boot 서버로 이동하는 링크를 건다.

내 서버에선 단순히 구글 oauth 링크로 redirect로 되지만, 일단 내 서버를 거치고 가라

 

2. google oauth redirect

2~7은 위 링크를 거의 배껴왔다. 그래도 보자.

저렇게 해두면 authorizationUrl은

https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=~~~~~.apps.googleusercontent.com&redirect_uri=http://127.0.0.1:8080/login/oauth2/code/google&scope=https://www.googleapis.com/auth/userinfo.email

이 링크를 담게 된다. 결국 구글 로그인을 클릭하면 위 링크를 클릭한게 되어서 밑의 화면이 보이는 것.

 

3. redirect url (access code)

2번의 화면에 구글 로그인을 했으면 정해둔 백엔드 서버의 response url로 페이지로 가서 정보를 주기 때문에, 일단 spring boot로 오게 하고 여기서 다시 프론트엔드로 redirect하는 방식으로 구현했다.

Controller는 이걸 받을 준비를 한다. 그럼 밑 함수의 code로 들어간다.

 

4. request token (by using access code)

3. 에서 받은 access code를 가지고 쭉쭉 들어가서 처리해준다.

위에서 가져온 authorizationCode로 token을 요청한다.

 

 

5. response token

그럼 accessToken 변수에 요청한 token이 들어간다.

 

6. request user info (by using token)

그럼 4.를 통해 accessToken을 받았다. 이걸 이용해서 사용자의 정보를 요청한다.

 

 

7. response user info (email, profile)

그럼 userResourceNode에는 위 같은 정보가 남긴다. 여기까지가 내가 본 링크 내용.

 

밑은 이후에 뭘 했는지 더 보여준다.

 

8. (register and) login user

유저가 없으면 만들고, 있으면 그대로 진행한다.

 

프론트엔드는 아직 spring boot의 서버에 있으니 정보를 get query로 보내주면서 다시 리다이렉트 해준다.

ModelAndView로 추가하면 get query 형식으로 정보를 준다. 물론 이러면 string 형식으로 밖에 못 보내니 json stringify하는거 잊지말고..

 

프론트쪽에선 query로 정보를 받을 준비를 한다. 정보가 들어오면 로그인 진행.

 

9. redirect to main page

그럼 된다.

 

 

 

막상 써보니 내가 한건 별로 안되지만 원래 하면서 생기는 버그들 수정하고 찾아보면서 구조도 좀 알고 그런거지..