Aviso: esses dados são fornecidos de acordo com a Política de dados do usuário do Google . Reveja e cumpra a política. Não fazer isso pode resultar na suspensão do projeto ou da conta.

Referência da API de login com Google HTML

Esta página de referência descreve a API de atributos de dados HTML Sign In With Google. Você pode usar a API para exibir o prompt do One Tap ou o botão Sign In With Google em suas páginas da web.

Elemento com ID "g_id_onload"

Você pode colocar os atributos de dados do 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 este ID em vários elementos.

Atributos de dados

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

Atributo
data-client_id ID do cliente do seu aplicativo
data-auto_prompt Exibir Google One tap.
data-auto_select Ativa 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 manipulador de token do código JavaScript
data-native_login_uri O URL do endpoint do manipulador de credencial de senha
data-native_callback O nome da função do manipulador de credencial 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 o prompt deve ser cancelado se o usuário clicar fora dele.
data-prompt_parent_id O ID DOM do elemento contêiner de prompt do One Tap
data-skip_prompt_cookie Ignora 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 prompt do One Tap
data-moment_callback O nome da função do ouvinte de notificação de status da IU do prompt
data-state_cookie_domain Se você precisar chamar One Tap no domínio pai e seus subdomínios, passe o domínio pai a este atributo para que um único cookie compartilhado seja usado.
data-ux_mode Fluxo de experiência do usuário do botão Fazer login com o Google
data-allowed_parent_origin As origens que podem incorporar o iframe intermediário. O One Tap será executado no modo iframe intermediário se este atributo estiver presente.
data-intermediate_iframe_close_callback Substitui o comportamento do iframe intermediário padrão quando os usuários fecham manualmente o One Tap.

Tipos de atributos

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

data-client_id

Este atributo é o ID do cliente do seu aplicativo, que é encontrado e criado no Google Developers Console. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento sim data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

Este atributo determina se um toque deve ser exibido ou não. O valor padrão é true . O Google One tap não será exibido quando este valor for false . Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
boleano Opcional data-auto_prompt="true"

data-auto_select

Este atributo determina se deve ou não retornar um token de ID automaticamente, sem qualquer interação do usuário, se apenas uma sessão do Google tiver aprovado seu aplicativo. O valor padrão é false . Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
boleano Opcional data-auto_select="true"

data-login_uri

Este atributo é o URL do seu terminal de login. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
URL Necessário para o modo UX de redirect data-login_uri="https://example.com/login"

data-callback

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

Modelo Obrigatório Exemplo
fragmento 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. Depende do seguinte componente e configurações do modo UX:

  • O atributo data-login_uri é necessário para o modo UX de redirect botão Sign In With Google, que ignora o atributo data-callback .

  • Um desses dois atributos deve ser definido para o Google One Tap e o modo de UX popup - popup botão Login do Google. Se ambos estiverem configurados, o atributo data-callback tem uma precedência mais alta.

data-native_login_uri

Este atributo é a URL do ponto de extremidade do manipulador de credencial de senha. Se você definir o atributo data-native_login_uri ou o atributo data-native_callback , a biblioteca JavaScript voltará para o gerenciador de credencial nativo quando não houver uma sessão do Google. Você não tem permissão para definir os atributos data-native_callback e data-native_login_uri . Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-login_uri="https://example.com/password_login"

data-native_callback

Este atributo é o nome da função JavaScript que lida com a credencial de senha retornada do gerenciador de credencial nativo do navegador. Se você definir o atributo data-native_login_uri ou o atributo data-native_callback , a biblioteca JavaScript voltará para o gerenciador de credencial nativo quando não houver uma sessão do Google. Você não tem permissão para definir data-native_callback e data-native_login_uri . Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-native_callback="handlePasswordCredential"

data-native_id_param

Ao enviar a credencial de senha para o terminal do manipulador de credencial de senha, você pode especificar o nome do parâmetro para o campo credential.id . O nome padrão é email . Consulte a tabela a seguir para obter mais informações:

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

data-native_password_param

Ao enviar a credencial de senha para o terminal do manipulador de credencial de senha, você pode especificar o nome do parâmetro para o valor credential.password . O nome padrão é password . Consulte a tabela a seguir para obter mais informações:

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

data-cancel_on_tap_outside

Este atributo define se deve ou não cancelar a solicitação One Tap se o usuário clicar fora do prompt. O valor padrão é true . Para desativá-lo, defina o valor como false . Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
boleano Opcional data-cancel_on_tap_outside="false"

data-prompt_parent_id

