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

자바스크립트 빠른 시작

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

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

Admin SDK API를 요청하는 자바스크립트 웹 애플리케이션을 만듭니다.

목표

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

기본 요건

Node.js 및 npm 설치
Google Cloud 프로젝트.

API 액세스가 사용 설정된 Google Workspace 도메인
관리자 권한을 가진 도메인의 Google 계정

환경 설정

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

API 사용 설정

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

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

API 사용 설정

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

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

Google Cloud 콘솔에서 메뉴 > API 및 서비스 > 사용자 인증 정보로 이동합니다.
사용자 인증 정보로 이동
사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 클릭합니다.
애플리케이션 유형 > 웹 애플리케이션을 클릭합니다.
이름 필드에 사용자 인증 정보의 이름을 입력합니다. 이 이름은 Google Cloud Console에만 표시됩니다.
앱과 관련된 승인된 URI를 추가합니다.
- 클라이언트 측 앱 (자바스크립트): 승인된 자바스크립트 원본에서 URI 추가를 클릭합니다. 그런 다음 브라우저 요청에 사용할 URI를 입력합니다. 애플리케이션에서 OAuth 2.0 서버로 API 요청을 보낼 수 있는 도메인을 식별합니다.
- 서버 측 앱 (자바, Python 등): 승인된 리디렉션 URI에서 URI 추가를 클릭합니다. 그런 다음 OAuth 2.0 서버가 응답을 보낼 수 있는 엔드포인트 URI를 입력합니다.
만들기를 클릭합니다. OAuth 클라이언트 생성 화면이 표시되어 새로운 클라이언트 ID와 클라이언트 보안 비밀번호가 표시됩니다.
클라이언트 ID를 기록해 둡니다. 웹 애플리케이션에는 클라이언트 보안 비밀번호가 사용되지 않습니다.
OK를 클릭합니다. 새로 생성된 사용자 인증 정보가 OAuth 2.0 클라이언트 ID 아래에 표시됩니다.

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

API 키 만들기

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

샘플 설정

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

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

adminSDK/directory/index.html

GitHub에서 보기

<!DOCTYPE html>
<html>
  <head>
    <title>Directory API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Directory 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/admin/directory_v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/admin.directory.user.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 listUsers();
        };

        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 the first 10 users in the domain.
       */
      async function listUsers() {
        let response;
        try {
          const request = {
            'customer': 'my_customer',
            'maxResults': 10,
            'orderBy': 'email',
          };
          response = await gapi.client.directory.users.list(request);
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const users = response.result.users;
        if (!users || users.length == 0) {
          document.getElementById('content').innerText = 'No users found.';
          return;
        }
        // Flatten to string to display
        const output = users.reduce(
            (str, user) => `${str}${user.primaryEmail} (${user.name.fullName})\n`,
            'Users:\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 계정에 로그인되어 있지 않으면 로그인하라는 메시지가 표시됩니다. 여러 계정에 로그인한 경우 승인에 사용할 계정 1개를 선택합니다.
2. 동의를 클릭합니다.
3. 브라우저에서 코드를 복사하여 명령줄 프롬프트에 붙여넣고 Enter를 누릅니다.
승인 정보는 파일 시스템에 저장되므로 다음에 샘플 코드를 실행할 때 승인을 요청하는 메시지가 표시되지 않습니다.

Admin SDK API를 요청하는 첫 번째 자바스크립트 애플리케이션을 만들었습니다.