Esta página foi traduzida pela API Cloud Translation.

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

Os guias de início rápido do Google Workspace usam as bibliotecas de cliente da API para processar alguns detalhes do fluxo de autenticação e autorização. Recomendamos que você use bibliotecas de cliente para seus próprios aplicativos. Neste guia de início rápido, usamos uma abordagem de autenticação simplificada, apropriada para um ambiente de teste. Para um ambiente de produção, recomendamos aprender sobre autenticação e autorização antes de escolher as credenciais de acesso adequadas para seu aplicativo.

Crie um aplicativo da Web em JavaScript que faz solicitações à API Google Sheets.

Objetivos

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

Pré-requisitos

Node.js e npm instalados.
Um projeto do Google Cloud.

Uma Conta do Google

configure seu ambiente

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

Ativar a API

Antes de usar as APIs do Google, elas precisam ser ativadas 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 Sheets.

Ativar a API

Configurar a tela de permissão OAuth

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 adicione-se como um usuário de teste. Se você já concluiu essa etapa no projeto do Cloud, pule para a próxima seção.

No console do Google Cloud, acesse Menu > APIs e serviços > Tela de permissão OAuth.
Acessar a tela de permissão OAuth
Selecione o tipo de usuário do app e clique em Criar.
Preencha o formulário de registro do app e clique em Salvar e continuar.
Por enquanto, é possível pular a adição de escopos e clicar em Salvar e continuar. No futuro, ao criar um app para uso fora da organização do Google Workspace, será necessário adicionar e verificar os escopos de autorização exigidos pelo app.
Se você selecionou Externo como tipo de usuário, adicione usuários de teste:
1. Em Usuários de teste, clique em Adicionar usuários.
2. Insira seu endereço de e-mail e outros usuários de teste autorizados, depois clique em Salvar e continuar.
Analise o resumo de registro do seu app. Para fazer mudanças, clique em Editar. Se o registro do app parecer OK, clique em Voltar ao painel.

Autorizar credenciais para um aplicativo da Web

Para fazer a autenticação como usuário final e acessar os dados do usuário no 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 app for executado em várias plataformas, você precisará criar um ID do cliente separado para cada uma delas.

No console do Google Cloud, acesse Menu > APIs e serviços > Credenciais.
Ir para Credenciais
Clique em Criar credenciais > ID do cliente OAuth.
Clique em Tipo de aplicativo > Aplicativo da Web.
No campo Nome, digite um nome para a credencial. Esse nome só aparece no console do Google Cloud.
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. Identifica os domínios a partir dos quais seu aplicativo pode enviar solicitações da 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 pode enviar respostas.
Clique em Criar. A tela do cliente OAuth criado é exibida, mostrando seu novo ID e chave secreta do cliente.
Anote o ID do cliente. As chaves secretas do cliente não são usadas para aplicativos da Web.
Clique em OK. A credencial recém-criada aparece em IDs do cliente OAuth 2.0.

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

criar uma chave de API

No console do Google Cloud, acesse Menu > APIs e serviços > Credenciais.
Ir para Credenciais
Clique em Criar credenciais > Chave de API.
Sua nova chave de API é exibida.
- Clique em Copiar para copiar sua chave de API e usá-la no código do app. A chave também pode ser encontrada na seção "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

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

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

sheets/quickstart/index.html

Ver no GitHub

<!DOCTYPE html>
<html>
  <head>
    <title>Sheets API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Sheets 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://sheets.googleapis.com/$discovery/rest?version=v4';

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

        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 names and majors of students in a sample spreadsheet:
       * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
       */
      async function listMajors() {
        let response;
        try {
          // Fetch first 10 files
          response = await gapi.client.sheets.spreadsheets.values.get({
            spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
            range: 'Class Data!A2:E',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const range = response.result;
        if (!range || !range.values || range.values.length == 0) {
          document.getElementById('content').innerText = 'No values found.';
          return;
        }
        // Flatten to string to display
        const output = range.values.reduce(
            (str, row) => `${str}${row[0]}, ${row[4]}\n`,
            'Name, Major:\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:

YOUR_CLIENT_ID: o ID do cliente criado quando você autorizou credenciais para um aplicativo da Web.
YOUR_API_KEY: a chave de API que você criou como um Pré-requisito.

Executar a amostra

No diretório de trabalho, instale o pacote http-server:
```
npm install http-server
```
No diretório de trabalho, inicie um servidor da Web:
```
npx http-server -p 8000
```

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

Seu aplicativo JavaScript é executado e chama a API Google Sheets.