Referência da API JavaScript do Sign-In com o Google

Esta página de referência descreve a API JavaScript do recurso Fazer login com o Google, usada para mostrar o botão "Fazer login com o Google" ou o comando do One Tap em páginas da Web.

Método: google.accounts.id.initialize

O método google.accounts.id.initialize inicializa o cliente do recurso Fazer Login com o Google com base no objeto de configuração. Confira o exemplo de código abaixo do método:

google.accounts.id.initialize(IdConfiguration)

O exemplo de código a seguir implementa o método google.accounts.id.initialize com uma função onload:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

O método google.accounts.id.initialize cria uma instância de cliente do recurso Fazer Login com o Google que pode ser usada implicitamente por todos os módulos na mesma página da Web.

• Você só precisa chamar o método google.accounts.id.initialize uma vez, mesmo que use vários módulos (como o One Tap, o botão personalizado, a revogação etc.) na mesma página da Web.
• Se você chamar o método google.accounts.id.initialize várias vezes, somente as configurações da última chamada serão lembradas e usadas.

Na verdade, você redefine as configurações sempre que chama o método google.accounts.id.initialize, e todos os métodos subsequentes na mesma página da Web usam imediatamente as novas configurações.

Aviso: o método google.accounts.id.initialize precisa ser chamado apenas uma vez, mesmo que você use o One Tap e o botão na mesma página da Web.

Tipo de dados: IdConfiguration

A tabela a seguir lista os campos e as descrições do tipo de dados IdConfiguration:

Campo
client_id	O ID do cliente do seu aplicativo
color_scheme	O esquema de cores aplicado à solicitação de Um Toque.
auto_select	Ativa a seleção automática.
callback	A função JavaScript que processa tokens de ID. O Google One Tap e o modo de UX popup do botão Fazer Login com o Google usam esse atributo.
login_uri	O URL do endpoint de login. O modo de UX redirect do botão "Fazer login com o Google" usa esse atributo.
native_callback	A função JavaScript que processa as credenciais de senha.
cancel_on_tap_outside	Cancela a solicitação se o usuário clicar fora dela.
prompt_parent_id	O ID do DOM do elemento de contêiner da solicitação do One Tap.
nonce	Uma string aleatória para tokens de ID
essential_claims	Declarações adicionais a serem incluídas no token de ID retornado pelo Google.
context	O título e as palavras no comando do One Tap
state_cookie_domain	Se você precisar chamar o One Tap no domínio pai e nos subdomínios dele, transmita o domínio pai para esse campo para que um único cookie compartilhado seja usado.
ux_mode	Fluxo de UX do botão "Fazer login com o Google"
allowed_parent_origin	As origens que podem incorporar o iframe intermediário. O One Tap será executado no modo de iframe intermediário se esse campo estiver presente.
intermediate_iframe_close_callback	Substitui o comportamento padrão do iframe intermediário quando os usuários fecham manualmente o One Tap.
itp_support	Ativa a UX do One Tap atualizada em navegadores com ITP.
login_hint	Pule a seleção de conta fornecendo uma dica de usuário.
hd	Limitar a seleção de contas por domínio.
use_fedcm_for_prompt	Descontinuado: esse atributo foi descontinuado e será ignorado se for usado. Permita que o navegador controle as solicitações de login do usuário e faça a mediação do fluxo de login entre seu site e o Google.
use_fedcm_for_button	Este campo determina se a UX do botão do FedCM deve ser usada no Chrome (computador M125+ e Android M128+). O padrão é false.
button_auto_select	Se a opção de seleção automática deve ser ativada para o fluxo do botão da FedCM. Se ativado, os usuários recorrentes com uma sessão ativa do Google vão fazer login automaticamente, ignorando o prompt do seletor de contas.O valor padrão é false.

client_id

Esse campo é o ID do cliente do aplicativo, que é encontrado e criado no console do Google Cloud. Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
string	Sim	client_id: "CLIENT_ID.apps.googleusercontent.com"

color_scheme

Este campo é o esquema de cores aplicado à solicitação do One Tap. 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 do usuário.	color_scheme: "dark"

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

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

auto_select

