Spring에서 구글 소셜 로그인 구현하기 (1) - 클라이언트 등록

소셜 로그인 구현은 처음이라 엄청 막막했지만... 어찌저찌 잘 끝내고 쓰는 후기

소셜 로그인 기능을 구현한 과정을 적어보기로 했다.

 

들어가기에 앞서, 구글은 카카오에 비해 문서가 매우 불친절하다. 한국어로 적혀있긴 하지만 정말 한글로 옮겨만 놓은 수준인데다가, 문서도 여러개라 꽤 고생했다🥲 영어 실력이 되는 분이라면 영어 문서를 보고 진행하는게 좋을 것 같다.

 

소셜 로그인을 구현하기 전, 소셜 로그인의 플로우에 대한 이해가 필요하다. 만약 소셜 로그인이 어떻게 진행되는지 모르는 상태라면, 이전 글을 보고 오는 걸 추천!

 

 

1. 먼저 구글 클라우드 플랫폼으로 이동해서, 새 프로젝트를 생성해준다.

 

 

---

 

2. 프로젝트 이름을 적어주고 만들기 버튼을 클릭한다.

 

 

---

 

3.  OAuth 동의 화면 - User Type을 외부로 설정한다. 이렇게 되면 구글 계정이 있는 사용자 모두가 소셜 로그인을 진행할 수 있다.

 

 

---

 

4. 앱 정보와 개발자 연락처 정보를 적어준다.

• 앱 이름: 서비스명 기입
• 사용자 지원 이메일: 담당자 이메일 기입
• 개발자 연락처 정보: 담당 개발자의 이메일을 적어준다. 나는 내 이메일을 적었다.
• 나머지 정보는 꼭 지금 기입하지 않아도 되니 넘어가자.

 

 

---

5. 범위 추가 또는 삭제 버튼을 클릭한 뒤, 필요한 scope에 체크한다. 우리 서비스는 회원 식별자, 회원 이름, 회원 이메일을 받아오기로 했기 때문에 세 개의 scope만을 선택했다. 각 scope에 대한 설명은 여기서 확인할 수 있다.

• userinfo.email: 사용자의 이메일 주소
• userinfo.profile: 사용자의 name, family name 등 기본 프로필 정보
• openid: 사용자 식별 정보를 알려준다. 일반적인 서비스에서는 사용자를 식별할 때 이메일보다 훨씬 고유한 값을 이용하는데, 그 고유값을 리턴해준다고 보면 된다. 참고

 

---

 

6. 테스트에 사용할 구글 계정을 추가한다. 스크린샷엔 siltarae라는 계정이 적혀있지만 실제로는 내 계정을 적었다.

---

 

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

 

 

---

 

8. OAuth 클라이언트 ID 생성에 필요한 정보를 입력한다.

• 애플리케이션 유형: 웹 애플리케이션 선택
• 이름: 서비스명 입력
• 승인된 리디렉션 URI: 구글 서버가 인증 코드를 보내줄 URI를 입력한다. 사용자가 구글 로그인에 성공하면 구글 서버에서 해당 URL로 GET요청을 보내며 인증 코드를 전송해준다. 인증 코드는 URL 뒤에 쿼리 파라미터로 붙어서 온다. 따라서 구글 서버는 https://localhost:8080/auth/google/callback?code=4/0fv23r92v... 의 형식으로 GET 요청을 보내준다.
  프로젝트 배포 시에는 localhost:8080 부분을 실제 도메인으로 바꿔주어야 함에 주의하자.
• 캡쳐에는 인증 코드를 백으로 보내게 했지만, 개발 과정에서 프론트 쪽으로 코드를 넘겨주도록 변경했다. 이유는 다음 글에서 설명하겠다.
• 승인된 자바스크립트 원본은 입력하지 않아도 되므로 패스한다.

 

 

---

 

9. 이제 OAuth 동의 화면 - 앱 게시를 눌러, 앱을 테스트 모드에서 게시 상태로 변경해준다. 이렇게 하면 테스트 사용자 말고 다른 사용자들도 구글 로그인을 이용할 수 있게 된다.

 

 

 

 

 

 

 

 

여기까지 무사히 끝마쳤다면, 사용자 인증 정보 탭에서 클라이언트명을 클릭해보자. 클라이언트 ID, 클라이언트 보안 비밀번호(=클라이언트 시크릿)가 발급된 것을 확인할 수 있다. 

 

유의깊게 봐야 할 부분은 빨간 박스를 쳐둔 세 군데이다. 특히 클라이언트 시크릿은 절대!!! 노출되면 안되므로 주의해야 한다.

 

다음 시간에는 구글 로그인 창으로 넘어가는 방법과, 로그인 성공 후 승인 코드를 액세스 토큰으로 바꿔오는 방법에 대해 설명해볼 예정✨