Referência da API HTML do Sign-in com o Google

Esta página de referência descreve a API de atributos de dados HTML do recurso Fazer login com o Google, usada para mostrar o botão "Fazer login com o Google" ou o aviso de um toque em páginas da Web.

Elemento com ID "g_id_onload"

Você pode colocar atributos de dados do Fazer login com o Google em qualquer elemento visível ou invisível, como <div> e <span>. O único requisito é que o ID do elemento seja definido como g_id_onload. Não coloque esse ID em vários elementos.

Atributos de dados

A tabela a seguir lista os atributos de dados com as respectivas descrições:

Atributo
data-client_id O ID do cliente do seu aplicativo
data-color_scheme O esquema de cores aplicado à solicitação do toque único.
data-auto_prompt Mostrar o toque do Google One.
data-auto_select Permite a seleção automática no Google One Tap.
data-login_uri O URL do seu endpoint de login
data-callback O nome da função do gerenciador de tokens de ID JavaScript.
data-native_login_uri O URL do endpoint do gerenciador de credenciais de senha
data-native_callback O nome da função do gerenciador de credenciais de senha JavaScript.
data-native_id_param O nome do parâmetro para o valor credential.id
data-native_password_param O nome do parâmetro para o valor credential.password
data-cancel_on_tap_outside Controla se a solicitação será cancelada se o usuário clicar fora dela.
data-prompt_parent_id O ID do DOM do elemento contêiner do pedido com um toque.
data-skip_prompt_cookie Ignora o recurso "Um toque" se o cookie especificado tiver um valor não vazio.
data-nonce Uma string aleatória para tokens de ID
data-context O título e as palavras no comando do login com um toque
data-moment_callback O nome da função do listener de notificação de status da interface de solicitação.
data-state_cookie_domain Se você precisar chamar o One Tap no domínio principal e nos subdomínios dele, transmita o domínio principal a esse atributo para que um único cookie compartilhado seja usado.
data-ux_mode O fluxo de UX do botão "Fazer login com o Google"
data-allowed_parent_origin As origens que podem incorporar o iframe intermediário. O One Tap é executado no modo de iframe intermediário se esse atributo estiver presente.
data-intermediate_iframe_close_callback Substitui o comportamento padrão do iframe intermediário quando os usuários fecham manualmente o recurso "Um toque".
data-itp_support Ativa a UX de um toque atualizada em navegadores ITP.
data-login_hint Pule a seleção de conta fornecendo uma dica de usuário.
data-hd Limitar a seleção de contas por domínio.
data-use_fedcm_for_prompt Permita que o navegador controle os pedidos de login do usuário e medie o fluxo de login entre seu site e o Google.
data-use_fedcm_for_button Esse campo determina se a UX do botão FedCM deve ser usada no Chrome (computador M125+ e Android M128+). O padrão é false.
data-button_auto_select Indica se a opção seleção automática está ativada para o fluxo de botões da FedCM. Se ativado, os usuários recorrentes com uma sessão ativa do Google farão login automaticamente, ignorando a solicitação do seletor de contas. O valor padrão é false;

Tipos de atributo

As seções a seguir contêm detalhes sobre o tipo de cada atributo e um exemplo.

data-client_id

Esse atributo é o ID do cliente do seu app, que é encontrado e criado no console do Google Cloud. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Sim data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-color_scheme

Esse campo é o esquema de cores aplicado à solicitação do recurso "Um toque". Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional. O padrão é o esquema de cores padrão do sistema dos usuários. data-color_scheme="dark"

A tabela a seguir lista os esquemas de cores disponíveis e as descrições deles.

Esquema de cores
default Aplicar o esquema de cores padrão do sistema do usuário, dependendo da preferência do usuário, que pode ser claro ou escuro.
light Aplique um esquema de cores claras.
dark Use um esquema de cores escuras.

data-auto_prompt

Esse atributo determina se o recurso "Um toque" será exibido ou não. O valor padrão é true. O toque único do Google One não é mostrado quando esse valor é false. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
booleano Opcional data-auto_prompt="true"