Esse campo determina se um token de ID é retornado automaticamente sem qualquer interação do usuário quando há apenas uma sessão do Google que já aprovou seu app antes. O valor padrão é false. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
booleano	Opcional	auto_select: true

callback

Esse campo é a função JavaScript que processa o token de ID retornado do prompt do One Tap ou da janela pop-up. Esse atributo é obrigatório se o modo de UX do recurso de um toque do Google ou do botão Fazer login com o Google popup for usado. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
função	Obrigatório para o One Tap e o modo de UX popup	callback: handleResponse

login_uri

Esse atributo é o URI do endpoint de login.

O valor precisa corresponder exatamente a um dos URIs de redirecionamento autorizados para o cliente OAuth 2.0, que você configurou no console do Google Cloud e precisa estar em conformidade com nossas regras de validação de URI de redirecionamento.

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

A resposta da credencial do token de ID é postada no endpoint de login quando um usuário clica no botão "Fazer login com o Google" e o modo de UX de redirecionamento é usado.

Consulte a tabela abaixo para mais informações:

Tipo	Opcional	Exemplo
URL	O padrão é o URI da página atual ou o valor que você especificar. Usado apenas quando ux_mode: "redirect" está definido.	login_uri: "https://www.example.com/login"

O endpoint de login precisa processar solicitações POST que contenham um parâmetro credential com um valor de token de ID no corpo. select_by não está incluído nas solicitações HTTP POST para login_uri ou data-login_uri e é retornado apenas no objeto CredentialResponse transmitido para a função callback do JavaScript.

Observação: com a API JavaScript, a resposta do recurso de um toque do Google e do modo de UX popup do botão Fazer login com o Google só pode ser retornada para a função JavaScript callback. Teste a API HTML se a resposta precisar ser enviada automaticamente para login_uri.

native_callback

Esse campo é o nome da função JavaScript que processa a credencial de senha retornada pelo gerenciador de credenciais integrado do navegador. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
função	Opcional	native_callback: handleResponse

cancel_on_tap_outside

Esse campo define se a solicitação do One Tap será cancelada ou não se um usuário clicar fora da solicitação. O valor padrão é true. É possível desativá-lo se você definir o valor como false. Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
booleano	Opcional	cancel_on_tap_outside: false

prompt_parent_id

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

Tipo	Obrigatório	Exemplo
string	Opcional	prompt_parent_id: 'parent_id'

valor de uso único

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

Tipo	Obrigatório	Exemplo
string	Opcional	nonce: "biaqbm70g23"

O tamanho do valor de uso único é limitado ao tamanho máximo de JWT aceito pelo ambiente e às restrições de tamanho HTTP do navegador e do servidor.

essential_claims

Esse campo é uma string usada para solicitar que outras declarações sejam incluídas no token de ID retornado pelo Google. Para uma lista completa de declarações aceitas pelo Google, consulte declarações compatíveis.

Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional	essential_claims: "auth_time, amr"

contexto

Esse campo muda o texto do título e das mensagens mostradas na solicitação do One Tap, sem efeito para navegadores com ITP. O valor padrão é signin.

Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional	context: "use"

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

Contexto
signin	"Fazer login em"
signup	"Inscreva-se para"
use	"Usar"

state_cookie_domain

Se você precisar exibir o One Tap no domínio pai e nos subdomínios dele, transmita o domínio pai para esse campo 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	state_cookie_domain: "example.com"

ux_mode

Use esse campo para definir o fluxo de UX usado pelo botão do Google "Fazer login com o Google". O valor padrão é popup. Esse atributo não afeta a UX do OneTap. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional	ux_mode: "redirect"

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

Modo de UX
popup	Executa 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.

allowed_parent_origin

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

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

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

Tipos de valor
string	Um único URI de domínio.	"https://example.com"
string array	Uma matriz de URIs de domínio.	["https://news.example.com", "https://local.example.com"]

Prefixos curinga também são aceitos. Por exemplo, "https://*.example.com" corresponde a example.com e aos subdomínios dele em todos os níveis (por exemplo, news.example.com, login.news.example.com). Pontos a serem considerados ao usar caracteres curinga:

• 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, já que "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.
• Os domínios curinga precisam começar com um esquema https:// seguro. Portanto, "*.example.com" é considerado inválido.

