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.
- Go to the Credentials page.
- Clique em Criar credenciais > ID do cliente OAuth.
- Selecione o tipo de aplicativo Aplicativo da Web.
- 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>