Integrar o Login do Google no seu app da Web

O Login do Google gerencia o fluxo do OAuth 2.0 e o ciclo de vida do token, simplificando a integração com as APIs do Google. Um usuário sempre tem a opção de revogar o acesso a um aplicativo a qualquer momento.

Este documento descreve como concluir uma integração básica do Login do Google.

Criar credenciais de autorização

Qualquer aplicativo que use o OAuth 2.0 para acessar as APIs do Google precisa ter credenciais de autorização que identifiquem o aplicativo para o servidor OAuth 2.0 do Google. As etapas a seguir explicam como criar credenciais para seu projeto. Seus aplicativos podem usar as credenciais para acessar as APIs que você ativou para esse projeto.

  1. Go to the Clients page.
  2. Clique em Criar cliente.
  3. Selecione o tipo de aplicativo Aplicativo da Web.
  4. Dê um nome ao cliente OAuth 2.0 e clique em Criar.

Depois que a configuração for concluída, anote o ID do cliente criado. Você vai precisar dele para concluir as próximas etapas. Uma chave secreta do cliente também é criada, mas você só precisa dela para operações do lado do servidor.

Carregar a biblioteca da plataforma do Google

Você precisa incluir a Biblioteca da plataforma do Google nas páginas da Web que integram o Login do Google.

<script src="https://apis.google.com/js/platform.js" async defer></script>

Especificar o ID do cliente do app

Especifique o ID do cliente criado para seu app no Google Developers Console com o elemento meta google-signin-client_id.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

Adicionar um botão de Login do Google

A maneira mais fácil de adicionar um botão de login do Google ao seu site é usar um botão de login renderizado automaticamente. Com apenas algumas linhas de código, você pode adicionar um botão que se configura automaticamente para ter o texto, o logotipo e as cores adequados para o estado de login do usuário e os escopos solicitados.

Para criar um botão de Login do Google que use as configurações padrão, adicione um elemento div com a classe g-signin2 à sua página de login:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Acessar informações do perfil

Depois de fazer login de um usuário com o Google usando os escopos padrão, você pode acessar o ID, o nome, o URL do perfil e o endereço de e-mail do usuário no Google.

Para recuperar informações de perfil de um usuário, use o método getBasicProfile().

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

Desconectar um usuário

Você pode permitir que os usuários saiam do seu app sem sair do Google adicionando um botão ou link de saída ao seu site. Para criar um link de encerramento da sessão, anexe uma função que chama o método GoogleAuth.signOut() ao evento onclick do link.

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>