이 페이지는 Cloud Translation API를 통해 번역되었습니다.

JavaScript 빠른 시작

빠른 시작에서는 Google Workspace API를 호출하는 앱을 설정하고 실행하는 방법을 설명합니다.

Google Workspace 빠른 시작에서는 API 클라이언트 라이브러리를 사용하여 인증 및 승인 흐름의 일부 세부정보를 처리합니다. 자체 앱에는 클라이언트 라이브러리를 사용하는 것이 좋습니다. 이 빠른 시작에서는 테스트 환경에 적합한 간소화된 인증 접근 방식을 사용합니다. 프로덕션 환경의 경우 앱에 적합한 액세스 사용자 인증 정보를 선택하기 전에 인증 및 승인에 관해 알아보는 것이 좋습니다.

Google Drive API를 요청하는 JavaScript 웹 애플리케이션을 만듭니다.

목표

환경을 설정합니다.
샘플을 설정합니다.
샘플을 실행합니다.

기본 요건

Node.js 및 npm이 설치되었습니다.
Google Cloud 프로젝트

Google Drive가 사용 설정된 Google 계정

환경 설정

이 빠른 시작을 완료하려면 환경을 설정하세요.

API 사용 설정

Google API를 사용하려면 먼저 Google Cloud 프로젝트에서 사용 설정해야 합니다. 단일 Google Cloud 프로젝트에서 하나 이상의 API를 사용 설정할 수 있습니다.

Google Cloud 콘솔에서 Google Drive API를 사용 설정합니다.

API 사용 설정

OAuth 동의 화면 구성

이 빠른 시작을 완료하는 데 새 Google Cloud 프로젝트를 사용하는 경우 OAuth 동의 화면을 구성합니다. Cloud 프로젝트에서 이 단계를 이미 완료했다면 다음 섹션으로 건너뜁니다.

Google Cloud 콘솔에서 메뉴 > > 브랜딩으로 이동합니다.
브랜딩으로 이동
이미 를 구성한 경우 브랜딩, 공유 대상, 데이터 액세스에서 다음 OAuth 동의 화면 설정을 구성할 수 있습니다. 아직 구성되지 않음이라는 메시지가 표시되면 시작하기를 클릭합니다.

앱 정보의 앱 이름에 앱 이름을 입력합니다.
사용자 지원 이메일에서 사용자가 동의에 관해 문의할 수 있는 지원 이메일 주소를 선택합니다.
다음을 클릭합니다.
시청자층에서 내부를 선택합니다.
다음을 클릭합니다.
연락처 정보에서 프로젝트 변경사항에 대한 알림을 받을 수 있는 이메일 주소를 입력합니다.
다음을 클릭합니다.
완료에서 Google API 서비스 사용자 데이터 정책을 검토하고 동의하는 경우 Google API 서비스: 사용자 데이터 정책에 동의합니다를 선택합니다.
계속을 클릭합니다.
만들기를 클릭합니다.

지금은 범위 추가를 건너뛰어도 됩니다. 향후 Google Workspace 조직 외부에서 사용할 앱을 만들 때는 사용자 유형을 외부로 변경해야 합니다. 그런 다음 앱에 필요한 승인 범위를 추가합니다. 자세한 내용은 전체 OAuth 동의 구성 가이드를 참고하세요.

웹 애플리케이션의 사용자 인증 정보 승인

최종 사용자를 인증하고 앱에서 사용자 데이터에 액세스하려면 OAuth 2.0 클라이언트 ID를 하나 이상 만들어야 합니다. 클라이언트 ID는 Google OAuth 서버에서 단일 앱을 식별하는 데 사용됩니다. 앱이 여러 플랫폼에서 실행되는 경우 플랫폼별로 별도의 클라이언트 ID를 만들어야 합니다.

