brunch

You can make anything
by writing

C.S.Lewis

by 한상훈 Jul 06. 2018

[번역] 구글 API 클라이언트 라이브러리 - 2

자바스크립트를 위한 구글 APIs 클라이언트 라이브러리 인증

저는 에어데스크라는 확장 프로그램을 만들고 있습니다. 새로운 기능을 만드는데 API 문서를 읽다가 이곳저곳 영어로 읽다보니 정리가 안 되는것 같아 통째로 번역했습니다. 번역은 크게 틀리진 않았을 겁니다만 혹시라도 이상한 부분을 찾으시면 댓글로 알려주세요!


첫번째 글: [번역] 구글 API 클라이언트 라이브러리 - 1

세번째 글: [번역] 구글 API 클라이언트 라이브러리 - 3


원문 링크:




자바스크립트를 위한

구글 APIs 클라이언트

라이브러리 인증


개요

사용자의 개인정보에 접근하기 위해선 당신의 애플리케이션은 구글 인증 및 권한 부여 정책을 따라 작동해야합니다. 구글은 2단계로 API 접근 단계를 정의합니다.




애플리케이션을 위한 엑세스키 얻기

엑세스키를 획득하기 위해서 구글 개발자 콘솔에서 당신의 애플리케이션 이름과 엑세스할 구글 APIs를 지정합니다. Simple 엑세스의 경우, 구글은 당신의 애플리케이션을 구별하여 Google 인증 서버와 통신하기 위한 유일한 API키를 생성합니다.


Authorized 엑세스의 경우, 당신의 웹사이트 프로토콜과 도메인을 구글에 말해줘야 합니다. 그러면 구글은 클라이언드 ID를 생성합니다. 당신의 애플리케이션은 Google 인증 서버에 클라이언트 ID 제출하고, OAuth 2.0 엑세스 토큰을 획득합니다.


이 절차에 대한 자세한 사항은 시작하기 페이지를 참조해주세요. 아래의 설명과 예제을 통해 사용자 인증정보를 어떻게 당신의 애플리케이션에 사용하는지 확인하세요.


API키를 이용한 Simple 엑세스

API키는 당신의 애플리케이션의 인증이 필요하지 않은 요청을 구분합니다. 당신의 애플리케이션이 Authorized 엑세스가 필요하건, 필요치 않건 당신의 코드는 apiKey와 함께 gapi.client.init 요청을 해야합니다.


Simple API 엑세스에 대한 전체 예제는 이 링크를 확인하세요.


Authorized 엑세스

유저의 개인 정보에 접근하기 위해선 당신의 애플리케이션은 Google의 OAuth 2.0 메커니즘을 따라 작동해야합니다.


OAuth 2.0의 원리

구글 API에 엑세스하기 위해 OAuth 2.0 사용하기의 개요를 통해 시작하고 싶을지도 모릅니다.무대 뒤에선 OAuth 2.0 메커니즘이 복잡한 절차를 통해 사용자와 애플리케이션 그리고 구글 인증 서버를 인증합니다.

자바스크립트 클라이언트 라이브러리의 구성요소는 당신을 위해 이 프로세스를 관리합니다. 그렇기에 당신의 모든 코드는 아래의 오브젝트를 통과해야합니다.

당신의 애플리케이션을 등록할 때 받은 클라이언트 ID

당신의 애플리케이션이 사용할 데이터를 지정한 스코프 오브젝트


스코프에 대해서

스코프 오프젝트는 특정한 API를 통해 당신의 애플리케이션이 사용할 엑세스 단계를 정의합니다. 어떻게 스코프가 작동되는지에 대한 정보는 OAuth 2.0 문서를 확인해주세요. 이 스코프는 한정된 문자열 공간입니다. 아래의 예제는 구글 드라이브의 read-only 엑세스를 보여줍니다.



OAuth 2.0 권한부여 순서

자바스크립트 클라이언트 라이브러리는 권한 부여를 요구하는 요청을 만들기 위해서 OAuth 2.0 클라이언트 사이드 플로우를 사용합니다. 만약 실제 사용되는걸 보고 싶다면 구글 OAuth 2.0 플레이그라운드에서 확인할 수 있습니다. 자바스크립트 클라이언트 라이브러리에 사용되는 OAuth 2.0 권한부여 순서는 아래와 같습니다.

1. 사용자가 로그인 링크를 클릭합니다.

2. 브라우저는 팝업을 보여주고, 사용자는 웹 애플리케이션의 권한 부여를 허락합니다.

3. 권한 부여가 성공적으로 마친 후엔 브라우저는 리다이렉트하여 애플리케이션의 요청으로 돌아갑니다.

4. 권한 부여 토큰을 저장하고 팝업을 닫습니다.

이 절차가 끝난 후엔 유저는 당신의 애플리케이션에 로그인하고, 애플리케이션은 사용자 정보에 접근할 권한을 얻게 됩니다. 사용자의 로그인 상태는 섹션이 바뀌어도 유지됩니다. 다음에 사용자가 당신의 애플리케이션을 열면 사용자는 자동적으로 로그인하게 됩니다.


인증 예제

샘플 페이지의 인증 예제를 확인하세요.


CORS 요청 만들기

권한이 부여된 CORS 요청을 만들기 위해 당신은 요청 해더 또는 URL 파라메터를 더해 OAuth 2.0 엑세스 토큰을 추가할 수 있습니다. 자세한 사항은 CORS 문서를 확인하세요.


독립형 인증 클라이언트

당신의 애플리케이션은 인증만을 위한 전체 자바스크립트 클라이언트 라이브러리의 서브셋을 사용할 수 있습니다. 이 경우 오직 gapi.auth 메소드만을 포함합니다. 독립적인 인증 클라이언트를 사용하기 위해선 모든 CORS 지원이 되는 환경에서만 작동됩니다. 예를 들면 크롬 확장 프로그램 또는 모바일 브라우저 등입니다.

만약 당신의 애플리케이션이 CORS를 지원하지 않는 브라우저에서 작동되야한다거나 자바스크립트 클라이언트 라이브러리의 다른 기능을 사용하길 원한다면 표준 자바스크립트 클라이언트를 사용하세요.

어떻게 인증 클라이언트를 사용하는지와 로드하는지에 대한 정보는 CORS 문서를 참고하세요.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari