구글에서 사용자정보 가져오기(OAuth2.0)

1 분 소요

OAuth2.0 사용하여 구글 사용자정보 가져오기

0. 구글 클라이언트 ID / SECRET 얻기 + scope 설정

  • 내가만든 앱이 구글에 접근가능하도록 권한설정
  • URL: google cloud console > API 및 서비스
  • 구글 클라이언트 ID/SECRET 생성
  • scope 설정: 사용할 API 권한설정( 여기서 허용한 권한만 앱이 접근가능 )

1. 구글 인증페이지 이동 URL (GET)

  • 사용자가 구글 페이지에 이동하여 로그인 + 접근권한설정 할 수 있는 URL 제공하기
  • parameter 는 url encoding 필요
  • 가독성을 위하여 줄바꿈함 ( 실제로 사용시 줄바꿈 없애고 1줄로 만들어서 보낼것 )
https://accounts.google.com/o/oauth2/v2/auth?
scope=https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email&
access_type=offline& // offline 으로 설정시, refresh_token 을 받을 수 있다.
include_granted_scopes=true&
response_type=code&
state=state_parameter_passthrough_value&
redirect_uri=리다이렉트URI& // code 를 받을 주소, 구글에 미리 셋팅필요
client_id=구글클라이언트ID

2. 리다이렉트 URL 예시 (GET)

  • 1번에서 인증성공시, 다음과 같이 리다이렉트 됨
  • 여기서 필요한것은 code
http://127.0.0.1:5500/pages/oauth2_redirect.html?
state=state_parameter_passthrough_value&
code=4%2F0AY0e-g5A4WpaPMpTdbP4gfLo3lCytTZG38k9mZAVC6q2wvflE5XzAArVkkNfdQdkcE9WYA&
scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar.readonly+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&authuser=0&prompt=none

3. access_token 얻기 (POST)

  • 2번에서 받은 code 값으로 access_token 얻기
URL  : https://www.googleapis.com/oauth2/v4/token
헤더 : Content-Type : application/x-www-form-urlencoded

var urlencoded = new URLSearchParams();
urlencoded.append("code", 2번에서 받은 code);
urlencoded.append("client_id", 구글 클라이언트 ID);
urlencoded.append("client_secret", 구글 클라이언트 SECRET);
urlencoded.append("redirect_uri", 리다이렉트 URI);
urlencoded.append("grant_type", "authorization_code"); // 고정값

4. access_token 으로 사용자정보 가져오기(GET)

  • access_token 을 parameter 로 전달하여 가져오기
https://www.googleapis.com/oauth2/v2/userinfo?access_token=3번에서얻은액세스토큰
  • access_token 을 헤더에 셋팅하여 가져오기 ( 이게 권장방법 이라고 함. 보안성 강화 )
URL : https://www.googleapis.com/oauth2/v2/userinfo
헤더 : Bearer + 3번에서얻은액세스토큰

5. access_token 만료시 refresh_token 으로 access_token 얻기(POST)

  • 1번 인증시 access_type=offline 일때 refresh_token 을 받을 수 있음
  • access_token 만료 (1시간 인듯)시, 사용자에게 재인증요구를 하지않고 액세스토큰을 다시 얻을 수 있음
URL  : https://www.googleapis.com/oauth2/v4/token
헤더 : Content-Type : application/x-www-form-urlencoded

var urlencoded = new URLSearchParams();
urlencoded.append("client_id", 구글 클라이언트 ID);
urlencoded.append("client_secret", 구글 클라이언트S ECRET);
urlencoded.append("refresh_token", 리프레시토큰);
urlencoded.append("grant_type", "refresh_token"); // 고정값

6. OAuth2.0 개념도

7. 참조

태그:

업데이트: