Usar o modelo de código

A biblioteca dos Serviços de Identificação do Google permite que os usuários solicitem uma autorização do Google usando um fluxo pop-up baseado em navegador ou um fluxo de UX de redirecionamento. Isso inicia um fluxo seguro do OAuth 2.0 e resulta em um token de acesso usado para chamar APIs do Google em nome de um usuário.

Resumo do fluxo do código de autorização do OAuth 2.0:

• Em um navegador, com um gesto, como o clique de um botão, a Conta do Google proprietário solicita um código de autorização do Google.
• O Google responde enviando um código de autorização exclusivo para uma chamada de retorno em seu app da Web JavaScript em execução no navegador do usuário ou que invoca diretamente endpoint do código de autorização usando um redirecionamento do navegador.
• Sua plataforma de back-end hospeda um endpoint do código de autorização e recebe a o código-fonte. Após a validação, esse código é trocado pelo acesso por usuário e de atualização dos tokens usando uma solicitação para o endpoint de token do Google.
• O Google valida o código de autorização e confirma que a solicitação foi originada da sua plataforma segura, emite tokens de acesso e atualização e retorna o usando o endpoint de login hospedado pela sua plataforma.
• Seu endpoint de login recebe os tokens de acesso e atualização, armazenando com segurança o token de atualização para uso posterior.

Inicializar um cliente de código

O método google.accounts.oauth2.initCodeClient() inicializa um cliente de código.

Modo pop-up ou de redirecionamento

Você pode optar por compartilhar um código de autenticação usando os recursos Redirecionar ou Fluxo de usuário no modo Pop-up. Com o modo de redirecionamento, você hospeda uma autorização OAuth2 endpoint no seu servidor, e o Google redireciona o user agent para esse endpoint, compartilhar o código de autorização como um parâmetro de URL. Para o modo pop-up, defina um JavaScript gerenciador de callback, que envia o código de autorização para seu servidor. Modo pop-up podem ser usados para fornecer uma experiência de usuário perfeita sem que os visitantes tenham que a sair do site.

Para inicializar um cliente para:

• Redirecione o fluxo de UX, defina ux_mode como redirect e o valor de redirect_uri ao endpoint do código de autorização da plataforma. O valor precisa corresponder exatamente a um dos URIs de redirecionamento autorizados para o OAuth 2.0 configurado no Console de APIs. Ele também precisa estar de acordo com nossa Regras de validação do URI de redirecionamento.

• Fluxo de UX de pop-up, defina ux_mode como popup e o valor de callback como a o nome da função que você usará para enviar códigos de autorização ao seu de plataforma.

Como prevenir ataques ao CSRF

Para ajudar a evitar ataques de falsificação de solicitações entre sites (CSRF, na sigla em inglês) um pouco diferentes são empregadas para os fluxos de UX dos modos de redirecionamento e pop-up. Para redirecionamento o parâmetro state do OAuth 2.0 é usado. Consulte a seção 10.12 do RFC6749 Falsificação de solicitações entre sites para saber mais sobre como gerar e validar o parâmetro state. Com o modo pop-up, você adiciona um cabeçalho HTTP personalizado às suas solicitações e confirma no seu servidor ele corresponde ao valor e à origem esperados.

Escolha um modo de UX para conferir um snippet de código mostrando o código de autenticação e o processamento de CSRF:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

Acionar fluxo de código OAuth 2.0

Chame o método requestCode() do cliente de código para acionar o fluxo do usuário:

<button onclick="client.requestCode();">Authorize with Google</button>

Isso vai exigir que o usuário faça login em uma Conta do Google e permita o compartilhamento escopos individuais antes de retornar um código de autorização para o o endpoint de redirecionamento ou o gerenciador de callback.

Processamento de códigos de autenticação

O Google gera um código de autorização exclusivo por usuário, que você recebe e verificar no servidor de back-end.

Para o modo pop-up, o gerenciador especificado por callback, em execução no redireciona o código de autorização para um endpoint hospedado pela plataforma.

No modo de redirecionamento, uma solicitação GET é enviada para o endpoint especificado pelo redirect_url, que compartilha o código de autorização no parâmetro code do URL. Para receba o código de autorização:

• Crie um novo endpoint de autorização se você não tiver um. implementação, ou

• Atualizar o endpoint atual para aceitar solicitações GET e URL parâmetros. Anteriormente, uma solicitação PUT com o valor do código de autorização o payload foi usado.

Endpoint de autorização

O endpoint do código de autorização precisa processar solicitações GET com esta consulta de URL parâmetros de string:

Exemplo de solicitação GET com parâmetros de URL para um endpoint chamado auth-code e hospedado por example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Quando o fluxo do código de autorização é iniciado por bibliotecas JavaScript anteriores, ou por chamadas diretas para endpoints do Google OAuth 2.0, é usada uma solicitação POST.

Exemplo de solicitação POST contendo o código de autorização como um payload na Corpo da solicitação HTTP:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

Validação do pedido

No seu servidor, faça o seguinte para ajudar a evitar ataques CSRF.

Verifique o valor do parâmetro state para o modo de redirecionamento.

Confirme se o cabeçalho X-Requested-With: XmlHttpRequest está definido para o modo pop-up.

Em seguida, você deve prosseguir com a obtenção de tokens de atualização e acesso do Google somente se você tiver verificado primeiro a solicitação do código de autorização.

Receber tokens de acesso e atualização

Depois que sua plataforma de back-end receber um código de autorização do Google e verifica a solicitação, usa o código de autorização para obter os tokens de acesso e atualizar do Google para fazer chamadas de API.

Siga as instruções a partir da Etapa 5: trocar código de autorização por atualizar e acessar tokens do guia Como usar o OAuth 2.0 para servidores da Web aplicativos.

Como gerenciar tokens

Sua plataforma armazena tokens de atualização com segurança. Excluir tokens de atualização armazenados quando contas de usuário são removidas ou o consentimento do usuário é revogado por google.accounts.oauth2.revoke ou diretamente https://myaccount.google.com/permissions.

Você também pode considerar o RISC para proteger contas de usuário com várias contas Proteção.

Normalmente, a plataforma de back-end chama as APIs do Google usando um token de acesso. Se seu aplicativo da web também chamará diretamente as APIs do Google do navegador do usuário que você precisa implementar uma forma de compartilhar o token de acesso com seu aplicativo da web, portanto, está fora do escopo deste guia. Ao seguir essa abordagem e usar o Biblioteca de cliente das APIs do Google para JavaScript use gapi.client.SetToken() para armazenar temporariamente o token de acesso no navegador memória e permitir que a biblioteca chame as APIs do Google.