Adicione um botão "Fazer login com o Google" ao seu site para permitir que os usuários se inscrevam ou façam login no seu app da Web. Use HTML ou JavaScript para renderizar o botão e os atributos e personalizar a forma, o tamanho, o texto e o tema do botão.
Depois que um usuário seleciona uma Conta do Google e dá o consentimento, o Google compartilha o perfil de usuário usando um JSON Web Token (JWT). Para uma visão geral das etapas envolvidas no login e na experiência do usuário, consulte Como funciona. Em Para entender o botão personalizado, você encontra as diferentes condições e estados que afetam a exibição do botão para os usuários.
Pré-requisitos
Antes de adicionar o botão à sua página de login, faça o seguinte:
- Siga as etapas descritas em Configuração para definir sua tela de permissão OAuth e receber um ID do cliente.
- Carregue a biblioteca de cliente.
Renderização do botão
Para exibir o botão "Fazer login com o Google", escolha HTML ou JavaScript para renderizar o botão na sua página de login:
HTML
Renderize o botão de login usando HTML, retornando o JWT para o endpoint de login da sua plataforma.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
Um elemento com uma classe g_id_signin
é renderizado como um botão "Fazer login com o Google".
O botão é personalizado pelos parâmetros fornecidos nos atributos de dados.
Para mostrar o botão "Fazer login com o Google" e o toque do Google One na mesma página,
remova data-auto_prompt="false"
. Isso é recomendado para reduzir o atrito e
melhorar as taxas de login.
Para ver a lista completa de atributos de dados, consulte a página de
referência do g_id_signin
.
JavaScript
Renderize o botão de login usando JavaScript, retornando o JWT para o gerenciador de callback do JavaScript do navegador.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
O elemento especificado como o primeiro parâmetro para renderButton
é mostrado como um
botão "Fazer login com o Google". Neste exemplo, buttonDiv
é usado para renderizar o botão na página. O botão é personalizado usando os atributos
especificados no segundo parâmetro para renderButton
.
Para minimizar o atrito do usuário, o método google.accounts.id.prompt()
é chamado para mostrar
um toque como uma segunda alternativa ao uso do botão para se inscrever ou fazer login.
A biblioteca GIS analisa o documento HTML em busca de elementos com um atributo de ID definido como
g_id_onload
ou atributos de classe que contenham g_id_signin
. Se um elemento
correspondente for encontrado, o botão vai ser renderizado usando HTML, mesmo que você
também tenha renderizado o botão em JavaScript. Para evitar a exibição do botão
duas vezes, possivelmente com parâmetros conflitantes, não inclua elementos HTML
correspondentes a esses nomes nas suas páginas HTML.
Idioma do botão
O idioma do botão é determinado automaticamente pelo idioma padrão do navegador
ou pela preferência do usuário da sessão do Google. Você também pode escolher o
idioma manualmente adicionando o parâmetro hl
e o código do idioma à diretiva
src ao carregar a biblioteca e adicionando o parâmetro opcional de localidade ou
de dados data-locale em HTML ou locale em JavaScript.
HTML
O snippet de código a seguir mostra como exibir o idioma do botão em francês
adicionando o parâmetro hl
ao URL da biblioteca de cliente e definindo o
atributo data-locale
para francês:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
O snippet de código a seguir mostra como exibir o idioma do botão em francês adicionando o parâmetro hl
ao URL da biblioteca de cliente e chamando o método google.accounts.id.renderButton
com o parâmetro locale
definido como francês:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
Gerenciamento de credenciais
Depois que o usuário dá o consentimento, o Google retorna uma credencial JSON Web Token (JWT) conhecida como um token de ID para o navegador do usuário ou diretamente para um endpoint de login hospedado pela sua plataforma.
O local em que você escolhe receber o JWT depende de renderizar o botão usando HTML ou JavaScript e do modo de UX de pop-up ou redirecionamento usado.
Modo de pop-up
O uso do modo de UX popup
executa o fluxo de UX de login em uma janela pop-up. Geralmente, essa é
uma experiência menos invasiva para os usuários e é o modo de UX padrão.
Ao renderizar o botão usando:
HTML
Você pode definir:
data-callback
para retornar o JWT ao seu gerenciador de callback oudata-login_uri
para que o Google envie o JWT diretamente para seu endpoint de login usando uma solicitação POST.
Se ambos os valores forem definidos, data-callback
terá precedência sobre
data-login_uri
. Definir os dois valores pode ser útil ao usar um gerenciador de
callback para depuração.
JavaScript
É preciso especificar um callback
. O modo pop-up não oferece suporte a redirecionamentos
ao gerar o botão em JavaScript. Se definido, login_uri
é ignorado.
Consulte Processar a resposta da credencial retornada para saber mais sobre como decodificar o JWT no seu gerenciador de callback do JS.
Modo de redirecionamento
O uso do modo UX redirect
executa o fluxo de UX de login usando o redirecionamento completo de
página do navegador do usuário, e o Google retorna o JWT diretamente para o
endpoint de login usando uma solicitação POST.
Geralmente, essa é uma experiência mais invasiva para os usuários, mas é considerada
o método de login mais seguro.
Ao renderizar o botão usando:
- HTML: defina
data-login_uri
como o URI do endpoint de login. - JavaScript pode definir
login_uri
como o URI do endpoint de login.
Se você não fornecer um valor, o Google retornará o JWT para o URI da página atual.
O URI do endpoint de login
Use HTTPS e um URI absoluto ao definir data-login_uri
ou login_uri
.
Por exemplo, https://example.com/path
.
O HTTP só é permitido ao usar o localhost durante o desenvolvimento:
http://localhost/path
.
Consulte Usar origens JavaScript seguras e URIs de redirecionamento para ver uma descrição completa dos requisitos e regras de validação do Google.