개발자 가이드: 자바스크립트

Blogger Data API를 사용하면 클라이언트 애플리케이션에서 Google Data API 피드 형식으로 Blogger 콘텐츠를 확인하고 업데이트할 수 있습니다.

클라이언트 애플리케이션은 Blogger Data API를 사용하여 새 블로그 게시물을 만들고, 기존 블로그 게시물을 수정 또는 삭제하고, 특정 기준과 일치하는 블로그 게시물을 쿼리할 수 있습니다.

이 문서에서는 Blogger Data API의 기능에 대한 배경 정보 외에도 자바스크립트 클라이언트 라이브러리를 사용한 기본적인 Data API 상호작용의 예를 제공합니다. 라이브러리에서 사용하는 기본 프로토콜에 관해 자세히 알아보려면 이 개발자 가이드의 프로토콜 섹션을 참고하세요.

콘텐츠

대상

이 문서는 Blogger와 상호작용할 수 있는 자바스크립트 클라이언트 애플리케이션을 작성하려는 프로그래머를 대상으로 합니다. 자바스크립트 클라이언트 라이브러리를 사용한 기본 Data API 상호작용의 예를 제공합니다.

Blogger Data API 참조 정보는 프로토콜 참조 가이드를 확인하세요. 이 문서에서는 Google Data API 프로토콜자바스크립트 클라이언트 라이브러리에서 사용하는 데이터 모델 및 제어 흐름에 관한 일반적인 개념을 이해하고 있다고 가정합니다. 또한 자바스크립트로 프로그래밍하는 방법을 알고 있다고 가정합니다.

클라이언트 라이브러리에서 제공하는 클래스 및 메서드에 대한 자세한 내용은 자바스크립트 클라이언트 라이브러리 API 참조를 확인하세요.

이 문서는 순서대로 읽기를 위해 작성되었습니다. 각 예제는 이전 예시를 바탕으로 합니다.

이용약관

자바스크립트 클라이언트 라이브러리를 사용할 경우 Google 자바스크립트 클라이언트 라이브러리 이용약관을 준수하는 데 동의합니다.

지원되는 환경 정보

현재 Google은 브라우저의 웹페이지에서 실행되는 자바스크립트 클라이언트 애플리케이션만 지원합니다. 현재 지원되는 브라우저는 Firefox 1.5 이상과 Internet Explorer 6.0 이상입니다.

자바스크립트 클라이언트 라이브러리는 서비스 서버와의 모든 통신을 처리합니다. 숙련된 JS 개발자라면 같은 출처 정책에 관해 생각할 수 있습니다. 자바스크립트 클라이언트 라이브러리를 사용하면 클라이언트가 브라우저 보안 모델을 준수하면서 모든 도메인에서 Google Data API 요청을 보낼 수 있습니다.

시작하기

자바스크립트 클라이언트 애플리케이션을 작성하기 전에 라이브러리를 획득하기 위한 설정을 해야 합니다.

Blogger 계정 만들기

테스트 목적으로 Blogger 계정에 가입하는 것이 좋습니다. Blogger는 Google 계정을 사용하므로 이미 Google 계정이 있다면 모든 준비가 완료된 것입니다.

라이브러리 획득

클라이언트가 클라이언트 라이브러리를 사용하려면 먼저 서버에 클라이언트 라이브러리 코드를 요청해야 합니다.

먼저 HTML 문서의 <head> 섹션에 <script> 태그를 사용하여 Google AJAX API 로더를 가져옵니다.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

로더를 가져온 후 Google Data API 클라이언트 라이브러리를 가져오려면 HTML 문서의 <head> 섹션 또는 HTML 문서의 <head> 섹션에 있는 <script> 태그를 사용하는 자바스크립트 파일에서 호출해야 하는 자바스크립트 설정 코드에서 다음 줄을 사용합니다.

google.load("gdata", "1.x");