Este atributo define o ID DOM do elemento do contêiner. Se não estiver definido, o prompt do One Tap é exibido no canto superior direito da janela. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-prompt_parent_id="parent_id"

Este atributo ignora One Tap se o cookie especificado tiver um valor não vazio. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-skip_prompt_cookie="SID"

data-nonce

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

Modelo Obrigatório Exemplo
fragmento Opcional data-nonce="biaqbm70g23"

contexto de dados

Este atributo altera o texto do título e das mensagens mostradas no prompt do One Tap. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-context="use"

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

Contexto
signin "Faça login no Google"
signup "Inscreva-se no Google"
use "Use com o Google"

data-moment_callback

Este atributo é o nome da função do ouvinte de notificação de status da IU do prompt. Para obter mais informações, consulte o tipo de dados PromptMomentNotification . Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-moment_callback="logMomentNotification"

Se você precisar exibir One Tap em um domínio pai e seus subdomínios, passe o domínio pai a este atributo para que um único cookie de estado compartilhado seja usado. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-state_cookie_domain="example.com"

data-ux_mode

Este atributo define o fluxo de UX usado pelo botão Sign In With Google. O valor padrão é popup - popup . Este atributo não tem impacto no One Tap UX. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-ux_mode="redirect"

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

Modo UX
popup Executa o fluxo de UX de login em uma janela pop-up.
redirect Executa 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 One Tap será executado no modo iframe intermediário se este atributo estiver presente. Consulte a tabela a seguir para obter mais informações:

Modelo Obrigatório Exemplo
string ou string array Opcional data-allowed_parent_origin="https://example.com"

A tabela a seguir lista os tipos de valor com suporte e suas descrições.

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

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

Prefixos curinga também são suportados. Por exemplo, "https://*.example.com" irá corresponder example.com e seus subdomínios em todos os níveis (por exemplo news.example.com , login.news.example.com ). Coisas a ter em mente ao usar curingas:

  • 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; Conforme mencionado acima, "https://*.example.com" corresponderá a example.com e seus subdomínios. Você também pode usar uma lista separada por vírgulas para representar 2 domínios diferentes. Por exemplo, "https://example1.com,https://*.example2.com" corresponderá aos domínios example1.com , example2.com e subdomínios de example2.com
  • Os domínios curinga devem começar com um esquema https: // seguro. "*.example.com" será considerado inválido.

data-intermediário_iframe_close_callback

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

O campo data-intermediate_iframe_close_callback tem efeito apenas no modo iframe intermediário. E tem impacto apenas no iframe intermediário, em vez do iframe One Tap. A IU do One Tap é removida antes que o retorno de chamada seja invocado.

Modelo Obrigatório Exemplo
função Opcional data-intermediate_iframe_close_callback='logBeforeClose'

Elemento com classe "g_id_signin"

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

Você pode renderizar vários botões Fazer login com o Google na mesma página. Cada botão pode ter suas próprias configurações visuais. 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 suas descrições:

Atributo
data-type O tipo de botão: ícone ou botão padrão.
data-theme O tema do botão. Por exemplo, branco ou azul.
data-size O tamanho do botão. Por exemplo, pequeno ou grande.
data-text O texto do botão. Por exemplo, "Sign in with Google" ou "Sign up with Google".
data-shape A forma do botão. Por exemplo, retangular ou circular.
data-logo_alignment O alinhamento do logotipo do Google: à esquerda ou ao centro.
data-width A largura do botão, em pixels.
data-locale O texto do botão é renderizado no idioma definido neste atributo.

Tipos de atributos

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

tipo de dados

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

Modelo Obrigatório Exemplo
fragmento sim data-type="icon"

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

Modelo
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 obter mais informações:

Modelo Obrigatório Exemplo
fragmento Opcional data-theme="filled_blue"

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

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

tamanho dos dados

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

Modelo Obrigatório Exemplo
fragmento Opcional data-size="small"

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

Tamanho
large Um botão grande:
Um grande botão padrãoUm botão de ícone grandeUm botão grande e personalizado
medium Um botão de tamanho médio:
Um botão padrão médioUm botão de ícone médio
small Um pequeno botão:
Um pequeno botãoUm pequeno botão de ícone

data-text

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

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

Modelo Obrigatório Exemplo
fragmento Opcional data-text="signup_with"

A tabela a seguir lista os textos dos botões disponíveis e suas descrições:

