Referência da API Sign In with Google para JavaScript

Esta página de referência descreve a API JavaScript de login. É possível usar esta API para mostrar a solicitação de um toque ou o botão "Fazer login com o Google" nas suas páginas da Web.

Método: google.accounts.id.Initialize

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

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 um cliente do Fazer login com o Google que pode ser implicitamente usada por todos os módulos na mesma página da Web.

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

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.

Tipo de dados: IdConfiguration

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

Campo
client_id	ID do cliente do seu aplicativo
auto_select	Ativa a seleção automática.
callback	A função JavaScript que manipula tokens de ID. Google One Tap e o botão "Fazer login com o Google" popup Modo de UX, use este .
login_uri	O URL do endpoint de login. O botão "Fazer login com o Google" redirect O modo de UX usa esse atributo.
native_callback	A função JavaScript que manipula as credenciais da 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 de um toque
nonce	String aleatória para tokens de ID
context	O título e as palavras na solicitação de um toque
state_cookie_domain	Se você precisar chamar um toque no domínio pai e nos subdomínios dele, transmitir o domínio pai para este campo para que um único cookie compartilhado seja usados.
ux_mode	Fluxo de UX do botão "Fazer login com o Google"
allowed_parent_origin	As origens que têm permissão para incorporar o iframe intermediário. Um toque é executado no modo iframe intermediário se este campo estiver presente.
intermediate_iframe_close_callback	Substitui o comportamento do iframe intermediário padrão quando os usuários manualmente fechar um toque.
itp_support	Ativa a UX atualizada com um toque em navegadores ITP.
login_hint	Dê uma dica ao usuário para pular a seleção de conta.
hd	Limite a seleção de contas por domínio.
use_fedcm_for_prompt	Permitir que o navegador controle as solicitações de login do usuário e mediar a fluxo de login entre seu site e o Google.

client_id

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

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

auto_select

Este campo determina se um token de ID é retornado automaticamente sem interação quando há apenas uma sessão do Google que aprovou o 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 trata do token de ID retornado do a solicitação de um toque ou a janela pop-up. Este atributo é obrigatório se o Google Um toque ou o botão Fazer login com o Google popup O modo de UX é usado. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
função	Obrigatório para um toque e o modo UX popup	callback: handleResponse

login_uri

Esse atributo é o URI do endpoint de login.

O valor deve corresponder exatamente a um dos URIs de redirecionamento autorizados para o OAuth 2.0, que você configurou no console do Google Cloud e precisa obedecer à nossa validação de URI de redirecionamento regras.

Esse atributo pode ser omitido se a página atual for sua página de login, em que caso a credencial seja postada nesta 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 redirecionamento de UX é usado.

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. Usado apenas quando ux_mode: "redirect" está definido.	login_uri: "https://www.example.com/login"

Seu endpoint de login precisa manipular solicitações POST que contenham um Chave credential com uma Valor do token de ID no corpo.

Veja a seguir um exemplo de solicitação para o endpoint de login:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

native_callback

Este campo é o nome da função JavaScript que lida com a senha credencial retornada do gerenciador de credenciais nativo 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

Este campo define se a solicitação de um toque será cancelada ou não se um usuário clicar fora do prompt. O valor padrão é true. Você pode desativá-la se definir o valor como false. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
booleano	Opcional	cancel_on_tap_outside: false

prompt_parent_id

Esse atributo define o ID DOM do elemento do contêiner. Se não estiver definido, o A solicitação de um toque aparece 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

Esse campo é 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	nonce: "biaqbm70g23"

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

contexto

Este campo muda o texto do título e das mensagens na solicitação de um toque. Consulte na tabela a seguir para mais informações:

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

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

Contexto
signin	"Fazer login com o Google"
signup	"Inscreva-se com o Google"
use	"Usar com o Google"

state_cookie_domain

Se você precisa exibir um toque no domínio pai e nos subdomínios dele, transmita o valor a esse campo para que um único cookie de estado compartilhado seja usado. Consulte na tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional	state_cookie_domain: "example.com"

ux_mode

