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.
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.
Para conferir a lista completa de opções de dados, consulte a referência do idConfiguration.
Status da solicitação
Para receber notificações de status da IU do prompt, forneça uma função de callback para o
método prompt().
HTML
Um gerenciador de callback JavaScript é necessário para receber notificações.
JavaScript
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.