Texto
signin_with O texto do botão é “Sign in with Google”:
Um botão padrão denominado 'Faça login com o Google'Um botão de ícone sem texto visível
signup_with O texto do botão é “Inscreva-se no Google”:
Um botão padrão denominado 'Inscreva-se no Google'Um botão de ícone sem texto visível
continue_with O texto do botão é “Continue with Google”:
Um botão padrão denominado 'Continuar com o Google'Um botão de ícone sem texto visível
signup_with O texto do botão é “Login”:
Um botão padrão denominado 'Fazer login'Um botão de ícone sem texto visível

formato de dados

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

Modelo Obrigatório Exemplo
fragmento Opcional data-shape="rectangular"

A tabela a seguir lista as formas de botão disponíveis e suas descrições:

Forma
rectangular O botão em forma retangular. Se usado para o tipo de botão de icon , é o mesmo que square .
Um botão retangular padrãoUm botão de ícone retangularUm botão retangular personalizado
pill O botão em forma de pílula. Se usado para o tipo de botão de icon , é o mesmo que circle .
Um botão padrão em forma de comprimidoUm botão de ícone em forma de pílulaUm botão personalizado em forma de pílula
circle O botão em forma de círculo. Se usado para o tipo de botão standard , é o mesmo que pill .
Um botão circular padrãoUm botão de ícone circularUm botão circular personalizado
square O botão em forma de quadrado. Se usado para o tipo de botão standard , é o mesmo que rectangular .
Um botão quadrado padrãoUm botão de ícone quadradoUm botão quadrado personalizado

data-logo_alignment

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

Modelo Obrigatório Exemplo
fragmento Opcional data-logo_alignment="center"

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

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

largura de dados

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

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

Modelo Obrigatório Exemplo
fragmento Opcional data-width=400

data-locale

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

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

Modelo Obrigatório Exemplo
fragmento Opcional data-locale="zh_CN"

Integração do lado do servidor

Seus pontos de extremidade do lado do servidor devem lidar com as seguintes solicitações HTTP POST .

O endpoint do manipulador de token de ID

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

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

Formato Nome Descrição
Biscoito g_csrf_token Uma string aleatória que muda com cada solicitação para o terminal do manipulador.
Parâmetro de solicitação g_csrf_token Uma string igual ao valor do cookie anterior, g_csrf_token .
Parâmetro de solicitação credential O token de ID que o Google emite.
Parâmetro de solicitação select_by Como a credencial é selecionada.

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

  • O usuário pressionou o botão One Tap ou Sign In With 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 credenciais de token de ID com seu aplicativo, o usuário

    • pressionado o botão Confirmar para conceder seu consentimento para compartilhar credenciais, ou
    • havia concedido consentimento anteriormente e usado Selecionar uma conta para escolher uma Conta do Google.

O valor deste campo é definido como um desses tipos,

Valor Descrição
auto Login automático de um usuário com uma sessão existente que já havia concedido consentimento para compartilhar credenciais.
user Um usuário com uma sessão existente que já havia concedido consentimento pressionou o botão One Tap 'Continuar como' para compartilhar credenciais.
user_1tap Um usuário com uma sessão existente pressionou o botão One Tap 'Continuar como' para conceder consentimento e compartilhar credenciais. Aplica-se apenas ao Chrome v75 e superior.
user_2tap Um usuário sem uma sessão existente pressionou o botão One Tap 'Continuar como' 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 em Chromium.
btn Um usuário com uma sessão existente que concedeu consentimento anteriormente pressionou o botão Entrar com o Google e selecionou uma Conta do Google em 'Escolha uma conta' para compartilhar as credenciais.
btn_confirm Um usuário com uma sessão existente pressionou o botão Sign In With Google e o botão Confirm para conceder consentimento e compartilhar credenciais.
btn_add_session Um usuário sem uma sessão existente que concedeu consentimento anteriormente pressionou o botão Sign In With Google para selecionar uma Conta do Google e compartilhar credenciais.
btn_confirm_add_session Um usuário sem uma sessão existente primeiro pressionou o botão Sign In With Google para selecionar uma conta Google e, em seguida, pressionou o botão Confirm para consentir e compartilhar credenciais.

Endpoint do manipulador de credencial de senha

O terminal do manipulador de credencial de senha processa credenciais de senha que o gerenciador de credencial nativo recupera.

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

Formato Nome Descrição
Biscoito g_csrf_token Uma string aleatória que muda com cada solicitação para o terminal do manipulador.
Parâmetro de solicitação g_csrf_token Uma string igual ao valor do cookie anterior, g_csrf_token .
Parâmetro de solicitação email Este token de ID que o Google emite.
Parâmetro de solicitação password Como a credencial é selecionada.