구글 소셜 로그인 설정

4th UMC Server-Spring 시리즈에서 카카오 소셜로그인을 구현해보았는데요. 이번 시간에는 구글 소셜로그인을 구현하기 위한 사전 준비 작업에 대해 설명드리려 합니다. 구글 소셜 로그인을 구현하는 코드가 필요하신 분들은 아래의 서버 코드를 참조해주시기 바랍니다.
>> 구글 소셜로그인

만약 카카오 소셜로그인이 궁금하시다면 아래의 링크를 클릭해주세요.
>> 카카오 소셜로그인

1. Google Cloud Console 설정

1) 구글 클라우드 콘솔에 애플리케이션 등록하기

① 아래의 링크를 따라 구글 클라우드 콘솔에 접속한다.
>> 구글 클라우드 콘솔

② 우상단에 보이는 프로젝트 선택 버튼을 클릭한다.

③ 새 프로젝트 버튼을 클릭한다.

④ 프로젝트 이름은 자유롭게 지으면 된다. 이번에도 umcLogin으로 지어주겠다.

⑤ 프로젝트가 완성되면 처음화면의 프로젝트 선택 창에 아래와 같이 생성한 프로젝트가 추가되어 있을 것이다. 프로젝트를 클릭한다.

⑥ 좌상단 메뉴에서 API 및 서비스 > 사용자 인증 정보 버튼을 클릭한다.

⑦ 사용자 인증 정보를 만들기 위해 동의화면 구성 버튼을 클릭한다.

⑧ User Type은 외부로 설정하고 만들기 버튼을 클릭한다.

⑨ 앱 이름을 입력하고 개발자의 이메일, 맨 아래에 연락처만 입력하면 된다. 여기서도 앱 이름은 umcLogin으로 하겠다. 앱 로고나 도메인은 생략해도 된다. 저장 후 계속 버튼을 누른다.

⑩ 아래와 같은 창이 나올텐데 범위 추가 또는 삭제 버튼을 눌러주면 된다.

⑪ 본인이 원하는 범위를 추가하고 업데이트 버튼을 클릭한다. 이후 저장 후 계속 버튼을 클릭한다.

⑫ 테스트 사용자는 추가하지 않고 저장 후 계속 버튼을 클릭한다.

⑬ 등록 내용을 확인하고 대시보드로 돌아가기 버튼을 누른다.

⑭ 사용자 인증 정보 > + 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 클릭한다.

⑮ 아래와 같이 입력하고 만들기 버튼을 클릭하면 클라이언트 ID와 비밀번호가 나온다. 이 값을 복사하여 기록해둔다.

※ 클라이언트 ID와 비밀번호
거듭 강조하는 내용이지만, ID와 비밀번호 모두 외부에 공개되지 않도록 주의한다. 깃허브나 개인 블로그에 업로드 할 때에 주의해야 할 사항이다.

2) 앱 게시하기

① 다시 대시보드로 돌아와서 이번엔 API 키를 클릭한다.

② 저절로 API 키가 생성된다. API 키도 외부에 공개되지 않도록 유의한다.

③ 대시보드로 돌아와서 OAuth 동의 화면 > 게시 상태 > 앱 게시 버튼을 클릭한다.

④ 아래와 같은 창이 나오면 확인 버튼을 눌러준다.

⑤ 게시상태가 프로덕션 단계로 전환된 것을 확인할 수 있다.

2. Google API 테스트

이번엔 구글 API를 통해 사용자의 정보를 가져오는 원리를 알아보자.

1) Aceess Token 발급받기

① postman에 접속한다.

• Get 요청으로 설정한다.
• URL은 https://www.googleapis.com/oauth2/v3/userinfo를 입력해준다.

② Authoriaztion에 들어간다.

• type을 OAuth 2.0으로 지정한다.
• Use Token Type은 Access token으로, Header Prefix는 Bearer로 설정한다.
  

③ 토큰의 설정 정보를 지정한다.

• Token 이름은 임의로 짓는다.
• Grant Type은 Authorization Code로 설정한다.
• Callback URL은 Google Cloud Console에서 지정해준 Redirect URI를 넣어주면 된다.
• Auth URL은 https://accounts.google.com/o/oauth2/auth를 입력한다.
• Access Token URL은 https://oauth2.googleapis.com/token 를 입력한다.
  

④ Client 정보와 Scope 정보를 입력한다.

• Google Cloud Console에서 제공 받은 Client ID와 Client Secret을 입력한다.
  
• Scope는 https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email을 입력한다. 두 URI는 띄어쓰기로 구분해야하며, 각각은 이메일과 프로필에 대한 정보를 나타낸다.
• Client Authentication을 Send client credentials in body로 설정한다.

⑤ 스크롤을 내려 Get New Access Token을 클릭한다.

⑥ 아래와 같은 창이 뜨면 본인의 구글 계정으로 로그인하면 된다.


⑦ 개인정보 액세스 동의창이 뜨면 허용 버튼을 클릭한다.

⑧ Authentication complete가 뜨면, Proceed 버튼을 눌러 토큰에 대한 정보를 확인할 수 있다. 좌상단의 Use Token 버튼을 클릭한다.

2) Access Token으로 유저 정보 가져오기

이제 send 버튼을 클릭하면, 아래와 같이 유저의 정보를 조회할 수 있다.

이 형식을 활용하여 유저의 이름과 이메일 정보를 알아낼 수 있을 것이다.

성별과 생일에 대한 정보도 얻고 싶었지만, scope를 아무리 변경해봐도 이메일과 이름 외의 개인 정보는 조회되지 않았다. 정확한 건 아니지만, 구글의 정책 변경으로 인해 더 이상 소셜 로그인에서 성별이나 생일 등의 정보를 제공받지 못하는 것 같다.

사용자 정보를 공개로 변경, 개인 정보 제공 동의, Scope 변경도 모두 해주었는데, 여전히 결과는 나오지 않았다. 그러다보니 구글 소셜로그인으로 유저를 가입시키는 경우 이메일과 이름 정보만 가져올 수 있을 것 같다.