Referência da API Sign In with Google para JavaScript

Esta página de referência descreve a API Sign-In JavaScript. É possível usar essa API para mostrar o comando "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 cliente do recurso "Fazer login com o Google" com base no objeto de configuração. Confira o exemplo de código a seguir do método:

google.accounts.id.initialize(IdConfiguration)

O exemplo de código abaixo 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 usado 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 se usar 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.

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 só pode ser chamado 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 app
auto_select	Ativa a seleção automática.
callback	A função JavaScript que lida com 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 do botão redirect "Fazer login com o Google" usa esse atributo.
native_callback	A função JavaScript que lida com as credenciais de senha.
cancel_on_tap_outside	Cancela a solicitação se o usuário clicar fora dela.
prompt_parent_id	O ID DOM do elemento do contêiner do comando de um toque
nonce	Uma string aleatória para tokens de ID
context	O título e as palavras no comando do recurso Um toque
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 este 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 de um toque atualizada em navegadores ITP.
login_hint	Ignorar a seleção de conta fornecendo uma dica ao usuário.
hd	Limitar a seleção de contas por domínio.
use_fedcm_for_prompt	Permita que o navegador controle os comandos de login do usuário e mediar o fluxo de login entre seu site e o Google.
use_fedcm_for_button	Esse campo determina se a UX do botão do FedCM precisa ser usada no Chrome (M125 ou mais recente para computadores e M128 ou mais recente para Android). O padrão é false.
button_auto_select	Define se a opção seleção automática vai ser ativada para o fluxo de botões do FedCM. Se ativada, os usuários que retornarem com uma sessão ativa do Google vão fazer login automaticamente, ignorando a solicitação do Seletor de contas.O valor padrão é false.

client_id

Esse 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

Esse campo determina se um token de ID é retornado automaticamente sem nenhuma interação do usuário quando há apenas uma sessão do Google que 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 comando "One Tap" ou da janela pop-up. Esse atributo é obrigatório se o modo de UX popup do botão "Fazer login com o Google" ou do Google One Tap for usado. Consulte a tabela abaixo para mais informações:

Tipo	Obrigatório	Exemplo
função	Obrigatório para o modo de UX de um toque e 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 do 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 será postada nessa página por padrão.

A resposta da credencial do token de ID é postada no endpoint de login quando um usuário clicar no botão "Fazer login com o Google" e o modo de UX de redirecionamento for 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. Só é usado quando ux_mode: "redirect" está definido.	login_uri: "https://www.example.com/login"

O endpoint de login precisa processar solicitações POST que contêm uma chave credential com um valor de token de ID no corpo.

Confira 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

Observação: com a API JavaScript, a resposta do Google One Tap e o modo de UX popup do botão "Fazer login com o Google" só podem ser retornados para a função JavaScript callback. Use 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 abaixo 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 do comando. O valor padrão é true. É possível desativar esse recurso definindo o valor como false. Confira mais informações na tabela a seguir:

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 comando "Um toque" vai aparecer no canto superior direito da janela. Consulte a tabela abaixo 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. Confira mais informações na tabela a seguir:

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

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

contexto

Esse campo muda o texto do título e das mensagens mostradas no comando de um toque, sem efeito para navegadores ITP. O valor padrão é signin.

Confira mais informações na tabela a seguir:

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 em"
signup	"Inscrever-se em"
use	"Usar"

state_cookie_domain

Se você precisar mostrar o recurso Um toque no domínio pai e nos subdomínios, transmita o domínio pai para esse campo para que um único cookie de estado compartilhado seja usado. Consulte a tabela abaixo 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 "Fazer login com o Google". O valor padrão é popup. Esse atributo não afeta a UX do OneTap. Consulte a tabela abaixo 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 recurso "Um toque" é 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 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 de caracteres 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). Coisas a serem consideradas ao usar caracteres curinga:

• As strings de padrão não podem ser compostas apenas por um 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. 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 os subdomínios de example2.com.
• Os domínios com caracteres 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 do JavaScript.

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

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 intermediário do iframe. E isso afeta apenas o iframe intermediário, e não o 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

