[Spring Boot] Google 소셜 로그인: GCP 사전 설정 - 게시판 웹
개요
https://developers.google.com/identity/oauth2/web/guides/migration-to-gis?hl=ko
이전의 사용하던 Google 소셜 로그인의 JavaScript 라이브러리는 지원이 중단되었다. 새로 만든 GCP(구글 클라우드 플랫폼) 프로젝트의 Client ID를 활용하고, 이전에 사용하던 로직 그대로 API를 사용하려 했는데 에러가 발생하며 사진0의 링크를 참조하라는 로그를 띄웠다. 새롭게 생성한 GCP 프로젝트의 Client id로는 새로운 API를 사용해야했다.
우선 GCP를 설정하는 방법을 기록한다.
GCP 설정
구글 클라우드 플랫폼: https://console.cloud.google.com/welcome?hl=ko&project=mytest-416123
Google 클라우드 플랫폼
로그인 Google 클라우드 플랫폼으로 이동
accounts.google.com
먼저 연동할 GCP 프로젝트를 생성해야 한다.
- GCP 콘솔로 접속 (상단 링크)
- 사진1의 메인 화면 좌측 상단(검색창 좌측)의 ‘프로젝트 선택’ 버튼을 클릭 (이미 프로젝트가 있으면 사진1과 같이 프로젝트 이름이 표시된다)
- 팝업 창 우측 상단의 새 프로젝트 버튼을 클릭
프로젝트 선택 버튼을 클릭하면 사진2와 같이 새 프로젝트를 생성할 수 있는 페이지가 로드된다. 만들기 버튼을 클릭하면 새 프로젝트가 생성되고, GCP 콘솔 메인화면 좌측 상단에 생성된 프로젝트를 확인할 수 있다.
프로젝트 생성이 되면 왼쪽 상단 ‘프로젝트 선택’ 버튼이 있던 곳에 생성한 프로젝트가 표시된다. 왼쪽 사이드 메뉴의 ‘API 및 서비스 > OAuth 동의 화면’ 을 클릭한다.
혹은 상단 검색창에 ‘OAuth’ 를 입력한 후, 아래 OAuth 동의화면으로 진입한다.
외부를 선택한 후 ‘만들기’ 버튼을 클릭한다.
다음 단계로 앱 정보를 기입하면 되는데, 테스트 목적이라면 필수 정보만 간단하게 입력해도 된다. 최하단 ‘저장 후 계속’ 버튼 클릭.
범위 설정 화면에 진입 후 ‘범위 추가 또는 삭제’ 버튼을 클릭하면 아래 사진 8와 같이 오른쪽에 범위 업데이트 팝업 창이 표시된다. 최상단 3개 목록을 체크하고 하단의 ‘업데이트’ 버튼을 클릭한다.
API 로그인 테스트를 할 수 있는 계정을 추가한다. 경고문과 같이 ‘테스트 중’으로 설정된 동안에는 등록한 테스트 사용자만 앱에 엑세스가 가능하다.
테스트 사용자까지 추가를 완료하면 우선 기본 설정은 끝난다. 이제 마지막으로 클라이언트 ID를 발급받으면, 클라이언트 단에서 Google 로그인 API를 불러올 수 있다.
API 및 서비스 카테고리에서 ‘사용자 인증 정보’ 메뉴를 클릭한다. 이후 상단에 ‘사용자 인증 정보 만들기’ 버튼을 클릭하면, 드롭 다운 메뉴가 나타난다.
‘OAuth 클라이언트 ID’를 클릭하면 사진12와 같이 애플리케이션 유형, 원본 URI, 리디렉션 URI 를 추가할 수 있다.
‘승인된 자바스크립트 원본’ 항목에는 테스트할 도메인의 루트 경로를 작성해준다. 본인의 경우는 리디렉션 URI는 따로 추가하지 않아도 문제가 없었는데, 아마 이후 후술할 ‘Google 로그인 버튼 렌더링’ 부분에서 리디렉션 URI를 따로 지정했기 때문이지 않을까 싶다. 위 설정에서 리디렉션 URI는 OAth2 기반의 서버 단 Google 로그인 API 등에서 사용되는 것으로 추측된다.
모든 설정을 마치고 저장을 누르면, 화면 오른쪽에 사진13과 같이 발급된 클라이언트 ID를 확인할 수 있다.
GCP 프로젝트 설정은 여기서 마치고 발급받은 클라이언트 ID를 활용하면 구글 소셜 로그인 관련 API에 접근할 수 있다.