data-auto_select

Esse atributo determina se um token de ID será retornado automaticamente, sem interação do usuário, se apenas uma sessão do Google tiver aprovado seu app. O valor padrão é false. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
booleano Opcional data-auto_select="true"

data-login_uri

Esse atributo é o URI do seu endpoint de login.

O valor precisa corresponder exatamente a um dos URIs de redirecionamento autorizados para o cliente OAuth 2.0, que você configurou na plataforma de autenticação do Google e precisa estar de acordo com nossas regras de validação de URI de redirecionamento.

Esse atributo pode ser omitido se a página atual for sua página de login. Nesse caso, a credencial é postada nessa página por padrão.

A resposta de credencial do token de ID é postada no endpoint de login quando nenhuma função de callback é definida e um usuário clica nos botões "Fazer login com o Google" ou "Um toque", ou quando o login automático é realizado.

O endpoint de login precisa processar solicitações POST que contenham um parâmetro credential com um valor de token de ID no corpo.

Consulte a tabela a seguir para mais informações:

Tipo Opcional Exemplo
URL O padrão é o URI da página atual ou o valor especificado.
Ignorado quando data-ux_mode="popup" e data-callback estão definidos.		 data-login_uri="https://www.example.com/login"

data-callback

Esse atributo é o nome da função JavaScript que processa o token de ID retornado. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Obrigatório se data-login_uri não estiver definido. data-callback="handleToken"

Um dos atributos data-login_uri e data-callback pode ser usado. Ele depende das seguintes configurações de componentes e modo de UX:

  • O atributo data-login_uri é obrigatório para o modo de UX do botão Fazer login com o Google redirect, que ignora o atributo data-callback.

  • Um desses dois atributos precisa ser definido para o modo de UX do Google One Tap e do botão Fazer login com o Google popup. Se ambos forem definidos, o atributo data-callback terá maior precedência.

As funções JavaScript em um namespace não são compatíveis com a API HTML. Em vez disso, use uma função global do JavaScript sem um namespace. Por exemplo, use mylibCallback em vez de mylib.callback.

data-native_login_uri

Esse atributo é o URL do endpoint do manipulador de credenciais de senha. Se você definir o atributo data-native_login_uri ou o atributo data-native_callback, a biblioteca JavaScript vai usar o gerenciador de credenciais integrado quando não houver uma sessão do Google. Não é permitido definir os atributos data-native_callback e data-native_login_uri. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-login_uri="https://www.example.com/password_login"

data-native_callback

Esse atributo é o nome da função JavaScript que processa a credencial de senha retornada pelo gerenciador de credenciais integrado do navegador. Se você definir o atributo data-native_login_uri ou data-native_callback, a biblioteca JavaScript vai usar o gerenciador de credenciais integrado quando não houver uma sessão do Google. Não é possível definir data-native_callback e data-native_login_uri. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-native_callback="handlePasswordCredential"

As funções JavaScript em um namespace não são compatíveis com a API HTML. Em vez disso, use uma função global do JavaScript sem um namespace. Por exemplo, use mylibCallback em vez de mylib.callback.

data-native_id_param

Ao enviar a credencial de senha para o endpoint do manipulador de credenciais de senha, é possível especificar o nome do parâmetro para o campo credential.id. O nome padrão é email. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
URL Opcional data-native_id_param="user_id"

data-native_password_param

Ao enviar a credencial de senha para o endpoint do gerenciador de credenciais de senha, é possível especificar o nome do parâmetro para o valor credential.password. O nome padrão é password. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
URL Opcional data-native_password_param="pwd"

data-cancel_on_tap_outside

Esse atributo define se a solicitação do One Tap será cancelada ou não se o usuário clicar fora da solicitação. O valor padrão é true. Para desativar, defina o valor como false. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
booleano Opcional data-cancel_on_tap_outside="false"

data-prompt_parent_id

Esse atributo define o ID do DOM do elemento de contêiner. Se não estiver definido, o prompt do toque único vai aparecer no canto superior direito da janela. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-prompt_parent_id="parent_id"