Observação: ao contrário da API HTML, uma string com URIs separados por vírgulas é inválida para o campo allowed_parent_origin. Use um objeto de matriz JavaScript.

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

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 intermediate_iframe_close_callback só entra em vigor no modo de iframe intermediário. E isso afeta apenas o iframe intermediário, não o iframe do One Tap. A interface do One Tap é removida antes que o callback seja invocado.

Tipo	Obrigatório	Exemplo
função	Opcional	intermediate_iframe_close_callback: logBeforeClose

itp_support

Esse campo determina se a experiência do usuário atualizada do One Tap precisa ser ativada em navegadores compatíveis com a Prevenção Inteligente contra 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	itp_support: false

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 isso acontece, a seleção de conta é ignorada. Os valores aceitos são: um endereço de e-mail ou um valor de campo sub de token de ID.

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

Tipo	Obrigatório	Exemplo
String, um endereço de e-mail ou o valor de um campo sub de um token de ID.	Opcional	login_hint: '[e-mail]'

hd

Quando um usuário tem várias contas e só deve fazer login com a conta do Workspace, use essa opção para fornecer uma dica de nome de domínio ao Google. Quando bem-sucedidas, as contas de usuário exibidas durante a seleção de conta são limitadas ao domínio fornecido. Um valor de caractere curinga: * oferece apenas contas do Workspace ao usuário e exclui contas pessoais ([e-mail]) durante a seleção de contas.

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

Tipo	Obrigatório	Exemplo
String. Um nome de domínio totalmente qualificado ou *.	Opcional	hd: '*'

use_fedcm_for_prompt

Descontinuado: esse atributo foi descontinuado e será ignorado se for usado.

Permita que o navegador controle as solicitações de login do usuário e faça a mediação do fluxo de login entre seu site e o Google. O padrão é "falso". Consulte a página Migrar para a FedCM para mais informações.

Tipo	Obrigatório	Exemplo
booleano	Descontinuado	use_fedcm_for_prompt: true

use_fedcm_for_button

Esse campo determina se a UX do botão do 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	use_fedcm_for_button: true

button_auto_select

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

Tipo	Obrigatório	Exemplo
booleano	Opcional	button_auto_select: true

Método: google.accounts.id.prompt

O método google.accounts.id.prompt mostra a solicitação do One Tap ou o gerenciador de credenciais integrado do navegador depois que o método initialize() é invocado. Confira o exemplo de código do método abaixo:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Normalmente, o método prompt() é chamado no carregamento de página. Devido ao status da sessão e às configurações do usuário no Google, a interface do comando de um toque pode não ser exibida. Para receber notificações sobre o status da interface em diferentes momentos, transmita uma função para receber notificações de status da interface.

As notificações são enviadas nos 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 interface é mostrada ou não.

• Momento ignorado: ocorre quando o prompt do One Tap é fechado por um cancelamento automático ou manual ou quando o Google não emite uma credencial, como quando a sessão selecionada sai do Google.

  Nesses casos, recomendamos que você continue para 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, é possível chamar o método google.accounts.id.cancel() para fechar o prompt do One Tap e acionar um momento de dispensa.

  Aviso: quando estiver em um momento de dispensa, não tente nenhum dos próximos provedores de identidade.

O exemplo de código a seguir implementa o momento pulado:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Observação: para melhorar a privacidade do usuário, as notificações de momento de exibição são atrasadas intencionalmente quando o FedCM está ativado. As notificações podem ser recebidas até 1 minuto após o evento real.

Observação: para o gerenciador de credenciais integrado, não há notificação para momentos de exibição, pular ou dispensar, já que eles ocorrem fora da biblioteca do GIS.

Tipo de dados: PromptMomentNotification

A tabela a seguir lista os métodos e as descrições do tipo de dados PromptMomentNotification:

Atenção: as mudanças na FedCM afetam isDisplayMoment(), isDisplayed(), isNotDisplayed(), getNotDisplayedReason() e getSkippedReason().Consulte a página Migrar para a FedCM para mais informações.