Esse campo determina se a UX do Toque inteligente atualizada precisa ser ativada em navegadores com suporte à prevenção de rastreamento inteligente (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 precisa fazer login, ele poderá fornecer uma dica de login para o Google. Se for bem-sucedido, a seleção de conta será 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 token de ID.	Opcional	login_hint: '[e-mail]'

hd

Quando um usuário tem várias contas e só precisa fazer login na conta do Workspace, use essa informação para fornecer uma sugestão de nome de domínio ao Google. Se for bem-sucedido, as contas de usuário exibidas durante a seleção de conta serão limitadas ao domínio fornecido. Um valor curinga: * oferece apenas contas do Workspace ao usuário e exclui contas de consumidor ([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

Permita que o navegador controle os avisos de login do usuário e mediar 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	use_fedcm_for_prompt: true

use_fedcm_for_button

Esse campo determina se a UX do botão FedCM precisa ser usada no Chrome (M125 ou mais recente para computadores e M128 ou mais recente para Android). O padrão é false. Confira mais informações na tabela a seguir:

Tipo	Obrigatório	Exemplo
booleano	Opcional	use_fedcm_for_button: true

button_auto_select

Esse campo determina se a opção autoseleção será ativada para o fluxo de botões do FedCM. Se ativada, os usuários recorrentes com uma sessão ativa do Google vão fazer login automaticamente, ignorando a solicitação do Seletor de contas. O padrão é false. É necessário ativar explicitamente a assinatura automática do botão durante o lançamento do recurso. Consulte a tabela a seguir 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 o comando de um toque 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 da 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 momentos diferentes, transmita uma função para receber notificações de status da interface.

As notificações são acionadas 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 IU está exibida ou não.

• Momento ignorado:ocorre quando o comando do One Tap é fechado por um cancelamento automático ou manual ou quando o Google não consegue emitir uma credencial, por exemplo, quando a sessão selecionada faz logout do Google.

  Nesses casos, recomendamos que você continue com os próximos provedores de identidade, se houver.

• Momento de dispensa:ocorre quando o Google recupera uma credencial ou quando um usuário quer interromper o fluxo de recuperação de credenciais. Por exemplo, quando o usuário começa a inserir o nome de usuário e a senha na caixa de diálogo de login, você pode chamar o método google.accounts.id.cancel() para fechar o comando de um toque e acionar um momento dispensado.

  Aviso: quando um momento for encerrado, não tente usar 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 exibição são intencionalmente adiadas quando o FedCM está ativado. As notificações podem ser recebidas até um minuto após o evento.

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

Tipo de dados: PromptMomentNotification

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

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

Método
isDisplayMoment()	Esta notificação é para um momento de exibição? Observação : quando o FedCM é ativado, essa notificação não é disparada. Consulte a página Migrar para o FedCM para mais informações.
isDisplayed()	A notificação é para um momento de exibição e a interface é mostrada? Observação : quando o FedCM é ativado, essa notificação não é disparada. Consulte a página Migrar para o FedCM para mais informações.
isNotDisplayed()	A notificação é para um momento de exibição e a interface não é mostrada? Observação : quando o FedCM é ativado, essa notificação não é disparada. Consulte a página Migrar para o FedCM para mais informações.
getNotDisplayedReason()	O motivo detalhado de por que a interface não está sendo mostrada. Estes são 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 o FedCM está ativado, esse método não é compatível. Consulte a página Migrar para o FedCM para mais informações.
isSkippedMoment()	Esta notificação é sobre um momento pulado?
getSkippedReason()	O motivo detalhado do momento pulado. Estes são os valores possíveis: auto_cancel user_cancel tap_outside issuing_failed Observação : quando o FedCM está ativado, esse método não é aceito. Consulte a página Migrar para o FedCM para mais informações.
isDismissedMoment()	Esta notificação é de um momento encerrado?
getDismissedReason()	O motivo detalhado da demissão. Estes são os valores possíveis: credential_returned cancel_called flow_restarted
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	Esse campo é o token de ID retornado.
select_by	Esse campo define como a credencial é selecionada.
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 de token da Web JSON (JWT) codificada em base64.

Quando decodificado, o JWT fica parecido 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": "[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'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. Só use 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 um identificador, porque uma Conta do Google pode ter vários endereços de e-mail em diferentes momentos. Sempre use o campo sub como o identificador do usuário.

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

Casos em que o Google é a autoridade:

• email tem um sufixo @gmail.com, ou seja, é uma conta do Gmail.
• email_verified é verdadeiro e hd está definido, essa é uma conta do Google Workspace.

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 é autorizado e a 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.

O campo exp mostra o tempo de expiração para verificar o token no lado do servidor. É de uma hora para o token de ID recebido do recurso Fazer login com o Google. É necessário verificar o token antes do tempo de expiração. Não use exp para gerenciamento de sessões. Um token de ID expirado não significa que o usuário foi desconectado. Seu app é responsável pelo gerenciamento de sessões dos usuários.

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 de 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 conceder o consentimento de compartilhamento de credenciais; ou
  • já tinha 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á concedeu consentimento para compartilhar credenciais. Válido apenas para navegadores sem suporte ao FedCM.
user	Um usuário com uma sessão ativa que já havia concedido consentimento pressionou o botão "Continuar como" do recurso "Com um toque" para compartilhar credenciais. Válido apenas para navegadores sem suporte ao FedCM.
fedcm	Um usuário pressionou o botão "Continuar como" do recurso "Com um toque" para compartilhar credenciais usando o FedCM. Válido apenas para navegadores com suporte ao FedCM.
fedcm_auto	O login automático de um usuário com uma sessão atual que já havia concedido consentimento para compartilhar credenciais usando o FedCM One Tap. Válido apenas para navegadores com suporte ao FedCM.
user_1tap	Um usuário com uma sessão ativa pressionou o botão "Continuar como" do One Tap 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 ativa pressionou o botão "Continuar como" do recurso "Com um toque" 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 com uma sessão ativa que já havia concedido consentimento pressionou o botão "One Tap" em navegadores ITP.
itp_confirm	Um usuário com uma sessão ativa pressionou o botão "One Tap" nos navegadores ITP e pressionou o botão "Confirmar" para conceder consentimento e compartilhar credenciais.
itp_add_session	Um usuário sem uma sessão ativa que deu consentimento anteriormente pressionou o botão "Um toque" em navegadores ITP para selecionar uma Conta do Google e compartilhar credenciais.
itp_confirm_add_session	Um usuário sem uma sessão ativa pressionou o botão "Um toque" nos navegadores ITP para selecionar uma Conta do Google e, em seguida, pressionou o botão "Confirmar" para consentir e compartilhar as credenciais.
btn	Um usuário com uma sessão ativa que já concedeu 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 com uma sessão ativa pressionou o botão "Fazer login com o Google" e o botão "Confirmar" para conceder consentimento e compartilhar credenciais.
btn_add_session	Um usuário sem uma sessão ativa que já havia concedido 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 ativa pressionou primeiro o botão "Fazer login com o Google" para selecionar uma Conta do Google e, em seguida, pressionou o botão "Confirmar" para consentir e compartilhar as 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 especificado no atributo state do botão.

Como vários botões do Assine com o Google podem ser renderizados na mesma página, é possível atribuir a cada botão uma string exclusiva. Portanto, você pode usar 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 padrão.
theme	O 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 "Cadastrar-se com o Google".
shape	A forma 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 definido, essa string é 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.

tipo

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

Confira mais informações na tabela a seguir:

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	Botão de ícone sem texto.

tema

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

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	Um tema de botão padrão.
filled_blue	Um tema de botão preenchido com azul.
filled_black	Um tema de botão preenchido com preto.

tamanho

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

Tipo	Obrigatório	Exemplo
string	Opcional	size: "small"

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

Tamanho
large	Botão grande.
medium	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 dos botões de ícone que têm atributos text diferentes. A única exceção é quando o texto é lido para acessibilidade na tela.

Confira mais informações na tabela a seguir:

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 é "Inscrever-se com o Google".
continue_with	O texto do botão é "Continuar com o Google".
signin	O texto do botão é "Fazer login".

forma

A forma 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 descrições delas:

Forma
rectangular	O botão retangular. Se usado para o tipo de botão icon, ele será o mesmo que square.
pill	O botão em forma de pílula. Se usado para o tipo de botão icon, será o mesmo que circle.
circle	O botão em forma de círculo. Se usado para o tipo de botão standard, ele será o mesmo que pill.
square	O botão quadrado. Se usado para o tipo de botão standard, ele será o mesmo que 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	Alinha o logotipo do Google ao centro.

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. Mostra o texto do botão usando a localidade especificada. Caso contrário, usa as configurações da Conta do Google ou 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, a localidade padrão do navegador ou a preferência do usuário da sessão do Google serão usadas. Portanto, usuários diferentes podem ver versões diferentes de botões localizados e, possivelmente, com tamanhos diferentes.

Confira mais informações na tabela a seguir:

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

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 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, como vários botões do "Fazer login com o Google" podem ser renderizados na mesma página, é possível atribuir a cada botão uma string exclusiva. A mesma string seria retornada com o token de ID para que você possa identificar 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"

Tipo de dados: credencial

Quando a função native_callback é invocada, um objeto Credential é transmitido como o 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 sai do seu site, é necessário chamar 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 a seguir:

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 de gerenciamento de credenciais integrada do navegador. Portanto, ele só pode ser usado 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 a solicitação 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 abaixo do método:

google.accounts.id.cancel()

O exemplo de código abaixo 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 de 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 no 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 concessão de OAuth usada para compartilhar o token de ID do usuário especificado. Confira o snippet de código a seguir 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 de credencial.
callback	função	Tratador RevocationResponse opcional.

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

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

Importante: chamar esse método revoga todos os escopos do OAuth 2.0 concedidos anteriormente pela biblioteca de cliente do recurso "Fazer login com o Google".

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	Esse campo pode conter uma mensagem de resposta de erro detalhada.

bem-sucedida

Esse campo é um valor booleano definido como verdadeiro se a chamada de método de revogação tiver sido 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.