Como usar o modelo de token

A biblioteca JavaScript google.accounts.oauth2 ajuda você a solicitar que o usuário consentir e receber um token de acesso para trabalhar com dados do usuário. Ele é baseado na Fluxo de concessão implícita do OAuth 2.0 criado para permitir que você chame o Google diretamente usando REST e CORS, ou usar nossa biblioteca de clientes de APIs do Google para JavaScript (também conhecido como gapi.client) para acesso simples e flexível aos nossos APIs mais complexas.

Antes de acessar os dados protegidos do usuário em um navegador, os usuários no seu site acionam o seletor de conta do Google baseado na Web, o login e os processos de consentimento; e, por fim, Os servidores OAuth do Google emitem e retornam um token de acesso ao seu app da Web.

No modelo de autorização com base em token, não é necessário armazenar tokens de atualização no servidor de back-end.

Recomendamos que você siga a abordagem descrita aqui em vez da técnicas cobertas pelo antigo OAuth 2.0 para aplicativos da Web do lado do cliente guia.

Configuração

Encontre ou crie um ID do cliente seguindo as etapas descritas na seção Tenha Guia do ID do cliente da API do Google. Em seguida, adicione a biblioteca de cliente às páginas. no site que vão chamar as APIs do Google. Por fim, inicialize o token para o cliente. Normalmente, isso é feito dentro do gerenciador onload da biblioteca de cliente.

Inicializar um cliente de token

Chame initTokenClient() para inicializar um novo cliente de token com o método ID do cliente, você pode incluir uma lista de um ou mais escopos que o usuário precisa acessar:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

Acionar o fluxo do token OAuth 2.0

Use o método requestAccessToken() para acionar o fluxo de UX do token e conseguir uma token de acesso. O Google solicita que o usuário:

  • Escolha a conta dele,
  • fazer login na Conta do Google, caso ainda não esteja conectado;
  • dê consentimento para que seu app da Web acesse cada escopo solicitado.

Um gesto do usuário aciona o fluxo do token: <button onclick="client.requestAccessToken();">Authorize me</button>

O Google retorna um TokenResponse contendo um token de acesso e uma lista de escopos aos quais o usuário concedeu acesso ou um erro ao gerenciador de retornos de chamada.

Os usuários podem fechar o seletor de conta ou as janelas de login. Nesse caso, função de callback não será invocada.

O design e a experiência do usuário para seu aplicativo só devem ser implementados após um análise completa das políticas do OAuth 2.0 do Google. Essas políticas abrangem trabalhar com vários escopos, quando e como lidar com o consentimento do usuário e muito mais.

A autorização incremental é uma metodologia de política e design de app usada para solicitar acesso a recursos, usando escopos, somente conforme necessário, e tudo de uma só vez. Os usuários podem aprovar ou rejeitar o compartilhamento de recursos individuais solicitado pelo app, isso é conhecido como permissões granulares.

Durante esse processo, o Google solicita o consentimento do usuário, listando individualmente cada escopo solicitado, os usuários selecionam os recursos a serem compartilhados com seu app e Por fim, o Google invoca sua função de callback para retornar um token de acesso e o escopos aprovados. Em seguida, o app processa com segurança os vários resultados diferentes possível com permissões granulares.

Autorização incremental

Para aplicativos da Web, os dois cenários de alto nível a seguir demonstram autorização usando:

  • Um app Ajax de uma única página, geralmente usando XMLHttpRequest com acesso dinâmico a do Google Cloud.
  • Com várias páginas da Web, os recursos são separados e gerenciados por página.

Esses dois cenários são apresentados para ilustrar considerações de design e metodologias, mas não se destinam a ser recomendações abrangentes sobre como para incorporar o consentimento ao seu app. Apps reais podem usar uma variação ou uma combinação dessas técnicas.

Ajax

Adicionar suporte para autorização incremental ao seu app fazendo várias chamadas a requestAccessToken() e usando o objeto OverridableTokenClientConfig o parâmetro scope para solicitar escopos individuais no momento em que são necessários apenas quando necessário. Neste exemplo, os recursos serão solicitados e estarão visíveis somente depois que um gesto do usuário expandir uma seção de conteúdo recolhida.

App Ajax
Inicialize o cliente de token no carregamento da página: 
        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });
