Adicione um comando de um toque ao seu site para permitir que os usuários se inscrevam ou façam login no app da Web. Use HTML e JavaScript para renderizar e personalizar o comando.
Pré-requisitos
Siga as etapas descritas em Configuração para configurar a tela de consentimento OAuth, receber um ID do cliente e carregar a biblioteca de cliente.
Adicione um botão de "Fazer login com o Google" à página de login.
Renderização de comando
Coloque um snippet de código em todas as páginas em que você quer que o recurso Um Toque seja exibido.
HTML
Mostre o comando "One Tap", retornando a credencial JWT para um endpoint de login.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
O atributo data-login_uri é o URI do endpoint de login do seu
app da Web. É possível adicionar atributos de dados personalizados, que são enviados ao endpoint
de login com o token de ID emitido pelo Google.
Use o atributo data-context para mudar o texto usado no título do comando.
Por exemplo, data-context: "signup" muda "Fazer login em" para "Fazer inscrição em".
Para uma lista completa de atributos compatíveis, consulte a referência do g_id_onload.
JavaScript
Mostre o comando "One Tap", retornando a credencial JWT para o gerenciador de callbacks de JavaScript do navegador.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
Para configurar o comando de um toque no JavaScript, primeiro chame o
método initialize(). Em seguida, chame o método prompt() para mostrar a interface
do comando.
Use o campo context para mudar o texto usado no título do comando.
Por exemplo, context: 'signup' muda "Fazer login em" para "Fazer inscrição em".
Para conferir a lista completa de opções de dados, consulte a referência do idConfiguration.
Status da solicitação
Use uma função de callback JavaScript para detectar notificações de status da interface de comando.
As notificações são enviadas para os seguintes momentos:
Momento de exibição:ocorre depois que o método
prompt()é chamado. A notificação contém um valor booleano para indicar se a IU está exibida ou não.Momento ignorado:ocorre quando o comando do One Tap é fechado por um cancelamento automático ou manual ou quando o Google não consegue emitir uma credencial, por exemplo, quando a sessão selecionada é desconectada do Google.
Nesse caso, recomendamos que você continue com os próximos provedores de identidade, se houver.
Momento de dispensa:ocorre quando o Google recupera uma credencial ou quando um usuário quer interromper o fluxo de recuperação de credenciais. Por exemplo, quando o usuário começa a inserir o nome de usuário e a senha na caixa de diálogo de login, você pode chamar o método
google.accounts.id.cancel()para fechar o comando de um toque e acionar um momento dispensado.
HTML
Use o atributo data-moment_callback para especificar uma função de callback de
JavaScript. Um gerenciador de callback é necessário para receber notificações.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
Para facilitar o login ou a inscrição dos usuários, você pode se comunicar com vários provedores de identidade para encontrar as credenciais disponíveis. Talvez você queira saber o status da interface do prompt para chamar o próximo provedor de identidade.
JavaScript
Transmita o gerenciador de callback como um parâmetro para google.accounts.id.prompt.
Aqui, uma função de seta é usada para processar atualizações de notificação.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Botão e comando
O botão "Fazer login com o Google" e o comando de um toque podem ser mostrados juntos em uma única página.
HTML
Mostre o botão "Fazer login com o Google" e o comando de um toque incluindo
os elementos g_id_onload e g_id_signin.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
Mostre o botão "Fazer login com o Google" e o comando "Um toque" chamando
as funções renderButton() e prompt() ao mesmo tempo.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
Não cobrir o recurso Um toque
Esta seção só se aplica quando o FedCM está desativado. Quando ele está ativado, o navegador mostra solicitações ao usuário na parte de cima do conteúdo da página.
Para garantir que os usuários finais vejam todas as informações exibidas, o Google One Tap não pode ser coberto por nenhum outro conteúdo. Caso contrário, janelas pop-up podem ser acionadas em alguns casos.
Verifique as propriedades de z-index do layout da página e dos elementos para garantir que o Google One Tap não seja coberto por nenhum outro conteúdo a qualquer momento. A mudança de fluxo de UX pode ser acionada mesmo quando apenas um único pixel nas bordas é coberto.
Resposta de credencial
Um JWT assinado pelo Google está incluído na resposta de credencial. A resposta é retornada ao navegador usando uma função de callback JavaScript ou à sua plataforma por um redirecionamento para um endpoint de login.
Callback do JS
Use HTML ou JavaScript para configurar um callback.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
Como exemplo, handleCredentialResponse decodifica o JWT e imprime alguns
dos campos do token de ID no console.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
Redirecionamento
Para retornar uma credencial ao endpoint de login da sua plataforma, adicione o URL às configurações de URI de redirecionamento autorizado do seu cliente da Web OAuth 2.0.
Use HTML ou JavaScript para configurar um URI de redirecionamento.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});