Exibir Google One Tap

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'
});