Método
isDisplayMoment()	Retorna true se a solicitação do recurso Um Toque for mostrada. Observação: quando a FedCM está ativada, essa notificação não é compatível. Consulte a página Migrar para a FedCM para mais informações.
isDisplayed()	Retorna true se o tipo de momento for PromptMoment.DISPLAY e a solicitação do One Tap for mostrada. Observação: quando a FedCM está ativada, essa notificação não é compatível. Consulte a página Migrar para a FedCM para mais informações.
isNotDisplayed()	Retorna true se o tipo de momento for PromptMoment.DISPLAY e a solicitação de Um Toque não for mostrada. Observação: quando a FedCM está ativada, essa notificação não é compatível. Consulte a página Migrar para a FedCM para mais informações.
getNotDisplayedReason()	O motivo detalhado pelo qual a interface não é mostrada. Veja a seguir os valores possíveis: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason Observação: quando a FedCM está ativada, essa notificação não é compatível. Consulte a página Migrar para a FedCM para mais informações.
isSkippedMoment()	Retorna true se o tipo de momento for PromptMoment.SKIPPED Observação: quando a FedCM está ativada, esse método é parcialmente compatível. Em particular, ele não é compatível com o motivo ignorado de user_cancel. Consulte a página Migrar para a FedCM para mais informações.
getSkippedReason()	O motivo detalhado do momento pulado. Veja a seguir os valores possíveis: auto_cancel user_cancel tap_outside issuing_failed Observação: quando a FedCM está ativada, esse método tem suporte parcial. Em particular, ele não aceita o motivo ignorado de user_cancel. Consulte a página Migrar para a FedCM para mais informações.
isDismissedMoment()	Retorna true se o tipo de momento for PromptMoment.DISMISSED. Observação: quando a FedCM está ativada, esse método é totalmente compatível. Consulte a página Migrar para a FedCM para mais informações.
getDismissedReason()	O motivo detalhado da dispensa. Estes são os valores possíveis: credential_returned cancel_called flow_restarted Observação: quando a FedCM está ativada, esse método é totalmente compatível. Consulte a página Migrar para a FedCM para mais informações.
getMomentType()	Retorna uma string para o tipo de momento. Estes são os valores possíveis: display skipped dismissed

Tipo de dados: CredentialResponse

Quando a função callback é invocada, um objeto CredentialResponse é transmitido como parâmetro. A tabela a seguir lista os campos contidos no objeto de resposta de credencial:

Campo
credential	O token de ID JWT codificado que o Google emite.
select_by	Como o usuário fez login.
state	Esse campo 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

Esse campo é o token de ID como uma string JSON Web Token (JWT) codificada em base64.

Quando decodificado, o JWT é semelhante ao seguinte exemplo:

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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "email": "[e-mail]", // 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": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion creation time
  "exp": 1596477600, // Unix timestamp of the assertion 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, porque ele é exclusivo entre todas as Contas do Google e nunca é reutilizado.

Aviso: não use o endereço de e-mail como identificador, porque uma Conta do Google pode ter vários endereços de e-mail em momentos diferentes. Sempre use o campo sub como o identificador do usuário.

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

Casos em que o Google é autoritativo:

• email tem um sufixo @gmail.com, que é uma conta do Gmail.
• email_verified for verdadeiro e hd estiver definido, essa será uma conta do Google Workspace.

Os usuários podem se registrar em 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 é autoritativo, e métodos de senha ou outros métodos de desafio são recomendados para verificar o usuário. email_verfied também pode ser verdadeiro, já que o Google verificou inicialmente 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 de validade para você verificar o token no servidor. É de uma hora para o token de ID recebido do recurso Fazer Login com o Google. É necessário 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 saiu da conta. Seu app é responsável pelo gerenciamento de sessões dos usuários.

select_by

Observação: select_by é retornado apenas no objeto CredentialResponse transmitido para a função callback do JavaScript e não é incluído em solicitações HTTP POST para login_uri ou data-login_uri.

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 "Um toque" ou "Fazer login com o Google" ou usou o processo de login automático sem toque.

• Uma sessão 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

  • pressionou o botão "Confirmar" para dar consentimento ao compartilhamento de credenciais; ou
  • já tiver concedido consentimento e usado a opção "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 atual que já autorizou o compartilhamento de credenciais. Válido apenas para navegadores que não são compatíveis com a FedCM.
