구글로그인 쉽게 구현하기 1편 - Google Developers 설정

구글 로그인 API

 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담된다. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있다.

구글 로그인 API 흐름

 구글 로그인의 흐름은 간단하다. 카카오, 네이버 로그인 모두 흐름은 동일하다. 리소스 오너(사이트)가 구글 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 네이버 API 서버에 넘긴다.
전달받은 정보를 가지고 구글 API 서버는 인가 코드를 발급해주고 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다.
자세한 설명은 구글 개발자센터 API 문서를 참고하자.
 
https://cloud.google.com/identity-platform/docs/use-rest-api?hl=ko#section-verify-custom-token

REST API 사용  |  Identity Platform 문서  |  Google Cloud

 

구글 로그인 API 연동

연동은 크게 3단계로 나눌 수 있다.
1.  Google Developers 설정
2. 개발 환경 설정
3. 초기화 및 로그인 구현하기

Google Developers 설정

> https://console.cloud.google.com 접속
> 검색란에 "Oauth" 검색 후 "OAuth 동의 화면" 클릭

 
> 좌측 상단 프로젝트 선택

 
> 우측 상단 새 프로젝트 선택

 
> 정보 입력 후 프로젝트 만들기

 
> 좌측 OAuth 동의 화면 탭 진입 후 User Type으로 '외부' 선택 후 만들기 클릭

 
> 앱 정보 입력 후 저장 (필수 데이터만 입력, 도메인 및 홈페이지 정보는 해당 단계에서 작성하지 않아도 됨)

 
> '범위 추가 또는 삭제' 버튼 클릭 후 최상단 3개 항목 선택 후 저장

 
> Google 로그인 테스트를 위한 계정 추가 (누구나 사용하기 위해선 별도 애플리케이션 심사 필요)

 
> OAuth 동의 화면 -> '앱 게시' 클릭

 
> 사용자 인증 정보 탭에서 OAuth 클라이언트 ID 생성

 
> 필수 정보 입력
>> 애플레이케이션 유형 항목에 '웹 애플리케이션' 선택
>> 애플리케이션 이름 입력
>> 승인된 자바스크립트 원본 항목에 구글 로그인을 사용할 홈페이지 주소 입력
>> 승인된 리디렉션 URI 항목에 구글 로그인 후 Redirect할 주소 입력
 
> 구글 로그인 연동 API 정보 확인

 
위 과정을 완료했다면 구글 로그인 API 사용에 필요한 설정은 끝났다.
 

관련글

https://notspoon.tistory.com/46

구글 로그인 쉽게 구현하기 2편 - 개발 환경 설정

 
https://notspoon.tistory.com/47

구글 로그인 쉽게 구현하기 3편 - 로그인 구현하기 (SpringBoot + Vue.js)