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 a API Google Workspace.

Os guias de início rápido do Google Workspace usam as bibliotecas de cliente da API para lidar com algumas do fluxo de autenticação e autorização. Recomendamos que você você usa as bibliotecas de cliente para seus próprios aplicativos. Este guia de início rápido usa um autenticação simplificada, apropriada para um teste de nuvem. Para um ambiente de produção, recomendamos aprender sobre autenticação e autorização antes como escolher as credenciais de acesso adequados para seu app.

Criar um aplicativo da Web em JavaScript que faça solicitações à API Google Drive Activity.

Objetivos

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

Pré-requisitos

  • Uma Conta do Google

Configurar o ambiente

Para concluir este guia de início rápido, configure seu 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 Google Drive Activity.

    Ativar a API

Se você estiver usando um novo projeto do Google Cloud para concluir este guia de início rápido, configure a tela de permissão OAuth e se adicione como usuário de teste. Se você já concluiu esta etapa para seu projeto do Cloud, pule para a próxima seção.

  1. No console do Google Cloud, acesse o menu > APIs e Serviços > Tela de permissão OAuth.

    Acessar a tela de permissão OAuth

  2. Em Tipo de usuário, selecione Interno e clique em Criar.
  3. Preencha o formulário de registro do app e clique em Save and continue.

  4. Por enquanto, ignore a adição de escopos e clique em Salvar e continuar. No futuro, quando você criar um aplicativo para usar fora de sua organização do Google Workspace, mude o Tipo de usuário para Externo. Em seguida, adicionar os escopos de autorização exigidos pelo app.

  5. Analise o resumo do registro do app. Para fazer alterações, clique em Editar. Se o app estiver tudo certo, clique em Voltar para o painel.

Autorizar credenciais para um aplicativo da Web

Para autenticar usuários finais e acessar os dados deles no seu app, você precisa criar um ou mais IDs do cliente OAuth 2.0. Um ID do cliente é usado para identificar um único app nos servidores OAuth do Google. Caso seu app seja executado em várias plataformas, crie um ID do cliente separado para cada plataforma.
  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 app:
    • Apps do lado do cliente (JavaScript): em Origens JavaScript autorizadas, clique em Adicionar URI. Em seguida, insira um URI a ser usado para solicitações do navegador. Isso identifica os domínios dos quais seu aplicativo pode enviar solicitações de API para o servidor OAuth 2.0.
    • Apps do lado do servidor (Java, Python e mais): em URIs de redirecionamento autorizados, clique em Adicionar URI. Em seguida, insira um URI de endpoint para o qual o servidor OAuth 2.0 pode enviar respostas.
  6. Clique em Criar. A tela criada pelo cliente OAuth será exibida, mostrando o novo ID e a chave secreta do cliente.

    Anote o ID do cliente. As chaves secretas não são usadas para aplicativos da Web.

  7. Clique em OK. A credencial recém-criada aparece em IDs do cliente do OAuth 2.0.

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

Criar uma chave de API

  1. No console do Google Cloud, acesse o menu > APIs e Serviços > Credenciais.

    Ir para Credenciais

  2. Clique em Criar credenciais >. Chave de API.
  3. Sua nova chave de API será exibida.
    • Clique em Copiar para copiar a chave de API e usá-la no código do app. A chave de API também pode ser nas "chaves de API" das credenciais do seu projeto.
    • Clique em Restringir chave para atualizar as configurações avançadas e limitar o uso. da sua chave de API. Para mais detalhes, consulte Como aplicar restrições de chave de API.

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:

    drive/activity-v2/index.html
    <!DOCTYPE html>
<html>
  <head>
    <title>Drive Activity API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Drive Activity 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/driveactivity/v2/rest';

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

        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 recent activity.
       */
      async function listActivities() {
        let response;
        try {
          response = await gapi.client.driveactivity.activity.query({
            'pageSize': 10,
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const activities = response.result.activities;
        if (!activities || activities.length == 0) {
          document.getElementById('content').innerText = 'No activities found.';
          return;
        }
        // Flatten to string to display
        const output = activities.reduce(
            (str, activity) => {
              const time = getTimeInfo(activity);
              const action = getActionInfo(activity['primaryActionDetail']);
              const actors = activity.actors.map(getActorInfo);
              const targets = activity.targets.map(getTargetInfo);
              return `${str}${time}: ${truncated(actors)}, ${action}, ${truncated(targets)}\n`;
            },
            'Activities:\n');
        document.getElementById('content').innerText = output;
      }

      // Utility methods for formatting activity records

      /**
       * Returns a string representation of the first N elements in a list.
       * @param {string[]} array - Values to join
       * @param {number} limit - # of elements to show
       * @return {string} formatted string
       */
      function truncated(array, limit = 2) {
        const contents = array.slice(0, limit).join(', ');
        const more = array.length > limit ? ', ...' : '';
        return `[${contents}${more}]`;
      }

      /**
       * Returns the first found property name in an object.
       * @param {object} object - Object to search
       * @return {string} key name or 'unknown'
       */
      function getOneOf(object) {
        const props = Object.getOwnPropertyNames(object);
        if (props.length === 0) {
          return 'unknown';
        }
        return props[0];
      }

      /**
       * Returns a time associated with an activity.
       * @param {object} activity - Activity record
       * @return {string} Formatted timestamp
       */
      function getTimeInfo(activity) {
        if ('timestamp' in activity) {
          return activity.timestamp;
        }
        if ('timeRange' in activity) {
          return activity.timeRange.endTime;
        }
        return 'unknown';
      }

      /**
       * Returns the type of action.
       * @param {object} actionDetail
       * @return {string} Action type as string
       */
      function getActionInfo(actionDetail) {
        return getOneOf(actionDetail);
      }

      /**
       * Returns user information, or the type of user if not a known user.
       * @param {object} user - User record
       * @return {string} user type as string
       */
      function getUserInfo(user) {
        if ('knownUser' in user) {
          const knownUser = user['knownUser'];
          const isMe = knownUser['isCurrentUser'] || false;
          return isMe ? 'people/me' : knownUser['personName'];
        }
        return getOneOf(user);
      }

      /**
       * Returns actor information, or the type of actor if not a user.
       * @param {object} actor - Actor record
       * @return {string} actor type as string
       */
      function getActorInfo(actor) {
        if ('user' in actor) {
          return getUserInfo(actor['user']);
        }
        return getOneOf(actor);
      }

      /**
       * Returns the type of a target and an associated title.
       * @param {object} target - Activity target record
       * @return {string} target type as string
       */
      function getTargetInfo(target) {
        if ('driveItem' in target) {
          const title = target.driveItem.title || 'unknown';
          return `driveItem:"${title}"`;
        }
        if ('drive' in target) {
          const title = target.drive.title || 'unknown';
          return `drive:"${title}"`;
        }
        if ('fileComment' in target) {
          const parent = target.fileComment.parent || {};
          const title = parent.title || 'unknown';
          return `fileComment:"${title}"`;
        }
        return `${getOneOf(target)}:unknown`;
      }
    </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, instale o pacote http-server:

    npm install http-server

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

    npx http-server -p 8000
  1. No navegador, acesse http://localhost:8000.
  2. Será exibida uma solicitação para autorizar o acesso:
    1. Se você ainda não tiver feito login na sua Conta do Google, faça isso quando solicitado. Se você tiver feito login em várias contas, selecione uma para usar na autorização.
    2. Clique em Aceitar.

O app JavaScript executa e chama a API Google Drive Activity.

Próximas etapas