JavaScript 코드 샘플

아래 코드 샘플에서는 JavaScript용 Google API 클라이언트 라이브러리를 사용합니다. 이 샘플은 GitHub의 YouTube API 코드 샘플 저장소의 javascript 폴더에서 다운로드할 수 있습니다.

코드는 https://www.googleapis.com/auth/yt-analytics.readonly 범위에 액세스할 수 있는 사용자 권한을 요청합니다.

return gapi.auth2.getAuthInstance()
    .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
    ...

애플리케이션에서 다른 범위에 대한 액세스 권한을 요청해야 할 수도 있습니다. 예를 들어 YouTube Analytics API와 YouTube Data API를 호출하는 애플리케이션은 사용자가 YouTube 계정에 대한 액세스 권한도 부여해야 할 수 있습니다. 승인 개요에서는 YouTube 분석 API를 호출하는 애플리케이션에서 일반적으로 사용되는 범위를 식별합니다.

일일 채널 통계 가져오기

이 예에서는 YouTube 분석 API를 호출하여 승인된 사용자의 채널에 대한 2017년의 일일 조회수와 기타 측정항목을 가져옵니다. 이 샘플에서는 Google API JavaScript 클라이언트 라이브러리를 사용합니다.

승인 사용자 인증 정보 설정

이 샘플을 처음으로 로컬에서 실행하기 전에 프로젝트의 승인 사용자 인증 정보를 설정해야 합니다.

  1. Google API 콘솔에서 프로젝트를 만들거나 선택합니다.
  2. 프로젝트에서 YouTube 분석 API를 사용 설정합니다.
  3. 사용자 인증 정보 페이지 상단에서 OAuth 동의 화면 탭을 선택합니다. 이메일 주소를 선택하고, 아직 설정되지 않은 경우 제품 이름을 입력한 다음 저장 버튼을 클릭합니다.
  4. 사용자 인증 정보 페이지에서 사용자 인증 정보 만들기 버튼을 클릭하고 OAuth 클라이언트 ID를 선택합니다.
  5. 애플리케이션 유형으로 웹 애플리케이션을 선택합니다.
  6. '승인된 JavaScript 원본' 필드에 코드 샘플을 제공할 URL을 입력합니다. 예를 들어 http://localhost:8000 또는 http://yourserver.example.com와 같은 이름을 사용할 수 있습니다. '승인된 리디렉션 URI' 필드는 비워두어도 됩니다.
  7. 만들기 버튼을 클릭하여 사용자 인증 정보 만들기를 마칩니다.
  8. 대화상자를 닫기 전에 클라이언트 ID를 복사합니다. 이 ID는 코드 샘플에 입력해야 합니다.

샘플의 로컬 사본 만들기

그런 다음 샘플을 로컬 파일에 저장합니다. 샘플에서 다음 줄을 찾아 YOUR_CLIENT_ID를 승인 사용자 인증 정보를 설정할 때 획득한 클라이언트 ID로 바꿉니다.

gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});

코드 실행

이제 샘플을 실제로 테스트할 준비가 되었습니다.

  1. 웹브라우저에서 로컬 파일을 열고 브라우저에서 디버깅 콘솔을 엽니다. 버튼 두 개가 표시된 페이지가 표시됩니다.
  2. 승인 및 로드 버튼을 클릭하여 사용자 승인 흐름을 시작합니다. 앱이 채널 데이터를 가져오도록 승인하면 브라우저의 콘솔에 다음 줄이 출력됩니다. 
    Sign-in successful
GAPI client loaded for API
  3. 위의 선 대신 오류 메시지가 표시되면 프로젝트에 설정한 승인된 리디렉션 URI에서 스크립트를 로드하고 있는지, 위의 설명대로 클라이언트 ID를 코드에 넣었는지 확인합니다.
  4. 실행 버튼을 클릭하여 API를 호출합니다. 브라우저의 콘솔에 response 객체가 출력됩니다. 이 객체에서 result 속성은 API 데이터가 포함된 객체에 매핑됩니다.

샘플 코드

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    return gapi.client.load("https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.youtubeAnalytics.reports.query({
      "ids": "channel==MINE",
      "startDate": "2017-01-01",
      "endDate": "2017-12-31",
      "metrics": "views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained",
      "dimensions": "day",
      "sort": "day"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>

yt_analytics_v2.html