Usa um cookie para controlar a exibição do pedido de um toque. Se o cookie especificado por esse atributo tiver um valor não vazio, o aviso não será exibido. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-skip_prompt_cookie="SID"

data-nonce

Esse atributo é uma string aleatória usada pelo token de ID para evitar ataques de repetição. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-nonce="biaqbm70g23"

O comprimento do nonce é limitado ao tamanho máximo do JWT compatível com seu ambiente, e às restrições de tamanho HTTP individuais do navegador e do servidor.

data-context

Esse campo muda o texto do título e das mensagens mostradas na solicitação com um toque. Não tem efeito em navegadores ITP. O valor padrão é signin.

Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-context="use"

A tabela a seguir lista todos os contextos disponíveis e as descrições deles:

Contexto
signin "Fazer login em"
signup "Inscrever-se em"
use "Usar"

data-moment_callback

Esse atributo é o nome da função do listener de notificação de status da interface de solicitação. Para mais informações, consulte o tipo de dados PromptMomentNotification.

Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-moment_callback="logMomentNotification"

As funções JavaScript em um namespace não são compatíveis com a API HTML. Em vez disso, use uma função global do JavaScript sem um namespace. Por exemplo, use mylibCallback em vez de mylib.callback.

Se você precisar mostrar o recurso com um toque em um domínio principal e nos subdomínios dele, transmita o domínio principal para esse atributo para que um único cookie de estado compartilhado seja usado. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-state_cookie_domain="example.com"

data-ux_mode

Esse atributo define o fluxo de UX usado pelo botão "Fazer login com o Google". O valor padrão é popup. Esse atributo não tem impacto na experiência de toque único. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-ux_mode="redirect"

A tabela a seguir lista os modos de UX disponíveis e as descrições deles.

Modo UX
popup Realiza o fluxo de UX de login em uma janela pop-up.
redirect Realiza o fluxo de UX de login por um redirecionamento de página inteira.

data-allowed_parent_origin

As origens que podem incorporar o iframe intermediário. O recurso "Um toque" é executado no modo de iframe intermediário se esse atributo estiver presente. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string ou matriz de strings Opcional data-allowed_parent_origin="https://example.com"

A tabela a seguir lista os tipos de valores compatíveis e as descrições deles.

Tipos de valores
string Um URI de domínio único. "https://example.com"
string array Uma lista de URIs de domínio separados por vírgulas. "https://news.example.com,https://local.example.com"

Se o valor do atributo data-allowed_parent_origin for inválido, a inicialização do One Tap do modo de iframe intermediário vai falhar e parar.

Prefixos curinga também são aceitos. Por exemplo, "https://*.example.com" corresponde a example.com e seus subdomínios em todos os níveis (por exemplo, news.example.com, login.news.example.com). Ao usar caracteres curinga, tenha em mente o seguinte:

  • As strings de padrão não podem ser compostas apenas por um caractere curinga e um domínio de nível superior. Por exemplo, https://.com e https://.co.uk são inválidos porque "https://.example.com" corresponde a example.com e todos os subdomínios dele. Use uma lista separada por vírgulas para representar dois domínios diferentes. Por exemplo, "https://example1.com,https://.example2.com" corresponde aos domínios example1.com, example2.com e aos subdomínios de example2.com.
  • Domínios com caracteres curinga precisam começar com um esquema https:// seguro. Portanto, "*.example.com" é considerado inválido.

data-intermediate_iframe_close_callback

Substitui o comportamento padrão do iframe intermediário quando os usuários fecham manualmente o One Tap tocando no botão "X" na interface do One Tap. O comportamento padrão é remover o iframe intermediário do DOM imediatamente.

O campo data-intermediate_iframe_close_callback só entra em vigor no modo de iframe intermediário. e tem impacto apenas no iframe intermediário, em vez do iframe do One Tap. A interface de um toque é removida antes da invocação do callback.

Tipo Obrigatório Exemplo
função Opcional data-intermediate_iframe_close_callback="logBeforeClose"