user	Um usuário com uma sessão atual que já tinha concedido consentimento pressionou o botão "Continuar como" do One Tap para compartilhar credenciais. Aplica-se apenas a navegadores que não são compatíveis com a FedCM.
fedcm	Um usuário pressionou o botão "Continuar como" do recurso de Um Toque para compartilhar credenciais usando o FedCM. Aplica-se apenas a navegadores compatíveis com a FedCM.
fedcm_auto	Login automático de um usuário com uma sessão atual que já autorizou o compartilhamento de credenciais usando o FedCM One Tap. Aplica-se apenas a navegadores compatíveis com a FedCM.
user_1tap	Um usuário com uma sessão atual pressionou o botão "Continuar como" do recurso de um toque para conceder consentimento e compartilhar credenciais. Aplicável apenas ao Chrome v75 e versões mais recentes.
user_2tap	Um usuário sem uma sessão atual pressionou o botão "Continuar como" do recurso Um Toque para selecionar uma conta e, em seguida, pressionou o botão "Confirmar" em uma janela pop-up para dar consentimento e compartilhar credenciais. Válido para navegadores não baseados no Chromium.
itp	Um usuário que já tinha dado consentimento pressionou o One Tap em navegadores ITP.
itp_confirm	Um usuário que não deu consentimento pressionou o One Tap em navegadores ITP e pressionou o botão "Continuar" para dar consentimento e compartilhar credenciais.
btn	Um usuário que já havia concedido 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 concedeu consentimento pressionou o botão "Fazer login com o Google" e o botão "Continuar" para conceder consentimento e compartilhar credenciais.

estado

Esse campo 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 clicado é especificado. O valor desse campo é o mesmo que você especificou no atributo state do botão.

Como vários botões "Fazer login com o Google" podem ser renderizados na mesma página, é possível atribuir uma string exclusiva a cada um deles. Portanto, use esse campo state para identificar em qual botão o usuário clicou para fazer login.

Método: google.accounts.id.renderButton

O método google.accounts.id.renderButton renderiza um botão "Fazer login com o Google" nas suas páginas da Web.

Confira o exemplo de código do método abaixo:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Tipo de dados: GsiButtonConfiguration

A tabela a seguir lista os campos e as descrições do tipo de dados GsiButtonConfiguration:

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

Tipos de atributo

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

tipo

O tipo de botão. O valor padrão é standard.

Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
string	Sim	type: "icon"

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

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

tema

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	theme: "filled_blue"

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

Tema	Amostras	Especificações
outline	Um tema de botão padrão.	Preenchimento: #FFFFFF Traço: #747775 | 1px | interno Fonte: #1F1F1F | Roboto Medium | 14/20 Personalizado: #1F1F1F | Roboto | Medium 12/14 | Regular 11/13
filled_blue	Um tema de botão preenchido em azul.	Preenchimento: #0B57D0 Traço: #OB57D0 | 1px | interno Fonte: #FFFFFF | Google Sans Medium | 14/20 Personalizado: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
filled_black	Um tema de botão preto com logotipo contrastante.	Preenchimento: #202124 Traço: #OB57D0 | 1 px | interno Fonte: #FFFFFF | Google Sans Medium | 14/20 Personalizado: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13
outline_dark	Um tema de botão preenchido em preto.	Preenchimento: #131314 Traço: #8E918F | 1px | interno Fonte: #FFFFFF | Google Sans Medium | 14/20 Personalizado: #FFFFFF | Roboto | Medium 12/14 | Regular 11/13

tamanho

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	size: "small"

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

Tamanho
large	Um botão grande.
medium	Um botão de tamanho médio.
small	Um botão pequeno.

texto

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

Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional	text: "signup_with"

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

Texto
signin_with	O texto do botão é "Fazer login com o Google".
signup_with	O texto do botão é "Inscreva-se com o Google".
continue_with	O texto do botão é "Continuar com o Google".
signin	O texto do botão é "Fazer login".

forma

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	shape: "rectangular"

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

