brunch

You can make anything
by writing

C.S.Lewis

by 한상훈 Jul 06. 2018

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

구글 APIs 엑세스를 위한 CORS 사용법

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


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

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


원문 링크:




구글 APIs 엑세스를

위한 CORS 사용법

구글 APIs는 Cross-origin Resource Sharing(CORS)을 이용해 요청과 응답을 지원합니다. CORS를 사용하면 모든 자바스크립트 클라이언트 라이브러리를 로드할 필요가 없습니다. 그러나 만약 당신이 사용자의 개인정보에 접근하길 원한다면, OAuth 2.0 메커니즘을 이용해야 합니다. 이것을 가능하게 하기 위해서 구글은 독립형 인증 클라이언트(자바스크립트 클라이언트의 서브셋)를 제공합니다.


이 페이지는 독립형 인증 클라이언트의 사용법과 CORS가 구글 APIs에 엑세스하는 방법을 설명합니다.


독립형 인증 클라이언트 로딩

자바스크립트 클라이언트의 load 함수를 통해 독립형 인증 클라이언트는 로드될 수 있습니다.


CORS 사용하기

시작하기 위해서 CORS의 사용법을 다루는 뛰어난 HTML5 튜토리얼을 확인하고 싶을 수 있습니다. CORS 요청을 만들기 위해 XMLHttpsRequest2를 사용하세요.


알려드립니다: 이 문서의 예제는 XMLHttpsRequest 생성자를 사용합니다. 지원하고자 하는 브라우저 호환성을 꼭 확인해주세요. 크로스-브라우저 호환성을 위해서 튜토리얼 링크에 있는 createCORSRequest와 같은 헬퍼 함수를 사용하세요.


구글 API에 하는 CORS 요청은 REST 요청과 유사합니다. CORS 요청을 위한 URL은 아래의 패턴을 따릅니다.


예제: REST 요청

예제: 동일한 CORS 요청

XMLHttpsRequest.setRequestHeader를 사용해 요청 해더는 요청을 추가합니다.

XMLHttpsRequest.send 메소드를 사용해 요청 바디로 보냅니다.


당신은 이벤트 리스너(onload 또는 error)를 통해 콜백을 추가할 수 있습니다. 이 링크로 XMLHttpsRequest 이벤트의 정보를 확인하세요.


권한부여 요청 만들기

권한부여 요청을 생성하여 엑세스 토큰을 획득하기 위해선 동일한 gapi.auth2 메소드를 사용합니다. 이 메소드는 표준 자바스크립트 클라이언트 또는 auth-only 클라이언트를 통해 사용할 수 있습니다. 엑세스 토큰을 획득하기 위한 지침은 권한부여 페이지를 확인하세요.


CORS를 사용해 권한부여 요청을 만드는 방법은 2가지입니다.

- 인증 요청 해더 안에 엑세스 토큰 보내기

- 엑세스 토큰을 URL안의 파라미터(access_token)로 포함하기


엑세스 토큰을 확인하기 위해선 GoogleUser 오브젝트의 getAuthResponse() 메소드를 요청하세요. OAuth 2.0 토큰의 형태는 메소드와 클래스 문서를 참조하세요.


예제 1: 요청 해더 사용하기


예제 2: URL 파라미터 사용하기


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