As funções JavaScript em um namespace não são compatíveis com a API HTML. Em vez disso, use uma função global do JavaScript sem um namespace. Por exemplo, use mylibCallback em vez de mylib.callback.

data-itp_support

Esse campo determina se a experiência do usuário do One Tap atualizada deve ser ativada em navegadores que oferecem suporte à Prevenção Inteligente de Rastreamento (ITP, na sigla em inglês). O valor padrão é false. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
booleano Opcional data-itp_support="true"

data-login_hint

Se o aplicativo souber com antecedência qual usuário deve fazer login, ele poderá fornecer uma dica de login ao Google. Quando a operação é bem-sucedida, a seleção de contas é ignorada. Os valores aceitos são: um endereço de e-mail ou um campo sub de token de ID.

Para mais informações, consulte a documentação do OpenID Connect para login_hint.

Tipo Obrigatório Exemplo
String. Pode ser um endereço de e-mail ou o valor do campo sub do token de ID. Opcional data-login_hint="elisa.beckett@gmail.com"

data-hd

Quando um usuário tem várias contas e só deve fazer login com a conta do Workspace, use isso para dar uma dica de nome de domínio ao Google. Quando a operação é bem-sucedida, as contas de usuário mostradas durante a seleção são limitadas ao domínio fornecido. Um valor curinga: * oferece apenas contas do Workspace ao usuário e exclui contas pessoais (user@gmail.com) durante a seleção de contas.

Para mais informações, consulte a documentação do OpenID Connect para hd.

Tipo Obrigatório Exemplo
String. Um nome de domínio totalmente qualificado ou *. Opcional data-hd="*"

data-use_fedcm_for_prompt

Permita que o navegador controle os pedidos de login do usuário e medie o fluxo de login entre seu site e o Google. O padrão é "false". Consulte a página Migrar para o FedCM para mais informações.

Tipo Obrigatório Exemplo
booleano Opcional data-use_fedcm_for_prompt="true"

data-use_fedcm_for_button

Esse campo determina se a UX do botão FedCM deve ser usada no Chrome (computador M125+ e Android M128+). O padrão é false. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
booleano Opcional data-use_fedcm_for_button="true"

data-button_auto_select

Esse campo determina se a opção seleção automática será ativada para o fluxo de botões da FedCM. Se ativada, os usuários recorrentes com uma sessão do Google ativa vão fazer login automaticamente, ignorando a solicitação do seletor de contas. O padrão é false. É necessário ativar explicitamente o login automático do botão durante o lançamento da ativação. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
booleano Opcional data-button_auto_select="true"

Elemento com a classe "g_id_signin"

Se você adicionar g_id_signin ao atributo class de um elemento, ele será renderizado como um botão "Fazer login com o Google".

É possível renderizar vários botões "Fazer login com o Google" na mesma página. Cada botão pode ter configurações visuais próprias. As configurações são definidas pelos seguintes atributos de dados.

Atributos de dados visuais

A tabela a seguir lista os atributos de dados visuais e as descrições deles:

Atributo
data-type O tipo de botão: ícone ou botão padrão.
data-theme O tema do botão. Por exemplo, filled_blue ou filled_black.
data-size O tamanho do botão. Por exemplo, pequeno ou grande.
data-text O texto do botão. Por exemplo, "Fazer login com o Google" ou "Inscrever-se com o Google".
data-shape É o formato do botão. Por exemplo, retangular ou circular.
data-logo_alignment O alinhamento do logotipo do Google: à esquerda ou centralizado.
data-width A largura do botão, em pixels.
data-locale O texto do botão é renderizado no idioma definido nesse atributo.
data-click_listener Se definida, essa função será chamada quando o botão "Fazer login com o Google" for clicado.
data-state Se definido, essa string será retornada com o token de ID.

Tipos de atributo

As seções a seguir contêm detalhes sobre o tipo de cada atributo e um exemplo.

data-type

O tipo de botão. O valor padrão é standard. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Sim data-type="icon"

