관리 메뉴

Unwound Developer

OAuth2.0을 통해 구글 계정 정보 받아오기 본문

Web/Spring

OAuth2.0을 통해 구글 계정 정보 받아오기

unwind 2023. 2. 1. 17:06
반응형

OAuth를 통해 구글 로그인을 구현해보려했습니다.

그런데, 구글링을 통해 본 정보들이 전부 똑같더라구요..

그리고 OAuth를 사용하는 가장 기초적인 방법부터 알고싶은데, 생각보다 어려운 내용의 정보밖에 없었습니다.

어찌저찌 OAuth사용에 성공하긴했는데, 아주 기초적이라 실제로 개발하다보면 어떤 문제가 생길지 모르겠습니다.


우선, build.gradle에 추가해줘야할 dependencies입니다.

//	OAuth 라이브러리
	implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'

그리고 apllication.properties에 저번에 말했던 클라이언트 ID, 클라이언트 SECRET와 스코프가 필요합니다.

이제 저 정보들을 사용할 서비스에서 발급받아야합니다.

여기서는 어떤 서비스를 사용할건지에 따라 방법이 갈릴거에요.

저는 구글서비스를 사용했습니다.

 

우선

https://console.cloud.google.com/welcome?project=starwriting 

 

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com

에 들어가서, 새 프로젝트 만듭니다.

만드는 과정에서 설정했던것은 딱히 없던것으로 기억해요.

만든 프로젝트에 들어가면 왼쪽 카테고리에

다음과 같이 5개의 항목이 존재하는데, 사용자 인증 정보를 들어가요.

사용자 인증 정보

사용자 인증 정보 만들기 -> OAuth 클라이언트 ID로 들어가요.

 

애플리케이션 유형은 저는 웹 애플리케이션을 선택했습니다.

리디렉션 URI

그리고, 리디렉션 URI에 localhost:8080/oauth2/callback/google을 추가해줍니다.

이 URI가 oauth2.0의 표준적인 리디렉션 URI라고 합니다.

만들기를 실행하면 끝이에요.

OAuth2.0 클라이언트 목록

올바르게 만드는데 성공했다면, 다음과 같은 아이디가 하나 보일거에요.

들어가면 클라이언트 ID, SECRET을 모두 확인가능합니다.

client id, secret을 확인가능하다

이제 프로퍼티에 해당 id와 비밀번호를 작성해야 합니다.

# oauth (클라이언트 ID)
spring.security.oauth2.client.registration.google.client-id=클라이언트id
# oauth (클라이언트 보안 비밀번호)
spring.security.oauth2.client.registration.google.client-secret=클라이언트 비밀번호
# oauth스코프
spring.security.oauth2.client.registration.google.scope=profile,email

다음과 같이 적어줬습니다.

scope는 구글 계정의 프로필과,이메일을 받아오도록 작성했어요.

프로필과 이메일 외에는 어떤 이유에선지 받아오지 않아집니다...

이 부분은 해결해야할 문제입니다.

 

그리고 GetMapping을 통해서 간단히 테스트 해봤어요.

@GetMapping("/api/members/google")
    public Map<String, Object> currentMember(OAuth2AuthenticationToken oAuth2AuthenticationToken) {
        return oAuth2AuthenticationToken.getPrincipal().getAttributes();
    }

저번에 작성한 글처럼 AccessToken을 발급받은 후, 그 토큰에 담긴 정보를 보여주는 것 같습니다.

 

그런데, 이제 매핑된 주소로 들어가보니 오류가 뜨더라구요.

권한이 어쩌구 하는데, 아까 구글 클라우드 플랫폼에서 테스트 사용자로 허용된 계정만 로그인이 가능하다고 합니다.

실제 서비스일때는 상관없는데, 테스트단계에서 사용하려면 테스트 사용자를 추가해줘야 한다고 해요.

테스트 사용자 추가

다음과 같이 테스트 사용자에 로그인할 계정을 추가했습니다.

이제 매핑된 url로 접속하면, 구글 로그인창이 뜹니다.

테스트 사용자로 추가한 계정으로 로그인하면, JSON객체처럼 정보가 넘어옵니다.

로그인에 성공시 받아오는 객체

아까 scope설정했던 간략한 profile과 email정보입니다.

 

반응형