TIL no.79 - Django - Google API (Front End)

박준규·2019년 11월 14일

이번 포스팅에서는 Google API에 접근해보려합니다.

Google ID 플랫폼을 참고했습니다.

일단, Google Cloud Platform에서 다음과 같은 절차를 진행해야 합니다.

  1. 프로젝트 생성
  2. OAuth 클라이언트 생성(Web Application)
  3. Client-id, Client-Secret 확인
  4. redirect uri 설정

1. Access Code 받기

Google ID 플랫폼에서 OAuth2.0 for Server-sid Web apps의 절차를 진행하겠습니다.

먼저, html에서 약식으로 login 버튼을 만들어줍니다.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <a href="https://accounts.google.com/o/oauth2/v2/auth?
    scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.metadata.readonly&
    include_granted_scopes=true&
    state=state_parameter_passthrough_value&
    redirect_uri={encoded 자신이 설정한 redirect_uri}&
    response_type=code&
    client_id={자신이 생성한 Client_id}">google login</a>
</body>
</html>

redirect_uri는 이 곳에서 encoding을 진행한 후에 넣어주어야 합니다.

혹시나 사라진 사이트라면 구글에 'url encode online'이라고 검색해서 나오는 사이트에서 진행하시면 됩니다.

스크린샷, 2019-11-14 18-22-15.png

약식으로 버튼을 만들었습니다.

이 버튼을 클릭하면 Google의 Login페이지로 넘어가고
해당 앱에 유저정보를 허락할 것인지 유저에게 동의를 구합니다.

유저가 동의한다면 Access Code가 쿼리스트링에 담겨진 상태로
프로젝트에 설정해둔 redirect_uri로 이동합니다.

저 같은 경우는 redirect_uri를 Django의 View로 연결해놨습니다.

스크린샷, 2019-11-14 18-31-51.png

Access Code가 쿼리스트링의 code에 담겨져 있기 때문에 위와 같이 view를 작성하면 다음과 같이 Access Code를 확인할 수 있습니다.

스크린샷, 2019-11-14 18-29-22.png

브라우저의 url 창을 확인하면 쿼리스트링에 code가 담겨있는 것을 확인할 수 있습니다.

2. Access token 받기

이제 Access Code를 받았으니 이를 이용해서 Access Token을 받아오면 됩니다.

url = 'https://www.googleapis.com/oauth2/v4/token'

headers = {'Content-Type': 'application/x-www-form-urlencoded'}
         
body = {
	'code' : f'{google_access_token}',
	'client_id' : '{Client_id}',
	'client_secret' : '{Client_secret}',
	'redirect_uri' : '{redirect_uri}',
	'grant_type' : 'authorization_code',
	}

1. Access Code 받기에서 받은 code와 여러 값들을 body에 담고
headers는 위와 같이 설정해준 뒤,
해당 url에 POST method로 요청합니다.

스크린샷, 2019-11-14 18-42-06.png

이제 Access Token을 Browser에서 확인할 수 있습니다.

스크린샷, 2019-11-14 18-44-13.png

Access Token을 활용해 API에 접근하는 것에 대해서는 다음 포스팅에서 다뤄보도록 하겠습니다.

profile
devzunky@gmail.com

0개의 댓글