A tabela a seguir lista todos os tipos de botão disponíveis e as respectivas descrições:

Tipo
standard
Um botão com texto ou informações personalizadas.
icon
Um botão de ícone sem texto.

data-theme

O tema do botão. O valor padrão é outline. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-theme="filled_blue"

A tabela a seguir lista os temas disponíveis e as descrições deles:

Tema
outline
Um botão padrão com fundo branco Um botão de ícone com fundo branco Um botão personalizado com um fundo branco
O tema padrão do botão.
filled_blue
Um botão padrão com um fundo azul Um botão de ícone com fundo azul Um botão personalizado com um fundo azul
O tema do botão preenchido em azul.
filled_black
Um botão padrão com um fundo preto Um botão de ícone com um fundo preto Um botão personalizado com um plano de fundo preto
O tema de botão preenchido em preto.

data-size

O tamanho do botão. O valor padrão é large. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-size="small"

A tabela a seguir lista os tamanhos de botão disponíveis e as descrições deles.

Tamanho
large
Um botão padrão grande Um botão de ícone grande Um botão grande e personalizado
Um botão grande.
medium
Um botão padrão médio Um botão de ícone médio
Um botão de tamanho médio.
small
Um pequeno botão de login Um botão de ícone pequeno
Um botão pequeno.

data-text

O texto do botão. O valor padrão é signin_with. Não há diferenças visuais no texto dos botões de ícone com atributos data-text diferentes. A única exceção é quando o texto é lido para acessibilidade de tela.

Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-text="signup_with"

A tabela a seguir lista os textos de botão disponíveis e as descrições deles:

Texto
signin_with
Um botão padrão chamado &quot;Fazer login com o Google&quot; Um botão de ícone sem texto visível
O texto do botão é "Fazer login com o Google".
signup_with
Um botão padrão chamado &quot;Inscrever-se com o Google&quot; Um botão de ícone sem texto visível
O texto do botão é "Inscrever-se com o Google".
continue_with
Um botão padrão chamado &quot;Continuar com o Google&quot; Um botão de ícone sem texto visível
O texto do botão é "Continuar com o Google".
signin
Um botão padrão com o rótulo &quot;Fazer login&quot; Um botão de ícone sem texto visível
O texto do botão é "Fazer login".

data-shape

É o formato do botão. O valor padrão é rectangular. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-shape="rectangular"

A tabela a seguir lista os formatos de botão disponíveis e as descrições deles:

Forma
rectangular
Um botão padrão retangular Um botão de ícone retangular Um botão retangular personalizado
O botão retangular. Se usado para o tipo de botão icon, é o mesmo que square.
pill
Um botão padrão em forma de pílula Um botão de ícone em forma de pílula Um botão personalizado em formato de pílula
O botão em formato de pílula. Se usado para o tipo de botão icon, será o mesmo que circle.
circle
Um botão padrão circular Um botão de ícone circular Um botão circular personalizado
O botão em formato de círculo. Se usado para o tipo de botão standard, será o mesmo que pill.
square
Um botão padrão quadrado Um botão de ícone quadrado Um botão quadrado personalizado
O botão em formato quadrado. Se usado para o tipo de botão standard, será o mesmo que rectangular.

data-logo_alignment

O alinhamento do logotipo do Google. O valor padrão é left. Esse atributo se aplica apenas ao tipo de botão standard. Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-logo_alignment="center"

A tabela a seguir lista os alinhamentos disponíveis e as descrições deles:

logo_alignment
left
Um botão padrão com o logotipo do Google à esquerda
Alinha o logotipo do Google à esquerda.
center
Um botão padrão com o logotipo do Google no centro
Alinha o logotipo do Google ao centro.

data-width

A largura mínima do botão, em pixels. A largura máxima disponível é de 400 pixels.

Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-width=400

data-locale

Opcional. Mostra o texto do botão usando a localidade especificada. Caso contrário, usa as configurações padrão da Conta do Google ou do navegador dos usuários. Adicione o parâmetro hl e o código do idioma à diretiva src ao carregar a biblioteca. Por exemplo: gsi/client?hl=<iso-639-code>.

