자바스크립트 빠른 시작

이 빠른 시작 가이드에서는 YouTube Data API에 요청하는 간단한 페이지를 설정하는 방법을 설명합니다. 이 빠른 시작에서는 실제로 두 가지 API 요청을 수행하는 방법을 설명합니다.

1. 애플리케이션을 식별하는 API 키를 사용하여 GoogleDevelopers YouTube 채널에 대한 정보를 검색합니다.
2. OAuth 2.0 클라이언트 ID를 사용하여 YouTube 채널에 대한 정보를 검색하는 승인된 요청을 제출합니다.

참고: 일반적으로 API 키를 사용하는 모든 사용 사례의 경우 첫 번째 예시의 안내를 따르고 OAuth 2.0을 사용한 승인이 필요한 사용 사례의 경우 두 번째 예시의 안내를 따르면 됩니다. 더 많은 예는 사용 사례 및 코드 샘플 도구를 참고하세요.

기본 요건

이 빠른 시작을 실행하려면 다음이 필요합니다.

• Python 2.4 이상 (웹 서버 제공용)
• 인터넷 및 웹브라우저 액세스
• Google 계정

1단계: 프로젝트 및 사용자 인증 정보 설정하기

API 콘솔에서 프로젝트를 만들거나 선택합니다. API 콘솔에서 프로젝트의 다음 작업을 완료합니다.

1. 라이브러리 패널에서 YouTube Data API v3를 검색합니다. 해당 API의 등록정보를 클릭하고 프로젝트에 API가 사용 설정되어 있는지 확인합니다.

2. 사용자 인증 정보 패널에서 두 개의 사용자 인증 정보를 만듭니다.

   1. API 키 만들기 API 키를 사용하여 사용자 승인이 필요하지 않은 API 요청을 만듭니다. 예를 들어 공개 YouTube 채널에 대한 정보를 가져오기 위해 사용자 승인이 필요하지는 않습니다.

   2. OAuth 2.0 클라이언트 ID 만들기 애플리케이션 유형을 웹 애플리케이션으로 설정합니다. 사용자 승인이 필요한 요청에는 OAuth 2.0 사용자 인증 정보를 사용해야 합니다. 예를 들어 현재 인증된 사용자의 YouTube 채널에 대한 정보를 검색하려면 사용자 승인이 필요합니다.

      승인된 자바스크립트 원본 필드에 URL http://localhost:8000을 입력합니다. 승인된 리디렉션 URI 필드는 비워두어도 됩니다.

2단계: 샘플 설정 및 실행

측면 패널의 API 탐색기 위젯을 사용하여 GoogleDevelopers YouTube 채널에 대한 정보를 가져오는 샘플 코드를 가져옵니다. 이 요청은 API 키를 사용하여 애플리케이션을 식별하며 사용자 승인이나 샘플을 실행하는 사용자의 특별한 권한이 필요하지 않습니다.

1. API의 channels.list 메서드 문서를 엽니다.

2. 이 페이지의 '일반적인 사용 사례' 섹션에는 메서드가 사용되는 몇 가지 일반적인 방법을 설명하는 표가 있습니다. 표의 첫 번째 목록은 채널 ID별로 결과를 나열하는 것입니다.

   첫 번째 등록정보의 코드 기호를 클릭하여 전체 화면 API 탐색기를 열고 채웁니다.

   

3. Fullscreen API Explorer의 왼쪽에는 다음이 표시됩니다.

   1. 요청 매개변수 헤더 아래에 메서드에서 지원하는 매개변수 목록이 있습니다. part 및 id 매개변수 값을 설정해야 합니다. id 매개변수 값인 UC_x5XG1OV2P6uZZ5FSM9Ttw는 GoogleDevelopers YouTube 채널의 ID입니다.

   2. 매개변수 아래에 Credentials(사용자 인증 정보)라는 섹션이 있습니다. 해당 섹션의 풀다운 메뉴에 API 키 값이 표시되어야 합니다. API 탐색기는 기본적으로 데모 사용자 인증 정보를 사용하여 더 쉽게 시작할 수 있도록 합니다. 그러나 자체 API 키를 사용하여 샘플을 로컬에서 실행할 것입니다.

      

