Exibir Google One Tap

Adicione um toque do One Tap ao seu site para permitir que os usuários se inscrevam ou façam login no seu app da Web. Use HTML e JavaScript para renderizar e personalizar o toque.

Pré-requisitos

Siga as etapas descritas em Configuração para configurar a tela de permissão OAuth, receber um ID do cliente e carregar a biblioteca de cliente.

Adicione um botão "Fazer login com o Google" à sua página de login.

Renderização de comandos

Coloque um snippet de código em todas as páginas em que você quer que o recurso "Um toque" seja exibido.

HTML

Exiba o prompt do 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. Você pode adicionar atributos de dados personalizados, que são enviados ao seu endpoint de login junto com o token de ID emitido pelo Google.

Se quiser, use o atributo data-skip_prompt_cookie e um cookie para controlar se o aviso do One Tap é mostrado em páginas HTML estáticas em que não é possível mudar o conteúdo. Se o cookie especificado estiver definido, o comando 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 "Inscrever-se em".

Por padrão, a solicitação do One Tap é fechada automaticamente se o usuário clicar fora dela. É possível desativar esse comportamento se você definir o atributo data-cancel_on_tap_outside como "false".

Para uma lista completa de atributos compatíveis, consulte a referência do g_id_onload.

JavaScript

Mostra o prompt do recurso "Um toque", retornando a credencial JWT ao gerenciador de callback 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 aviso com um toque em JavaScript, primeiro chame o método initialize(). Em seguida, chame o método prompt() para mostrar a interface do usuário de solicitação.

Use o campo context opcional para mudar o texto usado no título do comando. Por exemplo, context: 'signup' muda "Fazer login em" para "Inscrever-se em".

Por padrão, a solicitação do One Tap é fechada automaticamente se o usuário clicar fora dela. É possível desativar esse comportamento se você definir a propriedade cancel_on_tap_outside como "false".

Para conferir a lista completa de opções de dados, consulte a referência idConfiguration.

Status do comando

Use uma função de callback JavaScript para detectar notificações de status da interface do usuário de solicitação.

As notificações são enviadas nos seguintes momentos:

  • Momento da exibição:isso ocorre depois que o método prompt() é chamado. A notificação contém um valor booleano para indicar se a interface está sendo mostrada ou não.

  • Momento ignorado:isso acontece quando o pedido de um toque é fechado por um cancelamento automático ou manual ou quando o Google não emite 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 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 a solicitação do One Tap e acionar um momento de dispensa.

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 credenciais disponíveis. Talvez você queira saber o status da interface do usuário de solicitação 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ções.

<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 exibidos 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 aviso de 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 do 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, as janelas pop-up poderão ser acionadas em alguns casos.

Verifique o layout da página e as propriedades z-index dos elementos para garantir que o Google One Tap não seja coberto por nenhum outro conteúdo. A mudança no fluxo da UX pode ser acionada mesmo quando apenas um pixel nas bordas está coberto.

Resposta de credencial

Incluído na resposta da credencial está um JWT assinado pelo Google. A resposta é retornada ao navegador usando uma função de callback JavaScript ou à 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'
});