[Pre-Project] Day 6,7- OAuth2 구글, 깃헙 소셜 로그인 구현
📍 Pre-Project, Day 6,7
oauth2를 사용하여 프론트엔드 측에서 구글과 깃헙 소셜 로그인 구현 부분을 맡아서 진행하게 되었다. 공식 문서를 따라서 그대로 하면 될 줄 알았으나, 자바스크립트나 리액트에서 구현하는 것으로 설명이 되어있었고 우리는 Next.js에서 구현하는 것이라 생각보다 많은 오류들을 만나게 되어 여러가지 글들의 도움을 받았다.
- 구글 OAuth2 기능 구현중
- 깃헙 OAuth2 기능 구현중
- 팀원분들 GIT Branch 관리
- 백엔드분들께 누락된 API 확인 후 요청
- 백엔드분들 API 진행 상황 공유
✍🏻 구글 소셜 로그인
→ cloud.google에서 OAuth인증을 위해 사용할
애플리케이션을 등록하고Client ID와Client Secret을 받아오는 것까지는 크게 어려움이 없었다.
→ 그럼 이제 유저가 구글 로그인 버튼을 누른다면, 우리는 구글에서 제공하는 URL에
client_id와redirect url를 담아 유저를 해당 URL로 보내준다.https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${googleClientId}&scope=openid%20profile%20email&redirect_uri=${googleRedirectUrl}
→ 그러면, 우리에게 익숙한 구글 로그인 동의 화면이 나오고, 수락할 경우에 구글에서는 미리 우리가 등록한
redirect url로 유저를 보내는 것이다.
→ 그런데, 바로 구글 로그인 동의 화면이 나오지 않고 위와 같이
400 오류가 뜨게 되었다.
왜 400 오류가 뜨는지 구글링을 하고 공식 문서도 열심히 읽어본 결과,단순히 구글 인증 페이지 url로 접속하면 위와 같은 에러가 뜬다고 한다.
공식 문서를 보면서 따라한 것인데 처음으로 OAuth에 대해 공부하고 하려다보니, OAuth 인증 방식에 대한 이해가 부족하여 공식 문서를 읽으면서도 놓친 것 같다.
→ 구글 OAuth 2.0의 endpoint는 https://accounts.google.com/o/oauth2/v2/auth 이며,
OAuth 2.0 endpoint에 필요한 파라미터를 넣어주어야 한다는 것이 나와있다. 위와 같이client_id,redirect_uri,response_type,scope는 필수로 넣어야하는 파라미터인 것이다.https://oauth2.googleapis.com/token?code=authorization code&clientid=클라이언트아이디&clientsecret=클라이언트시크릿&redirect_uri=https://localhost:8080/auth/google/callback&grant_type=authorization_code
→ 그러면 버튼과 구글 로그인 동의 화면이 정상적으로 뜨고, 유저 정보가 뜨는 것을 확인 할 수 있다.
→ 구글 라이브러리를 사용해서 버튼이 위와 같이 뜨는데, 구글 로그인 버튼 CSS를 바꾸는 것은 차일 알아보고 진행할 예정이다.
💻구글 OAuth2.0 참고문서💻
✍🏻 깃헙 소셜 로그인
→ 깃헙을 등록하는 과정은 역시 어려움이 없었다.
github의 경우, OAuth 등록을 위해서는로그인->my page의 setting->developer setting->OAuth Apps클릭
→ 이 때,
Homepage URL: 내 서비스의 URL
Authorizatiton callback URL: 사용자가 Github 로그인을 하면 redirect될 페이지의 주소. 라는 것을 잘 알고 넘어가는 것이 중요했다.
→깃헙 로그인 버튼 코드를 구현<a href="https://github.com/login/oauth/authorize?client_id=[위에서 받은 client id]&redirect_uri=[위에 나와있는 redirect url]">GitHub 아이디로 로그인</a>
→ 그러면 사용자가 깃헙 로그인 버튼을 누르면 위의 링크로 가게 되고, github을 통해 해당 서비스에 로그인하는 것을 허용할 것인지에 대한 화면이 뜬다.
→ Authorize 버튼을 누르면 내가 사용자들을 redirect 시키고자 github OAuth에 등록한 링크로 이동하게 된다.
💻깃헙 OAuth2.0 참고문서💻
✍🏻 회고
→ OAuth2에 대해 이해하고,OAuth2 구글 로그인 구현을 하는데 2일 가까이 걸려서 그런지 OAuth2 깃헙 로그인을 하는데는 비교적 어려움이 없었다. 첫 날에 읽었던 공식 문서를 오늘 블로깅을 하기 위해 다시 읽어보니 그 당시 보이지 않았던 내용들이 보이고, 어떻게 작동하는 것인지 어느정도 눈에 그려지는 것 같다.
프리 프로젝트 초반에 우리팀원들을 힘들게 했던 Git Branch, pull, push, merge는 이제 어려움 없이 편리하게 사용하고 있다. 모두가 깃에 대한 개념도 잡히지 않고 각종 오류들로 막막할 때, 본인이 다른 팀장분들이나 팀원분들께도 질문드리고 검색해서 어느 정도 머리에 잡힌 것을 팀원들에게 설명하고, 팀원들과 같이 해보고 오류들을 해결했던 과정이 크게 도움이 되었다. 이제 팀원들 모두 어떠한 오류 없이 잘 사용하고 있고 우리 모두 초반에 시간을 투자해서 잘 잡고 가길 잘했다고 이야기한다.
이것처럼 OAuth2 로그인도 계속 붙잡고 해보고 다른 팀원분들과 이야기해보고 이렇게 직접 해결해봐야 어느 정도 머리에 잡히는 것 같다.
차일은 Post man으로 api 확인해보고, css 수정하고, 페이스북 로그인까지 해볼 예정이다.