4. Fullscreen API Explorer의 오른쪽에는 코드 샘플이 있는 여러 언어의 탭이 표시되어 있습니다. 자바스크립트 탭을 선택합니다.

5. 코드 샘플을 복사하여 example.html 파일에 저장합니다.

6. 다운로드한 샘플에서 YOUR_API_KEY 문자열을 찾아 이 빠른 시작의 1단계에서 만든 API 키로 바꿉니다.

7. 작업 디렉터리에서 다음 명령어를 사용하여 웹 서버를 시작합니다.

   Python 2.x

   python -m SimpleHTTPServer 8000
   

   Python 3.x

   python -m http.server 8000
   

8. 브라우저에서 example.html 파일을 엽니다. 또한 Chrome 브라우저에서 '개발자 도구'와 같은 브라우저의 개발자 도구를 엽니다.

   1. 페이지에서 로드 버튼을 클릭하여 자바스크립트용 Google API 클라이언트 라이브러리를 로드합니다. 버튼을 클릭하면 GAPI 클라이언트가 로드되었다는 메모가 개발자 콘솔에 표시됩니다.

   2. 실행 버튼을 클릭하여 API 요청을 보냅니다. 그러면 개발자 콘솔에 API 응답이 표시됩니다.

3단계: 승인된 요청 실행

이 단계에서는 GoogleDevelopers YouTube 채널에 대한 정보를 가져오는 대신 내 YouTube 채널에 관한 정보를 가져오도록 코드 샘플을 수정합니다. 이 요청은 사용자 승인이 필요합니다.

1. API의 channels.list 메서드 문서로 돌아갑니다.

2. '일반 사용 사례' 섹션에서 표의 세 번째 등록정보에 대한 코드 기호를 클릭합니다. 이 사용 사례는 '내 채널'에 대해 list 메서드를 호출하는 것입니다.

3. 다시 전체 화면 API 탐색기 왼쪽에 매개변수 목록과 사용자 인증 정보 섹션이 표시됩니다. 그러나 GoogleDevelopers 채널에 대한 정보를 가져온 예는 다음과 같이 두 가지가 변경되었습니다.

   1. 매개변수 섹션에서 id 매개변수 값을 설정하는 대신 mine 매개변수 값을 true로 설정해야 합니다. API 서버에 현재 인증된 사용자의 채널에 관한 정보를 검색하도록 지시합니다.

   2. 사용자 인증 정보 섹션의 풀다운 메뉴에서 Google OAuth 2.0 옵션을 선택해야 합니다.

      또한 범위 표시 링크를 클릭하면 https://www.googleapis.com/auth/youtube.readonly 범위를 선택해야 합니다.

      

4. 이전 예와 마찬가지로 자바스크립트 탭을 선택하고 코드 샘플을 복사하여 example.html에 저장합니다.

   코드에서 YOUR_CLIENT_ID 문자열을 찾아 이 빠른 시작의 1단계에서 만든 클라이언트 ID로 바꿉니다.

5. 작업 디렉터리에서 다음 명령어를 사용하여 웹 서버를 시작합니다.

   Python 2.x

   python -m SimpleHTTPServer 8000
   

   Python 3.x

   python -m http.server 8000
   

6. 브라우저에서 http://localhost:8000/example.html 파일로 이동합니다. Chrome 브라우저에서 '개발자 도구'와 같은 브라우저의 개발자 도구를 엽니다.

7. 페이지에서 승인 및 로드 버튼을 클릭하여 자바스크립트용 Google API 클라이언트 라이브러리를 로드하고 승인 흐름을 시작합니다. 애플리케이션에 YouTube 계정의 데이터를 읽을 수 있는 권한을 부여하라는 메시지가 표시됩니다.

   권한을 부여하면 개발자의 콘솔에 로그인이 성공했으며 API 클라이언트가 로드되었다는 메시지가 표시됩니다.

8. 실행 버튼을 클릭하여 API 요청을 보냅니다. 그러면 개발자 콘솔에 API 응답이 표시됩니다.

추가 자료

• Google Developers Console 도움말 문서
• 자바스크립트용 Google API 클라이언트 라이브러리 문서
• YouTube Data API 참조 문서