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 변경도 모두 해주었는데, 여전히 결과는 나오지 않았다. 그러다보니 구글 소셜로그인으로 유저를 가입시키는 경우 이메일과 이름 정보만 가져올 수 있을 것 같다.