Forma
rectangular	O botão retangular. Se usado para o tipo de botão icon, ele é igual a square.
pill	O botão em formato de pílula. Se usado para o tipo de botão icon, ele é igual a circle.
circle	O botão em forma de círculo. Se usado para o tipo de botão standard, ele é igual a pill.
square	O botão quadrado. Se usado para o tipo de botão standard, ele é igual a rectangular.

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	logo_alignment: "center"

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

logo_alignment
left	Alinha o logotipo do Google à esquerda.
center	Centraliza o logotipo do Google.

largura

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

Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional	width: "400"

localidade

Opcional. Mostra o texto do botão usando a localidade especificada. Caso contrário, o padrão será a Conta do Google ou as configurações do navegador do usuário. Adicione o parâmetro hl e o código de 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 e, possivelmente, com tamanhos diferentes.

Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional	locale: "zh_CN"

click_listener

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

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.

estado

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

Consulte a tabela abaixo para mais informações:

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

Tipo de dados: credencial

Quando a função native_callback é invocada, um objeto Credential é transmitido como parâmetro. A tabela a seguir lista os campos contidos no objeto:

Campo
id	Identifica o usuário.
password	A senha

Método: google.accounts.id.disableAutoSelect

Quando o usuário sair do site, chame o método google.accounts.id.disableAutoSelect para registrar o status nos cookies. Isso evita um loop morto de UX. Confira o snippet de código do método:

google.accounts.id.disableAutoSelect()

O exemplo de código a seguir implementa o método google.accounts.id.disableAutoSelect com uma função onSignout():

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Método: google.accounts.id.storeCredential

Esse método é um wrapper para o método store() da API Credential Manager integrada do navegador. Portanto, ela só pode ser usada para armazenar uma credencial de senha. Confira o exemplo de código do método abaixo:

google.accounts.id.storeCredential(Credential, callback)

O exemplo de código a seguir implementa o método google.accounts.id.storeCredential com uma função onSignIn():

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Método: google.accounts.id.cancel

É possível cancelar o fluxo de Um Toque se você remover o prompt do DOM da parte confiável. A operação de cancelamento será ignorada se uma credencial já estiver selecionada. Confira o exemplo de código do método abaixo:

google.accounts.id.cancel()

O exemplo de código a seguir implementa o método google.accounts.id.cancel() com uma função onNextButtonClicked():

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Callback de carregamento da biblioteca: onGoogleLibraryLoad

Você pode registrar um callback onGoogleLibraryLoad. Ele é notificado depois que a biblioteca JavaScript do recurso Fazer Login com o Google é carregada:

window.onGoogleLibraryLoad = () => {
    ...
};

Esse callback é apenas um atalho para o callback window.onload. Não há diferenças de comportamento.

O exemplo de código a seguir implementa um callback onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Método: google.accounts.id.revoke

O método google.accounts.id.revoke revoga a permissão de acesso OAuth usada para compartilhar o token de ID do usuário especificado. Confira o seguinte snippet de código do método: javascript google.accounts.id.revoke(login_hint, callback)

Parâmetro	Tipo	Descrição
login_hint	string	O endereço de e-mail ou o ID exclusivo da Conta do Google do usuário. O ID é a propriedade sub do payload credential.
callback	função	Gerenciador opcional de RevocationResponse.

O exemplo de código a seguir mostra como usar o método revoke com um ID.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Importante: a revogação remove todos os escopos do OAuth 2.0 concedidos anteriormente a um projeto, invalidando todos os tokens de acesso ou tokens de atualização emitidos para todos os clientes registrados nesse projeto.

Tipo de dados: RevocationResponse

Quando a função callback é invocada, um objeto RevocationResponse é transmitido como parâmetro. A tabela a seguir lista os campos contidos no objeto de resposta de revogação:

Campo
successful	Esse campo é o valor de retorno da chamada de método.
error	Este campo contém uma mensagem de resposta de erro detalhada.

bem-sucedido

Esse campo é um valor booleano definido como verdadeiro se a chamada de método de revogação for bem-sucedida ou falso em caso de falha.

erro

Esse campo é um valor de string e contém uma mensagem de erro detalhada se a chamada de método de revogação falhar. Ele é indefinido em caso de sucesso.