Use este campo para definir 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 UX da 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 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 completa.

allowed_parent_origin

As origens que têm permissão para incorporar o iframe intermediário. Corridas com um toque no modo iframe intermediário, se este campo estiver presente. Consulte o seguinte: 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 valores
string	Um URI de domínio único.	"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 seus subdomínios em todos os níveis (por exemplo, news.example.com e login.news.example.com). Considerações importantes ao usar curingas:

• Strings padrão não podem ser compostas apenas de um caractere curinga e um de nível superior domínio. Por exemplo, https://.com e https://.co.uk são inválidos; Conforme mencionado acima, "https://.example.com" corresponde a example.com e aos subdomínios dele. Você também pode usar um para representar dois domínios diferentes. Por exemplo: ["https://example1.com", "https://.example2.com"] correspondências os domínios example1.com, example2.com e subdomínios de example2.com
• Domínios com caracteres curinga precisam começar com um esquema https:// seguro. "*.example.com" é considerado inválido.

Se o valor do campo allowed_parent_origin for inválido, o recurso de um toque a inicialização do modo iframe intermediário falharia e seria interrompida.

intermediate_iframe_close_callback

Modifica o comportamento do iframe intermediário padrão quando os usuários fecham manualmente o One Toque no "X" na interface de um toque. O comportamento padrão é remova o iframe intermediário do DOM imediatamente.

O campo intermediate_iframe_close_callback entra em vigor somente em períodos modo iframe. Além disso, afeta apenas o iframe intermediário, em vez de Iframe de um toque. A interface de um toque é removida antes que o callback seja invocado.

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

itp_support

