구글 소셜 로그인 in Django - 2. 유저 정보 받아오기

구글 소셜 로그인 시 애플리케이션 세팅이 되어있어야 한다. 해당 정보는

구글 소셜 로그인 in Django - 1.애플리케이션 세팅하기에서 확인

구글 소셜 로그인 in Django - 1. 애플리케이션 세팅하기

 

 

서버 측 웹앱

웹 서버 애플리케이션용 OAuth 2.0 사용  |  Authorization  |  Google for Developers

클라이언트 측 웹앱

클라이언트 측 웹 애플리케이션용 OAuth 2.0  |  Authorization  |  Google for Developers

 

 

1️⃣ 구조 이해하기

유저가 앱을 통해 토큰 요청 > 유저 정보 동의 > 토큰 발급해(해시 파라미터) > 토큰으로 Google API 요청

의 간단한 과정으로 이루어져 있다.

 

 

2️⃣ 토큰 받기

요청 필수 매개변수 3가지.

매개변수에 대한 자세한 내용은 여기에서 확인

매개변수
client_id	필수 항목  애플리케이션의 클라이언트 ID입니다. 이 값은 API Console Credentials page에서 확인할 수 있습니다.
redirect_uri	필수 항목  사용자가 승인 과정을 완료한 후 API 서버가 사용자를 리디렉션하는 위치를 결정합니다. 이 값은 클라이언트의 API Console Credentials page에서 구성한 OAuth 2.0 클라이언트에 대해 승인된 리디렉션 URI 중 하나와 정확히 일치해야 합니다. 이 값이 제공된 client_id의 승인된 리디렉션 URI와 일치하지 않으면 redirect_uri_mismatch 오류가 발생합니다.  http 또는 https 스키마, 대소문자, 후행 슬래시('/')가 모두 일치해야 합니다.
response_type	필수 항목 자바스크립트 애플리케이션은 매개변수 값을 token로 설정해야 합니다. 이 값은 승인 프로세스를 완료한 후 사용자가 리디렉션되는 URI (#)의 프래그먼트 식별자에 액세스 토큰을 name=value 쌍으로 반환하도록 Google 승인 서버에 지시합니다.
scope	필수 항목  애플리케이션이 사용자 대신 액세스할 수 있는 리소스를 식별하는 공백으로 구분된 범위의 목록입니다. 이 값은 Google이 사용자에게 표시하는 동의 화면에 알립니다.  범위를 사용하면 애플리케이션이 필요한 리소스에 대한 액세스만 요청하는 동시에 사용자가 애플리케이션에 부여하는 액세스 양을 제어할 수 있습니다. 따라서 요청된 범위의 수와 사용자 동의를 얻을 가능성 사이에는 반비례 관계가 있습니다.  가능하면 애플리케이션이 컨텍스트에 따라 승인 범위에 대한 액세스를 요청하는 것이 좋습니다. 증분 승인을 통해 컨텍스트에서 사용자 데이터에 대한 액세스를 요청함으로써 사용자는 애플리케이션이 요청하는 액세스 권한이 필요한 이유를 더 쉽게 파악할 수 있습니다.

그 외에 state, include_granted_scopes, login_hint, prompt 매개변수를 설정해줄 수 있다(state는 권장 항목)

 

• 리디렉션 샘플

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

 

• form을 만들어서 submit을 통해 요청을 보내는 자바 스크립트용 예시

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

 

scope에서 여러 url로 요청을 보낼 경우 space로 한칸 띄워주면 된다.

{
...
    'scope' : 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
...
}

 

해당 함수를 실행하면 구글 엔드포인트 주소로 GET요청을 보내고,

구글 계정으로 로그인 화면이 나올 것이다. (동의창의 오류 메시지에 관한 부분은 여기)

 

해당 위치에서 사용자가 동의를 하면, url 파라미터에 accesstoken을 실어서 redirect uri로 보내준다.

 

• 액세스 토큰 응답 예시

https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

이제 해당 액세스 토큰을 백엔드로 보내서 백엔드에서 사용자 정보를 조회하면 된다.

 

3️⃣ 토큰으로 사용자 정보 조회하기

• 요청 양식

GET /oauth2/v2/userinfo HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

 

•  장고에서의 예시

    def post(self, request):
        access_token = request.data["access_token"]
        user_data = requests.get(
            "https://www.googleapis.com/oauth2/v2/userinfo",
            headers={"Authorization": f"Bearer {access_token}"},
        )

 

구글 로그인은 인가 코드를 요구하는 등의 과정 없이 바로 access_token이 나오기 때문에,

해당 access토큰으로 원하는 주소로 요청을 보내주기만 하면 유저 정보를 받아올 수 있다.

 

 

4️⃣ 그 외의 정보 

 

OAuth 2.0 범위

Google API의 OAuth 2.0 범위  |  Authorization  |  Google for Developers

 

OAuth 2.0 정책

OAuth 2.0 Policies  |  Authorization  |  Google for Developers

 

OAuth 2.0 구글 API 개요

OAuth 2.0을 사용하여 Google API에 액세스하기  |  Authorization  |  Google for Developers