Solicitar consentimento e receber tokens de acesso por gestos do usuário clique em "+" para abrir:

Documentos para ler

Mostrar documentos recentes

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );

Próximos eventos

Mostrar informações da agenda

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );

Mostrar fotos

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
             })
           );

Cada chamada para requestAccessToken aciona um momento de consentimento do usuário, seu app têm acesso apenas aos recursos exigidos pela seção escolhida pelo usuário se expandem, limitando o compartilhamento de recursos com a escolha do usuário.

Várias páginas da Web

Ao projetar para autorização incremental, várias páginas são usadas para solicitar apenas os escopos necessários para carregar uma página, reduzindo a complexidade e a necessidade fazer várias chamadas para obter o consentimento do usuário e recuperar um token de acesso;

Aplicativo de várias páginas
Página da Web Código
Página 1. Documentos para ler 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();
Página 2. Próximos eventos 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();
Página 3. Carrossel de fotos 
  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();

Cada página solicita o escopo necessário e recebe um token de acesso chamando initTokenClient() e requestAccessToken() no tempo de carregamento. Nesse cenário, páginas da Web individuais são usadas para separar claramente a funcionalidade do usuário e recursos por escopo. Em uma situação real, páginas individuais podem solicitar vários escopos relacionados.

Permissões granulares

As permissões granulares são tratadas da mesma forma em todos os cenários. depois requestAccessToken() invoca sua função de callback e um token de acesso retornado, verifique se o usuário aprovou os escopos solicitados usando hasGrantedAllScopes() ou hasGrantedAnyScope(). Exemplo:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly \
          https://www.googleapis.com/auth/documents.readonly \
          https://www.googleapis.com/auth/photoslibrary.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
          'https://www.googleapis.com/auth/photoslibrary.readonly')) {
        // Look at pictures
        ...
      }
      if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
          'https://www.googleapis.com/auth/calendar.readonly',
          'https://www.googleapis.com/auth/documents.readonly')) {
        // Meeting planning and review documents
        ...
      }
    }
  },
});

Todas as concessões já aceitas de sessões ou solicitações anteriores também serão incluído na resposta. Um registro do consentimento do usuário é mantido por usuário e ID do cliente e persiste em várias chamadas para initTokenClient() ou requestAccessToken(). Por padrão, o consentimento do usuário é necessário apenas na primeira vez que um usuário visita seu site e solicita um novo escopo, mas pode ser solicitado em cada carregamento de página usando prompt=consent em objetos de configuração do cliente de token.

Como trabalhar com tokens

No modelo de token, um token de acesso não é armazenado pelo SO ou pelo navegador. um novo token é obtido primeiro no tempo de carregamento da página ou, posteriormente, pelo acionamento de uma chamada para requestAccessToken() com um gesto do usuário, como o pressionamento de um botão.

Como usar REST e CORS com as APIs do Google

Um token de acesso pode ser usado para fazer solicitações autenticadas às APIs do Google usando REST e CORS. Isso permite que os usuários façam login, concedam consentimento, e o Google emita uma token de acesso e seu site para funcionar com os dados do usuário.

Neste exemplo, veja os próximos eventos da agenda dos usuários que fizeram login usando o token de acesso retornado por tokenRequest():

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();

Consulte Como usar o CORS para acessar as APIs do Google para saber mais.

A próxima seção mostra como fazer uma integração fácil com APIs mais complexas.

Como trabalhar com a biblioteca JavaScript das APIs do Google

O cliente de token funciona com a biblioteca de cliente das APIs do Google para JavaScript. Confira o snippet de código abaixo.

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      gapi.client.setApiKey('YOUR_API_KEY');
      gapi.client.load('calendar', 'v3', listUpcomingEvents);
    }
  },
});

function listUpcomingEvents() {
  gapi.client.calendar.events.list(...);
}

Expiração do token

Por padrão, os tokens de acesso têm uma vida útil curta. Se o token de acesso expirar antes do fim da sessão do usuário, consiga um novo token chamando requestAccessToken() de um evento orientado pelo usuário, como o pressionamento de um botão.

Chame o método google.accounts.oauth2.revoke para remover o consentimento do usuário e acesso a recursos para todos os escopos concedidos ao app. Um acesso válido é necessário para revogar essa permissão:

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });