[Reactjs] Google Social Login/Sign In
클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담된다. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있다.
구글 로그인의 흐름은 간단하다. 카카오, 네이버 로그인 모두 흐름은 동일하다. 리소스 오너(사이트)가 구글 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 네이버 API 서버에 넘긴다.
전달받은 정보를 가지고 구글 API 서버는 인가 코드를 발급해주고 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다.
- 구글 인증사이트 바로가기 : https://developers.google.com/identity/gsi/web/reference/js-reference?hl=ko
- 구글 Console : https://console.cloud.google.com/welcome?pli=1&project=linker-1533200259055
- 참고사이트 : https://notspoon.tistory.com/45
- 참고사이트 : https://muhammedsahad.medium.com/react-js-a-step-by-step-guide-to-google-
[ 절차 ]
01. OAuth 동의화면 메누에서, 외부를 선택하고 ‘만들기'를 선택한다.
02. 다음단계에서 기본정보를 입력한다.
- 앱 이름 : 동의화면에 노출되는 앱이름이다.
- 이메일 : 동의시 문의되는 이메일이다. 동의한정보의 정보관리자로 등록되는 개념이다.
- 로고 : 로고는 필수는 아니다 다만, 모든 사용자가 사용하게 허가를 요청하려면 등록해야한다. 사용자 편의를 위해서도 어떤서비스에 가입진행이 되는지를 알수 있도록 등록하는것을 추천한다.
- 앱 도메인 : OAuth는 승인된 도메인에서 요청해야만 사용가능하다.
03. 동의범위를 지정한다.
이메일, 프로필, 로그인시 필요한 openid 를 범위에 등록한다.
04. 정보설정이 완료되면 다음단계로 진행한다.
05. 최종 인증절차를 위해 ‘확인 준비’를 진행해야하는데 필자와같이 OAuth Client ID생성을 하지않은경우 인증필요 경고가 뜨게된다.
사용자 인증정보 메뉴에서 +상단의 사용자 인증 정보 만들기를 진행한다.
06. OAuth 클라이언트 ID를 생성한다.
07. 위와같이 발급이 완료된다.
08. 확인 준비를 진행하면, Google에 허가를 기대라기된다.
[ 테스트 방법 ]