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.
Opcionalmente, use o atributo data-skip_prompt_cookie e um cookie para controlar se o comando de um toque é exibido em páginas HTML estáticas em que não é possível mudar o conteúdo. Se o cookie especificado for definido, o prompt não será mostrado.
Use o atributo opcional 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".
Por padrão, o comando "One Tap" é fechado automaticamente se o usuário clicar fora dele. É possível desativar esse comportamento definindo o atributo data-cancel_on_tap_outside como falso.
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 callback 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 opcional para mudar o texto usado no título do comando. Por exemplo, context: 'signup' muda "Fazer login em" para "Fazer inscrição em".
Por padrão, o comando "One Tap" é fechado automaticamente se o usuário clicar fora dele. É possível desativar esse comportamento definindo a propriedade cancel_on_tap_outside como falsa.
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 de um toque é 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' }); Por 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' });