Se não for definido, será usada a localidade padrão do navegador ou a preferência do usuário da sessão do Google. Portanto, usuários diferentes podem ver versões diferentes de botões localizados, possivelmente com tamanhos diferentes.

Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-locale="zh_CN"

data-click_listener

É possível definir uma função JavaScript para ser chamada quando o botão "Fazer login com o Google" for clicado usando o atributo data-click_listener.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

Neste exemplo, a mensagem Botão "Fazer login com o Google" clicado... é registrada no console quando o botão "Fazer login com o Google" é clicado.

data-state

Opcional. Como vários botões "Fazer login com o Google" podem ser renderizados na mesma página, você pode atribuir uma string exclusiva a cada botão. A mesma string seria retornada com o token de ID. Assim, você pode identificar em qual botão o usuário clicou para fazer login.

Consulte a tabela a seguir para mais informações:

Tipo Obrigatório Exemplo
string Opcional data-state="button 1"

Integração no servidor

Seus endpoints do lado do servidor precisam processar as seguintes solicitações HTTP POST.

O endpoint do gerenciador de tokens de ID

O endpoint do gerenciador de token de ID processa o token de ID. Com base no status da conta correspondente, você pode fazer login do usuário e direcioná-lo para uma página de inscrição ou de vinculação de contas para mais informações.

Exemplo de solicitação para seu endpoint de login:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

A solicitação HTTP POST contém as seguintes informações:

Formato Nome Descrição
Cookie g_csrf_token Uma string aleatória que muda a cada solicitação para o endpoint de login especificado por data-login_uri, precisa corresponder ao valor no parâmetro de solicitação g_csrf_token.
Parâmetro de solicitação g_csrf_token Uma string aleatória que muda a cada solicitação para o endpoint de login especificado por data-login_uri, precisa corresponder ao valor do cookie g_csrf_token.
Parâmetro de solicitação credential O token de ID JWT codificado emitido pelo Google.
Parâmetro de solicitação select_by Como o usuário fez login.
Parâmetro de solicitação state Esse parâmetro só é definido quando o usuário clica em um botão Fazer login com o Google para fazer login, e o atributo state do botão é especificado.

credencial

Quando decodificado, o token de ID fica assim: 

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

O campo sub é um identificador globalmente exclusivo da Conta do Google. Use apenas o campo sub como identificador do usuário, já que ele é exclusivo entre todas as Contas do Google e nunca é reutilizado.

Usando os campos email, email_verified e hd, você pode determinar se o Google hospeda e é autoridade para um endereço de e-mail. Nos casos em que o Google é autoridade, o usuário é confirmado como o proprietário legítimo da conta.

Casos em que o Google é autoridade:

  • Se o nome de usuário de email tiver o sufixo @gmail.com, ele será uma conta do Gmail.
  • email_verified é verdadeiro e hd está definido, essa é uma conta do Google Workspace.

Os usuários podem se registrar para ter Contas do Google sem usar o Gmail ou o Google Workspace. Quando email não contém um sufixo @gmail.com e hd está ausente, o Google não é autoritário, e é recomendável usar senha ou outros métodos de desafio para verificar o usuário. email_verified também pode ser verdadeiro, já que o Google verificou o usuário quando a Conta do Google foi criada. No entanto, a propriedade da conta de e-mail de terceiros pode ter mudado desde então.

O campo exp mostra o prazo para verificar o token no lado do servidor. É de uma hora para o token de ID obtido com o recurso Fazer login com o Google. Você precisa verificar o token antes do prazo de validade. Não use exp para gerenciamento de sessões. Um token de ID expirado não significa que o usuário está desconectado. Seu app é responsável pelo gerenciamento de sessões dos usuários.

g_csrf_token

Um token de estado antifalsificação. Este é um token de falsificação de solicitações entre sites (CSRF) criado pela biblioteca gsi/client. Um valor aleatório é incluído como um cookie e como um parâmetro de solicitação no corpo do payload POST. Se esses dois valores não corresponderem ao processar a solicitação no seu servidor, ela será considerada inválida.

