Guia de início rápido do JavaScript

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

Os guias de início rápido explicam como configurar e executar um app que chama uma API do Google Workspace. Este guia usa uma abordagem de autenticação simplificada adequada 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 app.

Este guia de início rápido usa as bibliotecas de cliente de API recomendadas do Google Workspace para processar alguns detalhes do fluxo de autenticação e autorização.

Objetivos

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

Pré-requisitos

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

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

Prepare 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 na nuvem 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 People.

  Ativar a API

Configurar a tela de permissão OAuth

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

1. No Console de APIs do Google, acesse o menu > Plataforma de autenticação do Google > Branding.

   Acessar o branding

2. Se você já configurou a plataforma de autenticação do Google, pode configurar as seguintes configurações da tela de permissão OAuth em Branding, Público e Acesso a dados. Se você vir uma mensagem informando que a plataforma de autenticação do Google ainda não está configurada, clique em Começar:
1. Em Informações do app, no campo Nome do app, insira um nome para o app.
2. Em E-mail para suporte do usuário, escolha um endereço de e-mail de suporte para que os usuários possam entrar em contato com você se tiverem dúvidas sobre o consentimento.
3. Clique em Próxima.
4. Em Público, selecione Interno.
5. Clique em Próxima.
6. Em Informações de contato, insira um endereço de e-mail para receber notificações sobre mudanças no projeto.
7. Clique em Próxima.
8. Em Concluir, revise a Política de dados do usuário dos serviços de API do Google e, se concordar, selecione Concordo com a Política de dados do usuário dos serviços de API do Google.
9. Clique em Continuar.
10. Clique em Criar.
3. Por enquanto, você pode pular a adição de escopos. No futuro, ao criar um app para uso fora da sua organização do Google Workspace, você precisará mudar o Tipo de usuário para Externo. Em seguida, adicione os escopos de autorização necessários para o app. Para saber mais, consulte o guia completo Configurar a permissão OAuth guide.

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 plataforma.

1. No Console de APIs do Google, acesse o menu > Plataforma de autenticação do Google > Clientes.

   Acessar clientes

2. Clique em Criar cliente.
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 de APIs do Google.
5. Adicione URIs autorizados relacionados ao seu 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 de onde o 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 pode enviar respostas.
6. Clique em Criar.

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

   Anote o ID do cliente. Os secrets do cliente não são usados para aplicativos da Web.

Anote essas credenciais porque elas serão necessárias 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 Copy para copiar a chave de API e usá-la no código do app. A chave de API também pode ser encontrada na seção "Chaves de API" das credenciais do projeto.
   • Para evitar o uso não autorizado, recomendamos restringir os locais e as APIs em que a chave de API pode ser usada. Para mais detalhes, consulte Adicionar restrições 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:

   people/quickstart/index.html

   Ver no GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>People API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>People 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/people/v1/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/contacts.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 listConnectionNames();
           };
   
           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 display name if available for 10 connections.
          */
         async function listConnectionNames() {
           let response;
           try {
             // Fetch first 10 files
             response = await gapi.client.people.people.connections.list({
               'resourceName': 'people/me',
               'pageSize': 10,
               'personFields': 'names,emailAddresses',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const connections = response.result.connections;
           if (!connections || connections.length == 0) {
             document.getElementById('content').innerText = 'No connections found.';
             return;
           }
           // Flatten to string to display
           const output = connections.reduce(
               (str, person) => {
                 if (!person.names || person.names.length === 0) {
                   return `${str}Missing display name\n`;
                 }
                 return `${str}${person.names[0].displayName}\n`;
               },
               'Connections:\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 que você criou ao autorizar credenciais para um aplicativo da Web.
   • YOUR_API_KEY: a chave de API que você criou.

Execute 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
   

3. No navegador, acesse http://localhost:8000.
4. Você verá 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 na autorização.
   2. Clique em Aceitar.

O aplicativo JavaScript é executado e chama a API People.

Próximas etapas

• Teste as APIs do Google Workspace no APIs Explorer
  • Resolver problemas de autenticação e autorização
  • Documentação de referência da API People
  • Seção google-api-javascript-client do GitHub