google.load()의 두 번째 매개변수는 요청된 자바스크립트 클라이언트 라이브러리 버전 번호입니다.버전 번호 지정 체계는 Google Maps API에서 사용되는 체계를 모델로 합니다. 가능한 버전 번호와 그 의미는 다음과 같습니다.

"1"
주요 버전 1의 마지막에서 두 번째 버전
"1.x"
주 버전 1의 최신 버전입니다.
"1.s"
주요 버전 1의 최신 안정화 버전. Google은 개발자의 의견을 바탕으로 특정 버전의 클라이언트 라이브러리를 '안정적'으로 선언합니다. 그러나 해당 버전에 최신 지형지물이 없을 수 있습니다.
"1.0", "1.1' 등
특정 버전의 주 및 부 버전으로 지정된 특정 버전의 라이브러리입니다.

google.load()를 호출한 후에는 로더가 페이지 로드가 완료될 때까지 기다린 후 코드를 호출하도록 지시해야 합니다.

google.setOnLoadCallback(getMyBlogFeed);

여기서 getMyBlogFeed()은 이 문서의 후반부에서 정의하는 함수입니다. onload 요소에 <body> 요소를 연결하는 대신 이 접근 방식을 사용합니다.

Blogger 서비스 인증

Blogger Data API를 사용하여 공개 및 비공개 피드에 모두 액세스할 수 있습니다. 공개 피드는 인증이 필요하지 않지만 읽기 전용입니다. 블로그를 수정하려면 클라이언트에서 비공개 피드를 요청하기 전에 인증해야 합니다.

자바스크립트 클라이언트 라이브러리는 AuthSub 인증 시스템을 사용합니다. 일반적인 Google Data API 인증에 대한 자세한 내용은 인증 문서를 참조하세요.

AuthSub 프록시 인증

AuthSub 프록시 인증은 Google 계정에 대해 사용자를 인증해야 하는 웹 애플리케이션에서 사용합니다. 웹사이트 운영자와 클라이언트 코드는 Blogger 사용자의 사용자 이름과 비밀번호에 대한 액세스 권한이 없습니다. 그 대신 클라이언트가 특정 사용자 대신 작업할 수 있는 특별한 AuthSub 토큰을 얻습니다.

다음은 웹 기반 자바스크립트 클라이언트의 인증 과정 중 일어나는 상황을 간략히 설명합니다.

  1. 클라이언트 애플리케이션은 클라이언트 라이브러리에서 제공하는 google.accounts.user.login() 메서드를 호출하여 사용할 Google 서비스를 나타내는 '범위' 값을 전달합니다. Blogger의 경우 범위는 "http://www.blogger.com/feeds/"입니다.
  2. 클라이언트 라이브러리는 브라우저를 통해 Google의 액세스 요청 페이지로 이동하게 됩니다. 이 페이지에서 사용자는 사용자 인증 정보를 입력하여 서비스에 로그인할 수 있습니다.
  3. 사용자가 정상적으로 로그인하면 AuthSub 시스템이 브라우저를 웹 클라이언트의 URL로 다시 전송하여 인증 토큰을 전달합니다.
  4. 자바스크립트 클라이언트 라이브러리는 토큰을 쿠키에 저장하고 google.accounts.user.login()를 호출한 클라이언트 애플리케이션의 제어 기능을 반환합니다.
  5. 이후 클라이언트 애플리케이션이 Blogger와 상호작용하는 클라이언트 라이브러리 메서드를 호출하면 클라이언트 라이브러리가 자동으로 모든 요청에 토큰을 연결합니다.

참고: 자바스크립트 클라이언트 라이브러리가 웹브라우저에서 인증된 Blogger 요청을 하려면 페이지와 동일한 도메인에서 호스팅되는 이미지가 페이지에 포함되어야 합니다. 어떤 이미지든 1픽셀 투명 이미지도 사용할 수 있지만, 페이지에 이미지가 있어야 합니다. 페이지에 이미지가 표시되지 않도록 하려면 <img> 태그의 style 속성을 사용하여 이미지를 렌더링 영역 외부에 배치하면 됩니다. 예: style="position:absolute; top: -1000px;"