select_by

A tabela a seguir lista os valores possíveis para o campo select_by. O tipo de botão usado com a sessão e o estado de consentimento são usados para definir o valor.

  • O usuário pressionou o botão de um toque ou "Fazer login com o Google" ou usou o processo de login automático sem toque.

  • Uma sessão existente foi encontrada, ou o usuário selecionou e fez login em uma Conta do Google para estabelecer uma nova sessão.

  • Antes de compartilhar as credenciais do token de ID com seu app, o usuário precisa

    • clicou no botão "Confirmar" para dar consentimento ao compartilhamento de credenciais, ou
    • já tinha concedido consentimento e usado "Selecionar uma conta" para escolher uma Conta do Google.

O valor desse campo é definido como um destes tipos:

Valor Descrição
auto Login automático de um usuário com uma sessão aberta que já tinha dado consentimento para compartilhar credenciais. Válido apenas para navegadores que não têm suporte à FedCM.
user Um usuário com uma sessão aberta que já tinha dado consentimento clicou no botão "Continuar como" do One Tap para compartilhar credenciais. Válido apenas para navegadores sem suporte à FedCM.
fedcm Um usuário pressionou o botão "Continuar como" do One Tap para compartilhar credenciais usando o FedCM. Válido apenas para navegadores compatíveis com a FedCM.
fedcm_auto Login automático de um usuário com uma sessão aberta que já tinha dado consentimento para compartilhar credenciais usando o FedCM One Tap. Válido apenas para navegadores compatíveis com a FedCM.
user_1tap Um usuário com uma sessão aberta pressionou o botão "Continuar como" do One Tap para dar consentimento e compartilhar credenciais. Aplicável apenas ao Chrome v75 e versões mais recentes.
user_2tap Um usuário sem uma sessão aberta pressionou o botão "Continuar como" do One Tap para selecionar uma conta e, em seguida, pressionou o botão "Confirmar" em uma janela pop-up para conceder consentimento e compartilhar credenciais. Aplica-se a navegadores não baseados no Chromium.
itp Um usuário que já tinha dado consentimento pressionou o recurso de um toque em navegadores ITP.
itp_confirm Um usuário que não deu consentimento pressionou o One Tap em navegadores ITP e clicou no botão "Continuar" para dar consentimento e compartilhar credenciais.
btn Um usuário que já tinha dado consentimento pressionou o botão "Fazer login com o Google" e selecionou uma Conta do Google em "Escolher uma conta" para compartilhar credenciais.
btn_confirm Um usuário que não deu consentimento pressionou o botão "Fazer login com o Google" e o botão "Continuar" para dar consentimento e compartilhar credenciais.

estado

Esse parâmetro só é definido quando o usuário clica em um botão "Fazer login com o Google" para fazer login, e o atributo data-state do botão clicado é especificado. O valor desse campo é o mesmo que você especificou no atributo data-state do botão.

Como vários botões "Fazer login com o Google" podem ser renderizados na mesma página, você pode atribuir a cada botão uma string exclusiva. Portanto, você pode usar o parâmetro state para identificar em qual botão o usuário clicou para fazer login.

Endpoint do gerenciador de credenciais de senha

O endpoint do gerenciador de credenciais de senha processa as credenciais de senha que o gerenciador de credenciais integrado recupera.

A solicitação HTTP POST contém as seguintes informações:

Formato Nome Descrição
Cookie g_csrf_token Uma string aleatória que muda a cada solicitação para o endpoint de login especificado por data-native_login_uri, precisa corresponder ao valor no parâmetro de solicitação g_csrf_token.
Parâmetro de solicitação g_csrf_token Uma string aleatória que muda a cada solicitação para o endpoint de login especificado por data-native_login_uri, precisa corresponder ao valor do cookie g_csrf_token.
Parâmetro de solicitação email Esse token de ID emitido pelo Google.
Parâmetro de solicitação password Como a credencial é selecionada.