Guia de início rápido do JavaScript

Os guias de início rápido explicam como configurar e executar um app que chama uma API do Google Workspace.

Os guias de início rápido do Google Workspace usam as bibliotecas de cliente da API para lidar com alguns detalhes do fluxo de autenticação e autorização. Recomendamos que você use as bibliotecas de cliente para seus próprios apps. Antes de executar o app de exemplo, é necessário ativar a autenticação e a autorização em cada um dos guias de início rápido. Se você não conhece a autenticação e a autorização das APIs do Google Workspace, leia a Visão geral da autenticação e autorização.

Crie um aplicativo da Web em JavaScript que faça solicitações à API Admin SDK.

Objetivos

  • Configurar o ambiente.
  • Configurar o exemplo.
  • Execute a amostra.

Pré-requisitos

  • Um domínio do Google Workspace com acesso à API ativado.
  • Uma Conta do Google nesse domínio com privilégios de administrador.

Configurar o ambiente

Para concluir este guia de início rápido, configure o ambiente.

Ativar a API

Antes de usar as APIs do Google, você precisa ativá-las em um projeto do Google Cloud. É possível ativar uma ou mais APIs em um único projeto do Google Cloud.

  • No console do Google Cloud, ative a API Admin SDK.

    Ativar a API

Autorizar credenciais de um aplicativo da Web

Para se autenticar como usuário final e acessar os dados do usuário no seu app, crie um ou mais IDs do cliente OAuth 2.0. Um ID do cliente é usado para identificar um único app nos servidores OAuth do Google. Se o aplicativo for executado em várias plataformas, crie um ID do cliente separado para cada uma.
  1. No Console do Google Cloud, acesse Menu > APIs e serviços > Credenciais.

    Ir para Credenciais

  2. Clique em Criar credenciais > ID do cliente OAuth.
  3. Clique em Tipo de aplicativo > Aplicativo da Web.
  4. No campo Nome, digite um nome para a credencial. Esse nome só é mostrado no console do Google Cloud.
  5. Adicione URIs autorizados relacionados ao seu app:
    • Apps do lado do cliente (JavaScript): em Origens JavaScript autorizadas, clique em Adicionar URI. Em seguida, digite um URI para usar nas solicitações do navegador. Identifica os domínios de que seu aplicativo pode enviar solicitações de API para o servidor OAuth 2.0.
    • Apps do lado do servidor (Java, Python e outros): em URIs de redirecionamento autorizados, clique em Adicionar URI. Em seguida, insira um URI de endpoint para o qual o servidor OAuth 2.0 possa enviar respostas.
  6. Clique em Criar. A tela criada pelo cliente OAuth é exibida, mostrando seu novo ID e chave secreta do cliente.

    Anote o ID do cliente. Chaves secretas do cliente não são usadas em aplicativos da Web.

  7. Clique em OK. A credencial recém-criada aparece em IDs do cliente OAuth 2.0.
  8. Opcional: se você estiver criando credenciais como pré-requisito para um guia de início rápido do JavaScript, também precisará gerar uma chave de API.

Anote essas credenciais porque você precisará delas mais adiante neste guia de início rápido.

Configure a amostra

  1. No diretório de trabalho, crie um arquivo chamado index.html.

  2. No arquivo index.html, cole o seguinte exemplo de código:

    adminSDK/directory/index.html
    <!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>

    Substitua:

Executar a amostra

  1. No diretório de trabalho, inicie um servidor da Web:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python3 -m http.server 8000

  2. No navegador, acesse http://localhost:8000.

  3. Na primeira vez que você executar o exemplo, ele vai solicitar a autorização de acesso:

    1. Se você ainda não estiver conectado à sua Conta do Google, será solicitado que faça login. Se você tiver feito login em várias contas, selecione uma para usar na autorização.
    2. Clique em Accept.
    3. Copie o código do navegador, cole-o no prompt de linha de comando e pressione Enter.

    As informações de autorização são armazenadas no sistema de arquivos. Portanto, na próxima vez que você executar o código de amostra, essa autorização não será solicitada.

Você criou seu primeiro aplicativo JavaScript que faz solicitações à API Admin SDK.

Próximas etapas