Esta página foi traduzida pela API Cloud Translation.

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

Esta página de referência descreve a API JavaScript Fazer login com o Google, usada para mostrar o botão "Fazer login com o Google" ou o aviso de um toque em 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:

google.accounts.id.initialize(IdConfiguration)

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

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

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

Você só precisa chamar o método google.accounts.id.initialize uma vez, mesmo se usar vários módulos (como o recurso "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 na ú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.

Tipo de dados: IdConfiguration

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

Campo
`client_id`	O ID do cliente do seu aplicativo
`color_scheme`	O esquema de cores aplicado à solicitação do toque único.
`auto_select`	Ativa a seleção automática.
`callback`	A função JavaScript que processa tokens de ID. O modo de UX do botão `popup` do Google One Tap e Fazer login com o Google usa esse atributo.
`login_uri`	O URL do seu endpoint de login. O botão Fazer login com o Google no modo `redirect` de UX 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 contêiner do pedido com um toque.
`nonce`	Uma string aleatória para tokens de ID
`context`	O título e as palavras no comando do login com um toque
`state_cookie_domain`	Se você precisar chamar o One Tap no domínio principal e nos subdomínios dele, transmita o domínio principal para esse campo para que um único cookie compartilhado seja usado.
`ux_mode`	O 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 é executado no modo de iframe intermediário se este campo estiver presente.
`intermediate_iframe_close_callback`	Substitui o comportamento padrão do iframe intermediário quando os usuários fecham manualmente o recurso "Um toque".
`itp_support`	Ativa a UX de um toque atualizada em navegadores ITP.
`login_hint`	Pule a seleção de conta fornecendo uma dica de usuário.
`hd`	Limitar a seleção de contas por domínio.
`use_fedcm_for_prompt`	Permita que o navegador controle os prompts de login do usuário e medie o fluxo de login entre seu site e o Google.
`use_fedcm_for_button`	Esse campo determina se a UX do botão FedCM deve ser usada no Chrome (computador M125+ e Android M128+). O padrão é `false`.
`button_auto_select`	Indica se a opção seleção automática está ativada para o fluxo de botões da FedCM. Se ativado, os usuários recorrentes com uma sessão ativa do Google farão 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"`

color_scheme

Esse campo é o esquema de cores aplicado à solicitação do recurso "Um toque". Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
string	Opcional. O padrão é o esquema de cores padrão do sistema dos usuários.	`color_scheme: "dark"`

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

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

auto_select

Esse campo determina se um token de ID é retornado automaticamente sem 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 da solicitação de um toque ou da janela pop-up. Esse atributo é obrigatório se o Google One Tap ou o modo de UX do botão Fazer login com o Google popup for usado. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
função	Obrigatório para o recurso "Um toque" e o modo de UX `popup`.	`callback: handleResponse`

login_uri

Esse atributo é o URI do seu endpoint de login.

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

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

A resposta de 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 um parâmetro credential com um valor de token de ID no corpo.

native_callback

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

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

cancel_on_tap_outside

Esse campo define se a solicitação do One Tap será cancelada se um usuário clicar fora da solicitação. O valor padrão é true. É possível desativar essa opção definindo 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 do DOM do elemento de contêiner. Se não estiver definido, o prompt do One Tap 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'`

valor de uso único

Este 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 comprimento do nonce é limitado ao tamanho máximo do JWT compatível com 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 na solicitação com um toque. Não tem efeito em navegadores ITP. O valor padrão é signin.

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:

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 principal e nos subdomínios dele, transmita o domínio principal 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 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 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`	Realiza o fluxo de UX de login em uma janela pop-up.
`redirect`	Realiza o fluxo de UX de login por um redirecionamento de página inteira.

allowed_parent_origin

As origens que podem incorporar o iframe intermediário. O One Tap é executado no modo de iframe intermediário se este 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 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, login.news.example.com). Ao usar caracteres curinga, lembre-se do seguinte:

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 porque "https://.example.com" corresponde a example.com e todos os subdomínios dele. Use uma lista separada por vírgulas para representar dois domínios diferentes. Por exemplo, "https://example1.com,https://.example2.com" corresponde aos domínios example1.com, example2.com e aos subdomínios de example2.com.
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 do modo de iframe intermediário do One Tap vai falhar e parar.

intermediate_iframe_close_callback

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

O campo intermediate_iframe_close_callback só entra em vigor no modo de iframe intermediário. Ele afeta apenas o iframe intermediário, e não o iframe do One Tap. A interface de um toque é removida antes da invocação do callback.

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

itp_support

Esse campo determina se a experiência do usuário do One Tap atualizada deve ser ativada em navegadores que oferecem suporte à Prevenção Inteligente de Rastreamento (ITP, na sigla em inglês). O valor padrão é false. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
booleano	Opcional	`itp_support: 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. Quando a operação é bem-sucedida, a seleção de contas é ignorada. Os valores aceitos são: um endereço de e-mail ou um valor do campo sub de um 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'`

hd

Quando um usuário tem várias contas e só deve fazer login com a conta do Workspace, use isso para dar uma dica de nome de domínio ao Google. Quando a operação é bem-sucedida, as contas de usuário mostradas durante a seleção 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 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 pedidos de login do usuário e medie 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 deve ser usada no Chrome (computador M125+ e Android M128+). O padrão é false. Consulte a tabela a seguir para mais informações:

Tipo	Obrigatório	Exemplo
booleano	Opcional	`use_fedcm_for_button: true`

button_auto_select

Esse campo determina se a opção seleção automática será ativada para o fluxo de botões da FedCM. Se ativada, os usuários recorrentes com uma sessão do Google ativa vão fazer login automaticamente, ignorando a solicitação do seletor de contas. O padrão é false. É necessário ativar explicitamente o login automático do botão durante o lançamento da ativação. 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 a solicitação de um toque ou o gerenciador de credenciais integrado ao navegador depois que o método initialize() é invocado. Confira o 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 ao status da sessão e às configurações do usuário no lado do Google, a interface do usuário de solicitação de um toque pode não ser exibida. Para receber notificações sobre o status da interface em diferentes momentos, transmita uma função.

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

Momento da exibição:isso ocorre depois que o método prompt() é chamado. A notificação contém um valor booleano para indicar se a interface é mostrada ou não.
Momento ignorado:isso ocorre quando o prompt de um toque é fechado por um cancelamento automático ou manual ou quando o Google não emite uma credencial, como quando a sessão selecionada fez 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 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 do One Tap e acionar um momento de dispensa.

Aviso: quando estiver em um momento dispensado, não tente usar 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 a seguir lista os métodos e as descrições do tipo de dados PromptMomentNotification:

Método
`isDisplayMoment()`	Essa notificação é para um momento de exibição? Observação : quando o FedCM está ativado, essa notificação não é disparada. Consulte a página Migrar para o FedCM para mais informações.
`isDisplayed()`	Essa 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 o FedCM para mais informações.
`isNotDisplayed()`	Essa notificação é para um momento de exibição, e a interface não aparece? Observação : quando o FedCM está ativado, essa notificação não é disparada. Consulte a página Migrar para o FedCM para mais informações.
`getNotDisplayedReason()`	O motivo detalhado para a interface não ser 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 é de um momento pulado?
`getSkippedReason()`	O motivo detalhado do momento ignorado. 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 é compatível. Consulte a página Migrar para o FedCM para mais informações.
`isDismissedMoment()`	Esta notificação é de um momento dispensado?
`getDismissedReason()`	O motivo detalhado da dispensa. 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`	O token de ID JWT codificado emitido pelo Google.
`select_by`	Como o usuário fez login.
`state`	Esse campo só é definido quando o usuário clica em um botão Fazer login com o Google para fazer login, e o atributo `state` do botão é especificado.

credencial

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

Quando decodificado, o JWT fica assim:

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 apenas o campo sub como identificador do usuário, já que ele é exclusivo entre todas as Contas do Google e nunca é reutilizado.

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

Casos em que o Google é autoridade:

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

Os usuários podem se registrar para ter 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 é autoritário, e é recomendável usar senha ou outros métodos de desafio para verificar o usuário. email_verfied também pode ser verdadeiro, já que o Google verificou o usuário quando a Conta do Google foi criada. No entanto, a propriedade da conta de e-mail de terceiros pode ter mudado desde então.

O campo exp mostra o prazo para verificar o token no lado do servidor. É de uma hora para o token de ID obtido com o recurso Fazer login com o Google. Você precisa 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 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 "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 app, o usuário precisa
- clicou no botão "Confirmar" para dar consentimento ao compartilhamento de credenciais, ou
- já tinha concedido consentimento e usado "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 aberta que já tinha dado consentimento para compartilhar credenciais. Válido apenas para navegadores que não têm suporte à FedCM.
`user`	Um usuário com uma sessão aberta que já tinha dado consentimento clicou no botão "Continuar como" do One Tap para compartilhar credenciais. Válido apenas para navegadores sem suporte à FedCM.
`fedcm`	Um usuário pressionou o botão "Continuar como" do One Tap para compartilhar credenciais usando o FedCM. Válido apenas para navegadores compatíveis com a FedCM.
`fedcm_auto`	Login automático de um usuário com uma sessão aberta que já tinha dado consentimento para compartilhar credenciais usando o FedCM One Tap. Válido apenas para navegadores compatíveis com a FedCM.
`user_1tap`	Um usuário com uma sessão aberta pressionou o botão "Continuar como" do One Tap para dar consentimento e compartilhar credenciais. Aplicável apenas ao Chrome v75 e versões mais recentes.
`user_2tap`	Um usuário sem uma sessão aberta pressionou o botão "Continuar como" do One Tap 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 que já tinha dado consentimento pressionou o recurso de um toque em navegadores ITP.
`itp_confirm`	Um usuário que não deu consentimento pressionou o One Tap em navegadores ITP e clicou no botão "Continuar" para dar consentimento e compartilhar credenciais.
`btn`	Um usuário que já tinha dado consentimento pressionou o botão "Fazer login com o Google" e selecionou uma Conta do Google em "Escolher uma conta" para compartilhar credenciais.
`btn_confirm`	Um usuário que não deu consentimento pressionou o botão "Fazer login com o Google" e o botão "Continuar" para dar consentimento e compartilhar credenciais.

estado

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

Como vários botões "Fazer login com o Google" podem ser renderizados na mesma página, você pode atribuir a cada botão uma string exclusiva. Portanto, use 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:

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

Tipo de dados: GsiButtonConfiguration

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

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

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ões disponíveis e as respectivas descrições:

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

tema

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

Tipo	Obrigatório	Exemplo
string	Opcional	`theme: "filled_blue"`

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

Tema
`outline`	Um tema de botão padrão.
`filled_blue`	Um tema de botão preenchido em 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 no texto dos botões de ícone com atributos text diferentes. A única exceção é quando o texto é lido para acessibilidade de 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".

forma

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

Tipo	Obrigatório	Exemplo
string	Opcional	`shape: "rectangular"`

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

Forma
`rectangular`	O botão retangular. Se usado para o tipo de botão `icon`, será o mesmo que `square`.
`pill`	O botão em formato de pílula. Se usado para o tipo de botão `icon`, será o mesmo que `circle`.
`circle`	O botão em formato de círculo. Se usado para o tipo de botão `standard`, será o mesmo que `pill`.
`square`	O botão em formato quadrado. Se usado para o tipo de botão `standard`, 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 padrão da Conta do Google ou do navegador dos usuários. Adicione o parâmetro hl e o código do idioma à diretiva src ao carregar a biblioteca. Por exemplo: gsi/client?hl=<iso-639-code>.

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

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 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 "Fazer login com o Google" podem ser renderizados na mesma página, você pode atribuir uma string exclusiva a cada botão. A mesma string seria retornada com o token de ID. Assim, você pode 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 parâmetro. A tabela a seguir lista os campos contidos no objeto:

Campo
`id`	Identifica o usuário.
`password`	A senha

Método: google.accounts.id.disableAutoSelect

Quando o usuário sair do seu site, chame o método google.accounts.id.disableAutoSelect para registrar o status nos cookies. Isso evita um loop sem fim na experiência do usuário. Confira o snippet de código a seguir do método:

google.accounts.id.disableAutoSelect()

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

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

Método: google.accounts.id.storeCredential

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

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 do One Tap se você remover o aviso do DOM da parte confiável. A operação de cancelamento é ignorada se uma credencial já estiver selecionada. Confira o exemplo de código a seguir 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

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

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

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

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

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

Método: google.accounts.id.revoke

O método google.accounts.id.revoke revoga a concessão do 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 ID exclusivo da Conta do Google do usuário. O ID é a propriedade `sub` do payload credential.
`callback`	função	Processador 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 é 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 detalhada de resposta de erro.

bem-sucedida

Esse campo é um valor booleano definido como "true" se a chamada do método "revoke" foi 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 chamada do método revoke falhar. Ele fica indefinido em caso de sucesso.

Referência da API JavaScript do Sign-In com o Google Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Método: google.accounts.id.initialize

Tipo de dados: IdConfiguration

client_id

color_scheme

auto_select

callback

login_uri

native_callback

cancel_on_tap_outside

prompt_parent_id

valor de uso único

contexto

state_cookie_domain

ux_mode

allowed_parent_origin

intermediate_iframe_close_callback

itp_support

login_hint

hd

use_fedcm_for_prompt

use_fedcm_for_button

button_auto_select

Método: google.accounts.id.prompt

Tipo de dados: PromptMomentNotification

Tipo de dados: CredentialResponse

credencial

select_by

estado

Método: google.accounts.id.renderButton

Tipo de dados: GsiButtonConfiguration

Tipos de atributo

tipo

tema

tamanho

texto

forma

logo_alignment

largura

localidade

click_listener

estado

Tipo de dados: credencial

Método: google.accounts.id.disableAutoSelect

Método: google.accounts.id.storeCredential

Método: google.accounts.id.cancel

Callback de carregamento da biblioteca: onGoogleLibraryLoad

Método: google.accounts.id.revoke

Tipo de dados: RevocationResponse

bem-sucedida

erro

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