Este campo determina se o upgrade da UX com um toque deve ser ativada em navegadores compatíveis com o Intelligent Tracking Prevention (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: true

login_hint

Se o aplicativo souber com antecedência qual usuário deve fazer login, ele poderá fornecer uma dica de login ao Google. Após a conclusão, a seleção da 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 no OpenID Connect na documentação do Google Cloud.

Tipo	Obrigatório	Exemplo
String, um endereço de e-mail ou o valor de um token de ID sub.	Opcional	login_hint: 'elisa.beckett@gmail.com'

hd

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

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

Permitir que o navegador controle as solicitações de login do usuário e mediar o fluxo de login entre seu site e o Google. O padrão é "false". Consulte Migrar para o FedCM. para mais informações.

Tipo	Obrigatório	Exemplo
booleano	Opcional	use_fedcm_for_prompt: true

Método: google.accounts.id.prompt

O método google.accounts.id.prompt mostra a solicitação de um toque ou a gerenciador de credenciais nativo do navegador após o método initialize() ser invocado. Confira este exemplo de código do método:

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

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

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

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

• Momento ignorado:isso ocorre quando a solicitação de um toque é fechada por um automático. um cancelamento manual, ou quando o Google não emitir uma credencial, como: quando a sessão selecionada sair do Google.

  Nesses casos, recomendamos que você prossiga para a próxima etapa provedores, se houver.

• Momento dispensado:ocorre quando o Google recupera um credencial ou se um usuário quiser interromper o fluxo de recuperação de credenciais. Para exemplo, quando o usuário começa a inserir o nome de usuário e a senha no de login, chame o método google.accounts.id.cancel() para fechar a solicitação de um toque e acionar um momento dispensado.

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

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

Tipo de dados: PromptMomentNotification

A tabela a seguir lista métodos e descrições dos Tipo de dados PromptMomentNotification:

Método
isDisplayMoment()	Esta notificação é de um momento de exibição? Observação : quando a FedCM é ativada, essa notificação não será disparada. Consulte Migrar para o FedCM para mais informações.
isDisplayed()	A notificação é apenas para um momento de exibição, e a interface está exibido? Observação : quando a FedCM é ativada, essa notificação não será disparada. Consulte Migrar para o FedCM para mais informações.
isNotDisplayed()	A notificação é apenas para um momento de exibição, e a interface não está exibido? Observação : quando a FedCM é ativada, essa notificação não será disparada. Consulte Migrar para o FedCM para mais informações.
getNotDisplayedReason()	É o motivo detalhado por que a interface não é exibida. Os itens a seguir são 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 é ativado, esse método não será compatível. Consulte Migrar para o FedCM para mais informações.
isSkippedMoment()	Esta notificação é de um momento pulado?
getSkippedReason()	O motivo detalhado do momento pulado. Os itens a seguir são valores possíveis: auto_cancel user_cancel tap_outside issuing_failed . Observação : quando a FedCM é ativado, esse método não será compatível. Consulte Migrar para o FedCM para mais informações.
isDismissedMoment()	Esta notificação é de um momento dispensado?
getDismissedReason()	O motivo detalhado da demissão. Os itens a seguir são possíveis valores: credential_returned cancel_called flow_restarted
getMomentType()	Retorne uma string para o tipo de momento. Os itens a seguir são possíveis valores: display skipped dismissed

Tipo de dados: CredentialResponse

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

Campo
credential	Esse campo é o token de ID retornado.
select_by	Esse campo define como a credencial é selecionada.
state	Este campo só é definido quando o usuário clica no botão "Fazer login com o Google" para fazer login, e o botão state for especificado.

credencial

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

Quando decodificado, o JWT se parece com este 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 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": "Elisa",
  "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. Apenas use o campo sub como identificador do usuário, já que ele é exclusivo entre todos os serviços contas e nunca reutilizadas. 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 diferentes momentos.

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

Casos em que o Google é confiável:

• email tem o sufixo @gmail.com. Esta é uma conta do Gmail.
• A email_verified é verdadeira e a hd foi definida. Este é um produto do Google Workspace. do Compute Engine.

Os usuários podem se registrar para 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, senha ou outros métodos de desafio são recomendados para verificar o usuário. email_verfied também pode ser verdadeiro porque o Google verificou inicialmente o usuário quando a Conta do Google foi criada, mas a propriedade do terceiro a conta de e-mail de terceiros pode ter mudado.

O campo exp mostra o tempo de expiração para você verificar o token na sua lado do servidor. É uma hora para o token de ID recebido no recurso Fazer login com o Google. Você precisa verificar a token antes da expiração tempo de resposta. 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 pela sessão gerenciamento de seus usuários.

select_by

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

• O usuário pressionou o botão de um toque ou o botão "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 credenciais de token de ID com seu app, o usuário

  • pressionou o botão de confirmação para autorizar o compartilhamento de credenciais; ou
  • já deram consentimento e usaram o recurso "Selecionar uma conta" para escolher uma Conta do Google.

O valor desse campo é definido para um destes tipos,

Valor	Descrição
auto	Login automático de um usuário com uma sessão existente que tinha para compartilhar credenciais. Aplicável apenas a em navegadores não compatíveis com o FedCM.
user	Um usuário com uma sessão que já deu consentimento pressionou o botão de um toque "Continuar como" para compartilhar credenciais. Aplica-se somente a navegadores não compatíveis com o FedCM.
fedcm	Um usuário pressionou o botão "Continuar como" com um toque botão para compartilhar usando o FedCM. Aplicável apenas ao FedCM compatível navegadores da Web.
fedcm_auto	Login automático de um usuário com uma sessão existente que tinha consentiu anteriormente com o compartilhamento de credenciais usando o FedCM One Tap. Aplicável apenas ao FedCM compatível navegadores da Web.
user_1tap	Um usuário com uma sessão atual pressionou o botão "Continuar como" com um toque para dar consentimento e compartilhar credenciais. Aplicável apenas ao Chrome v75 e mais recentes.
user_2tap	Um usuário sem uma sessão pressionou o botão "Continuar como" com um toque para selecionar uma conta e depois pressionou o botão de confirmação para dar consentimento e compartilhar credenciais. Válido para que não são baseados no Chromium.
btn	Um usuário com uma sessão que já deu consentimento pressionou o botão "Fazer login com o Google" e selecionou uma Conta do Google no "Escolher uma conta" para compartilhar credenciais.
btn_confirm	Um usuário com uma sessão anterior pressionou o botão "Fazer login com o Google" e pressionou o botão "Confirmar" para dar consentimento e compartilhar credenciais.
btn_add_session	Um usuário sem uma sessão que concedeu anteriormente consentimento pressionou o botão "Fazer login com o Google" para selecionar uma Conta do Google e compartilhar credenciais.
btn_confirm_add_session	Um usuário sem uma sessão pressionou pela primeira vez o botão "Fazer login com o Google" para selecionar uma Conta do Google e pressionou o botão de confirmação para consentir e compartilhar as credenciais.

estado

Esse campo só é definido quando o usuário clica no botão "Fazer login com o Google" para fazer login, e o atributo state do botão clicado é especificado. O o valor desse campo é o mesmo valor especificado na tag state.

Como vários botões "Fazer login com o Google" podem ser renderizados na mesma página, você pode atribuir uma string única a cada botão. Portanto, este 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 recurso Fazer login com o Google nas suas páginas da Web.

Confira este exemplo de código do método:

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 dos Tipo de dados GsiButtonConfiguration:

Atributo
type	O tipo de botão: ícone ou botão padrão.
theme	Tema do botão. Por exemplo, preenchido_azul ou preenchido_preto.
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 "Inscreva-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 no centro.
width	A largura do botão, em pixels.
locale	Se definido, o idioma do botão será renderizado.
click_listener	Se definida, esta função é chamada quando o recurso "Fazer login com o Google" é clicado.
state	Se definida, essa string retorna com o token de ID.

Tipos de atributo

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

tipo

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	type: "icon"

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

Tipo
standard
icon

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
outline
filled_blue
filled_black

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
medium
small

texto

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

Consulte a tabela a seguir 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 os respectivos descrições:

Texto
signin_with
signup_with
continue_with
signin

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 as formas de botão disponíveis e as respectivas descrições:

Forma
rectangular
pill
circle
square

logo_alignment

O alinhamento do logotipo do Google. O valor padrão é left. Este atributo só se aplica 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 respectivas descrições:

logo_alignment
left
center

largura

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

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

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

localidade

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

Se não estiver definida, a localidade padrão do navegador ou o nome do usuário da sessão do Google é usada. Portanto, diferentes usuários podem ver diferentes versões do em botões localizados e, possivelmente, com diferentes tamanhos.

Consulte a tabela a seguir 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 recurso Fazer login com o Google é 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 Fazer login com o botão do Google clicado... é registrada. ao console quando o botão "Fazer login com o Google" for clicado.

estado

Opcional, já que vários botões "Fazer login com o Google" podem ser renderizados no mesmo atribua uma string exclusiva a cada botão. A mesma string retornaria junto com o token de ID, para que você possa identificar qual botão de 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"

Tipo de dados: credencial

Quando seu native_callback for invocada, um objeto Credential será transmitido como o parâmetro. O 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 seu site, será necessário chamar o método google.accounts.id.disableAutoSelect para registrar o status nos cookies. Isso evita um loop morto de UX. Confira este snippet de código do método:

google.accounts.id.disableAutoSelect()

O exemplo de código abaixo implementa a 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() do código nativo do navegador API do gerenciador de credenciais. Portanto, ele só pode ser usado para armazenar uma senha credencial. Confira este exemplo de código do método:

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

O exemplo de código abaixo implementa a 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 a solicitação da parte confiável e o DOM. A operação de cancelamento será ignorada se uma credencial já estiver selecionada. Consulte este exemplo de código do método:

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

É possível registrar um callback onGoogleLibraryLoad. Ela é notificada após o sinal A biblioteca JavaScript com o Google é carregada:

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

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

O exemplo de código abaixo 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 concessão de OAuth usada para compartilhar o Token de ID para o usuário especificado. Confira este 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 credential.
callback	função	Gerenciador opcional 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);
  });

Tipo de dados: RevocationResponse

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

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

bem-sucedido

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

erro

Esse campo é um valor de string e contém uma mensagem de erro detalhada se a função de do método falhar, ele será indefinido em caso de sucesso.