A suspensão de uso de cookies de terceiros do Chrome começa no primeiro trimestre de 2024. Siga o guia de migração para analisar possíveis alterações e evitar impactos negativos para o login do usuário em seu website.

Esta página foi traduzida pela API Cloud Translation.

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 essa 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 cliente Fazer login com o Google com base no objeto de configuração. Confira o exemplo de código do método 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 uma instância de cliente do 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 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, somente as configurações na ú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.

Tipo de dados: IdConfiguration

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

Campo
`client_id`	ID do cliente do seu aplicativo
`auto_select`	Ativa a seleção automática.
`callback`	A função JavaScript que lida com tokens de ID. O modo de UX do Google One e o botão "Fazer login com o Google" `popup` 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 processa 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 do contêiner da solicitação de um toque
`nonce`	String aleatória para tokens de ID
`context`	O título e as palavras no comando de um toque
`state_cookie_domain`	Se você precisar chamar um toque 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 têm permissão para incorporar o iframe intermediário. Um toque será executado no modo iframe intermediário se esse campo estiver presente.
`intermediate_iframe_close_callback`	Modifica o comportamento padrão do iframe intermediário quando o usuário fecha manualmente o recurso "Um toque".
`itp_support`	Ativa a UX atualizada com um toque em navegadores ITP.
`login_hint`	Pular a seleção da conta com uma dica do usuário.
`hd`	Limite a seleção de contas por domínio.
`use_fedcm_for_prompt`	Permita que o navegador controle as solicitações de login do usuário e media o 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

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 o app. O valor padrão é false. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
boolean	Opcional	`auto_select: true`

callback

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

Tipo	Obrigatório	Exemplo
função	Obrigatório para o modo 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 configurado no Console do Google Cloud. Além disso, ele precisa estar em conformidade com nossas regras de validação do URI de redirecionamento.

Esse atributo pode ser omitido se a página atual for sua página de login. Nesse caso, a credencial é postada nela 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 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"`

O endpoint de login precisa processar solicitações POST que contenham uma chave credential com um valor de 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

Esse campo é o nome da função JavaScript que processa a credencial de senha 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 da solicitação. O valor padrão é true. Você poderá desativá-lo se definir o valor como false. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
boolean	Opcional	`cancel_on_tap_outside: false`

prompt_parent_id

Esse atributo define o ID DOM do elemento do contêiner. Se ela não estiver definida, a solicitação de um toque vai aparecer 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'`

nonce

Esse campo é uma string aleatória usada pelo token de ID para evitar ataques repetidos. 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 às restrições de tamanho HTTP do navegador e do servidor individual.

contexto

Esse campo muda o texto do título e das mensagens na solicitação de um toque. Consulte a 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 descrições deles:

O contexto
`signin`	"Fazer login com o Google"
`signup`	"Inscreva-se com o Google"
`use`	"Usar com o Google"

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 "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 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. O recurso "um toque" será executado no modo 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 valores 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 com 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 e login.news.example.com). O que ter em mente 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. Como mencionado acima, "https://.example.com" corresponde a example.com e os subdomínios dele. Também é possível usar uma matriz para representar dois domínios diferentes. Por exemplo, ["https://example1.com", "https://.example2.com"] corresponde aos 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. Portanto, "*.example.com" é considerado inválido.

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

intermediate_iframe_close_callback

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

O campo intermediate_iframe_close_callback entra em vigor apenas no modo iframe intermediário. Ele afeta apenas o iframe intermediário, e não o iframe com 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 atualizada com um toque precisa ser ativada em navegadores compatíveis com a 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
boolean	Opcional	`itp_support: true`

login_hint