다음은 로그인을 처리하는 클라이언트 애플리케이션 코드입니다. 나중에 다른 코드에서 setupMyService() 함수를 호출합니다.

function logMeIn() {
  scope = "http://www.blogger.com/feeds/";
  var token = google.accounts.user.login(scope);
}

function setupMyService() {
  var myService =
    new google.gdata.blogger.BloggerService('exampleCo-exampleApp-1');
  logMeIn();
  return myService;
}

: 사용자에게 로그인 프로세스를 수동으로 시작하라는 메시지를 표시하도록 로그인 버튼이나 기타 사용자 입력 메커니즘을 제공하는 것이 좋습니다. 대신 사용자 상호작용을 기다리지 않고 로드 직후에 google.accounts.user.login()를 호출하면 사용자가 페이지에 도착할 때 가장 먼저 보게 되는 것이 Google 로그인 페이지입니다. 사용자가 로그인하지 않기로 결정하면 Google은 페이지로 다시 연결하지 않습니다. 따라서 사용자의 관점에서 페이지를 방문하려고 했으나 전송되지 않고 다시 전송되지 않습니다. 이 시나리오는 사용자에게 혼란과 불편을 초래할 수 있습니다. 이 문서의 예시 코드에서는 로드 직후에 google.accounts.user.login()를 호출하기 때문에 간단하게 예제를 유지하지만, 실제 클라이언트 애플리케이션에는 이 방법을 사용하지 않는 것이 좋습니다.

token이라는 변수를 사용하여 작업을 수행할 필요가 없습니다. 클라이언트 라이브러리는 토큰을 추적하므로 토큰을 추적하지 않아도 됩니다.

참고: 새 BloggerService 객체를 만들면 클라이언트 라이브러리가 google.gdata.client.init()라는 메서드를 호출하여 클라이언트가 실행 중인 브라우저가 지원되는지 확인합니다. 오류가 발생하면 클라이언트 라이브러리가 사용자에게 오류 메시지를 표시합니다. 이러한 종류의 오류를 직접 처리하려면 서비스를 만들기 전에 google.gdata.client.init(handleInitError)를 명시적으로 호출하면 됩니다. 여기서 handleInitError()는 함수입니다. init 오류가 발생하면 함수가 표준 오류 객체를 수신합니다. 이 객체로 원하는 모든 것을 수행할 수 있습니다.

토큰은 google.accounts.user.logout()를 호출하여 취소할 때까지 유효합니다.

function logMeOut() {
  google.accounts.user.logout();
}

logout()를 호출하지 않으면 토큰을 저장하는 쿠키가 2년 동안 지속됩니다(사용자가 삭제하지 않는 한). 쿠키는 여러 브라우저 세션에 보관되므로 사용자가 브라우저를 닫았다가 다시 열고 클라이언트로 다시 돌아와도 로그인은 가능합니다.

하지만 세션 중에 토큰이 유효하지 않은 특수한 상황이 있습니다. Blogger가 토큰을 거부하면 클라이언트는 logout()를 호출하여 현재 토큰이 포함된 쿠키를 삭제한 다음 login()를 다시 호출하여 유효한 새 토큰을 획득해야 합니다.

다양한 컨텍스트에서 유용하게 사용할 수 있는 두 가지 다른 AuthSub 메서드가 있습니다.

  • google.accounts.user.checkLogin(scope)는 브라우저에 현재 지정된 범위의 인증 토큰이 있는지 여부를 알려줍니다.
  • google.accounts.user.getInfo()는 디버깅을 위해 현재 토큰에 대한 세부정보를 제공합니다.

자바스크립트를 사용하여 AuthSub와 상호작용하는 방법에 대한 자세한 내용(예: 토큰 관리 및 checkLogin()getInfo()에 대한 정보)은 자바스크립트 클라이언트 라이브러리를 통한 AuthSub 인증 사용 문서를 참조하세요.

맨 위로