O Login do Google gerencia o fluxo do OAuth 2.0 e o ciclo de vida do token, simplificando sua integração com 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 Google Sign-In.
Crie credenciais de autorização
Qualquer aplicativo que usa OAuth 2.0 para acessar APIs do Google deve ter credenciais de autorização que identificam o aplicativo para o servidor OAuth 2.0 do Google. As etapas a seguir explicam como criar credenciais para seu projeto. Seus aplicativos podem então usar as credenciais para acessar APIs que você habilitou para aquele projeto.
- Go to the Credentials page.
- Clique em Criar credenciais> ID do cliente OAuth .
- Selecione o tipo de aplicativo da Web .
- Nomeie seu cliente OAuth 2.0 e clique em Criar
Depois que a configuração for concluída, anote o ID do cliente que foi criado. Você precisará do ID do cliente para concluir as próximas etapas. (Um segredo de cliente também é criado, mas você só precisa dele para operações do lado do servidor.)
Carregue a biblioteca da plataforma Google
Você deve incluir a Google Platform Library em suas páginas da web que integram o Google Sign-In.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Especifique o ID do cliente do seu aplicativo
Especifique o ID do cliente que você criou para seu aplicativo no Google Developers Console com o 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, logotipo e cores apropriados para o estado de login do usuário e os escopos solicitados.
Para criar um botão de login do Google que usa 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>
A seguir está um exemplo do botão padrão de login do Google:
Obtenha informações de perfil
Depois de fazer login de um usuário com o Google usando os escopos padrão, você pode acessar o ID do Google do usuário, o nome, o URL do perfil e o endereço de e-mail.
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 aplicativo sem sair do Google, adicionando um botão ou link para sair do seu site. Para criar um link de GoogleAuth.signOut() , 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>