Se o aplicativo sabe com antecedência qual usuário precisa estar conectado, ele pode fornecer uma dica de login ao Google. Quando bem-sucedida, a seleção da conta é ignorada. Os valores aceitos são: um endereço de e-mail ou um valor de campo sub do 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: 'elisa.beckett@gmail.com'`

alta definição‎‏‎‎‏‎

Quando um usuário tiver várias contas e só precisar fazer login com a conta do Workspace, use essa opção para fornecer uma dica de nome de domínio ao Google. Quando bem-sucedido, as contas de usuário exibidas durante a seleção da conta são limitadas ao domínio fornecido. Um valor curinga: * oferece apenas contas do Workspace ao usuário e exclui contas pessoais (user@gmail.com) durante a seleção 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

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

Tipo	Obrigatório	Exemplo
boolean	Opcional	`use_fedcm_for_prompt: true`

Método: google.accounts.id.prompt

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

 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 de solicitação com um toque pode não ser exibida. Para receber notificações sobre o status da interface para diferentes momentos, transmita uma função para receber notificações de status da interface.

As notificações são disparadas 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 vai ser mostrada ou não.
Momento ignorado:isso ocorre quando a solicitação de um toque é encerrada por um cancelamento automático, um cancelamento manual ou quando o Google não emite uma credencial, como quando a sessão selecionada saiu do Google.

Nesses casos, recomendamos seguir para os próximos provedores de identidade, se houver algum.
Momento dispensado:isso 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, você pode chamar o método google.accounts.id.cancel() para fechar a solicitação de um toque e acionar um momento dispensado.

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

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 abaixo lista os métodos e as descrições do tipo de dados PromptMomentNotification:

Método
`isDisplayMoment()`	A notificação é apenas para exibição? Observação : quando o FedCM está ativado, essa notificação não é disparada. Consulte a página Migrar para a FedCM para mais informações.
`isDisplayed()`	A notificação é para um momento de exibição e a interface é mostrada? Observação : quando o FedCM está ativado, essa notificação não é disparada. Consulte a página Migrar para a FedCM para mais informações.
`isNotDisplayed()`	A notificação é apenas para exibição, e a interface não é mostrada? Observação : quando o FedCM está ativado, essa notificação não é disparada. Consulte a página Migrar para a FedCM para mais informações.
`getNotDisplayedReason()`	O motivo detalhado para a interface não ser exibida. 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 o FedCM está ativado, esse método não é aceito. Consulte a página Migrar para a FedCM para mais informações.
`isSkippedMoment()`	A notificação é para um momento ignorado?
`getSkippedReason()`	O motivo detalhado do momento ignorado. Veja a seguir 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 a FedCM para mais informações.
`isDismissedMoment()`	A notificação é para um momento dispensado?
`getDismissedReason()`	O motivo detalhado da demissão. Veja a seguir os valores possíveis: `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	Retorne uma string para o tipo de momento. Veja a seguir os valores possíveis: `display` `skipped` `dismissed`

Tipo de dados: CredentialResponse

Quando a função callback é invocada, um objeto CredentialResponse é transmitido como o parâmetro. A tabela a seguir lista os campos contidos no objeto de resposta da 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

Este 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 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. Use o campo sub somente como identificador do usuário, porque ele é único entre todas as Contas do Google e nunca é reutilizado. Não use 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 hospeda e é autoritativo para um endereço de e-mail. Nos casos em que o Google é autoritário, o usuário é confirmado como proprietário legítimo da conta.

Casos em que o Google é autoritativo:

email tem um sufixo @gmail.com, esta é uma conta do Gmail.
email_verified é verdadeiro e hd está definido. Esta é 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 a 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. No entanto, a propriedade da conta de e-mail de terceiros pode ter mudado.

O campo exp mostra o prazo de validade para verificar o token no lado do servidor. Leva uma hora para o token de ID recebido pelo recurso Fazer login com o Google. É preciso verificar o token antes do prazo de validade. Não use exp para gerenciamento de sessões. Um token de ID expirado não significa que o usuário está desconectado. Seu aplicativo é responsável pelo gerenciamento de sessão 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 o estado da sessão e de consentimento é usado para definir o valor,

O usuário pressionou o botão de um toque ou "Fazer login com o Google" ou usou o processo de login automático sem toque.
Uma sessão existente foi encontrada ou o usuário selecionou e fez login em uma Conta do Google para estabelecer uma nova sessão.
Antes de compartilhar as credenciais do token de ID com seu aplicativo, o usuário
- pressionar o botão de confirmação para autorizar o compartilhamento de credenciais; ou
- já concedeu consentimento e usou a opção "Selecionar uma conta" para escolher uma Conta do Google.

