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 sua integração com as APIs do Google. O 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 ativadas para o projeto.

1. Go to the Credentials page.
2. Clique em Criar credenciais > ID do cliente OAuth.
3. Selecione o tipo de aplicativo Aplicativo da Web.
4. Nomeie seu cliente OAuth 2.0 e clique em Criar

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

Carregar a biblioteca da plataforma do Google

Inclua a biblioteca do Google Platform 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 seu app

Especifique o ID do cliente que você criou 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 apropriados para o estado de login do usuário e os escopos solicitados.

Para criar um botão do 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>

Receber informações do perfil

Depois de fazer login de um usuário com o Google usando os escopos padrão, é possível acessar o ID do Google, o nome, o URL do perfil e o endereço de e-mail do usuário.

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 logout para o seu site. Para criar um link de logout, anexe uma função que chame 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>