Google Cloud 콘솔에서 메뉴 > > 클라이언트로 이동합니다.
고객으로 이동
클라이언트 만들기를 클릭합니다.
애플리케이션 유형 > 웹 애플리케이션을 클릭합니다.
이름 입력란에 사용자 인증 정보의 이름을 입력합니다. 이 이름은 Google Cloud 콘솔에만 표시됩니다.
앱과 관련된 승인된 URI를 추가합니다.
- 클라이언트 측 앱 (JavaScript): 승인된 JavaScript 출처에서 URI 추가를 클릭합니다. 그런 다음 브라우저 요청에 사용할 URI를 입력합니다. 이를 통해 애플리케이션이 OAuth 2.0 서버에 API 요청을 보낼 수 있는 도메인을 식별할 수 있습니다.
- 서버 측 앱 (Java, Python 등): 승인된 리디렉션 URI에서 URI 추가를 클릭합니다. 그런 다음 OAuth 2.0 서버가 응답을 보낼 수 있는 엔드포인트 URI를 입력합니다.
만들기를 클릭합니다.
새로 만든 사용자 인증 정보가 OAuth 2.0 클라이언트 ID 아래에 표시됩니다.

클라이언트 ID를 기록합니다. 클라이언트 보안 비밀은 웹 애플리케이션에 사용되지 않습니다.

이 사용자 인증 정보는 이 빠른 시작의 뒷부분에서 필요하므로 기록해 둡니다.

API 키 만들기

Google Cloud 콘솔에서 메뉴 > API 및 서비스 > 사용자 인증 정보로 이동합니다.
사용자 인증 정보로 이동
사용자 인증 정보 만들기 > API 키를 클릭합니다.
새 API 키가 표시됩니다.
- 복사 를 클릭하여 앱 코드에서 사용할 API 키를 복사합니다. API 키는 프로젝트 사용자 인증 정보의 'API 키' 섹션에서도 확인할 수 있습니다.
- 키 제한을 클릭하여 고급 설정을 업데이트하고 API 키 사용을 제한합니다. 자세한 내용은 API 키 제한 적용을 참고하세요.

샘플 설정

작업 디렉터리에 index.html라는 파일을 만듭니다.

index.html 파일에 다음 샘플 코드를 붙여넣습니다.

drive/quickstart/index.html

GitHub에서 보기

<!DOCTYPE html>
<html>
  <head>
    <title>Drive API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Drive API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): Set to client ID and API key from the Developer Console
      const CLIENT_ID = '<YOUR_CLIENT_ID>';
      const API_KEY = '<YOUR_API_KEY>';

      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],
        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,
          callback: '', // defined later
        });
        gisInited = true;
        maybeEnableButtons();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited && gisInited) {
          document.getElementById('authorize_button').style.visibility = 'visible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await listFiles();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print metadata for first 10 files.
       */
      async function listFiles() {
        let response;
        try {
          response = await gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': 'files(id, name)',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const files = response.result.files;
        if (!files || files.length == 0) {
          document.getElementById('content').innerText = 'No files found.';
          return;
        }
        // Flatten to string to display
        const output = files.reduce(
            (str, file) => `${str}${file.name} (${file.id})\n`,
            'Files:\n');
        document.getElementById('content').innerText = output;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  </body>
</html>

다음을 바꿉니다.

YOUR_CLIENT_ID: 웹 애플리케이션의 사용자 인증 정보를 승인할 때 만든 클라이언트 ID입니다.
YOUR_API_KEY: 기본 요건으로 만든 API 키입니다.

샘플 실행

작업 디렉터리에서 http-server 패키지를 설치합니다.
```
npm install http-server
```
작업 디렉터리에서 웹 서버를 시작합니다.
```
npx http-server -p 8000
```

브라우저에서 http://localhost:8000으로 이동합니다.
액세스를 승인하라는 메시지가 표시됩니다.
1. 아직 Google 계정에 로그인하지 않았다면 메시지가 표시될 때 로그인합니다. 여러 계정에 로그인되어 있는 경우 승인에 사용할 계정 하나를 선택합니다.
2. 수락을 클릭합니다.

JavaScript 애플리케이션이 실행되고 Google Drive API를 호출합니다.