O valor desse campo é definido como um desses tipos,

Valor	Descrição
`auto`	Login automático de um usuário com uma sessão atual que já havia dado permissão para compartilhar credenciais. Aplicável apenas a navegadores não compatíveis com o FedCM.
`user`	Um usuário com uma sessão atual que já havia concedido consentimento pressionou o botão "Continuar como" com um toque para compartilhar as credenciais. Aplicável apenas a navegadores não compatíveis com o FedCM.
`fedcm`	Um usuário pressionou o botão "Continuar como" com um toque para compartilhar credenciais usando o FedCM. Aplicável apenas aos navegadores compatíveis com a FedCM.
`fedcm_auto`	Login automático de um usuário com uma sessão atual que já havia autorizado o compartilhamento de credenciais usando um toque da FedCM. Aplicável apenas aos navegadores compatíveis com a FedCM.
`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 atual pressionou o botão "Continuar como" com 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. Aplicável a navegadores não baseados no Chromium.
`btn`	Um usuário com uma sessão 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 atual pressionou o botão "Fazer login com o Google" e o botão de confirmação para dar consentimento e compartilhar credenciais.
`btn_add_session`	Um usuário que não tinha uma sessão e que 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 atual pressionou primeiro o botão "Fazer login com o Google" para selecionar uma Conta do Google e, em seguida, pressionou o botão de confirmação para consentir e compartilhar credenciais.

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. O valor desse campo é o mesmo especificado 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, você pode usar o 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 a seguir:

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, "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 "Inscrever-se com o Google".
`shape`	A forma do botão. Por exemplo, retangular ou circular.
`logo_alignment`	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, essa função será chamada quando o botão "Fazer login com o Google" for clicado.
`state`	Se definida, essa string retorna com o token de ID.

Tipos de atributo

As seções abaixo contêm detalhes sobre o tipo de cada atributo e um 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 abaixo 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 suas descrições:

Tema
`outline`	Um tema de botão padrão.
`filled_blue`	Um tema de botão azul.
`filled_black`	Um tema de botão preenchido em preto.

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 para o texto dos botões de ícone 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 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".

shape

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

Formato
`rectangular`	O botão retangular. Se usado para o tipo de botão `icon`, será igual a `square`.
`pill`	O botão em forma de pílula. Se usado para o tipo de botão `icon`, será igual a `circle`.
`circle`	O botão em formato circular. Se usado para o tipo de botão `standard`, será igual a `pill`.
`square`	O botão quadrado. Se usado para o tipo de botão `standard`, será igual a `rectangular`.

logo_alignment

O alinhamento do logotipo do Google. O valor padrão é left. Esse 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 descrições deles:

logo_alignment
`left`	Alinha o logotipo do Google à esquerda.
`center`	Alinha o logotipo do Google ao centro.

width

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. Mostre o texto do botão usando a localidade especificada. Caso contrário, o padrão será 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 ela não for definida, a localidade padrão do navegador ou a preferência do usuário da sessão do Google vai ser usada. Portanto, usuários diferentes podem ver versões diferentes dos botões localizados e possivelmente com tamanhos diferentes.

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

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

click_listener

Você pode definir uma função JavaScript que será chamada quando o usuário clicar no botão "Fazer login com o Google" 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 Sign in with Google buttonclick... é registrada no console quando o botão "Fazer login com o Google" é clicado.

state

Opcional: 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. A mesma string retornaria com o token de ID para que você possa identificar em qual botão o usuário clicou para fazer login.

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

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

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 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 seguinte 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 de gerenciador de credenciais nativa do navegador. Portanto, ela só pode ser usada para armazenar uma credencial de senha. Confira o exemplo de código do método a seguir:

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 do método a seguir:

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 depois que a biblioteca JavaScript do 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 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 da credencial.
`callback`	função	Gerenciador RevocationResponse opcional.

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 é transmitido como o parâmetro. A tabela a seguir lista os campos contidos no objeto de resposta à revogação:

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

bem-sucedido

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

error

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