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:

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:

color_scheme

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

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

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:

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:

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:

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:

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:

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:

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:

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:

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

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:

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:

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

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:

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

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.

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:

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.

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.

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.

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:

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:

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.

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:

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:

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:

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:

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:

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

Tipo
standard
icon

tema

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

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

Tema
outline
filled_blue
filled_black

tamanho

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

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

Tamanho
large
medium
small

texto

O texto do botão. O valor padrão é signin_with. Não há 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:

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

Texto
signin_with
signup_with
continue_with
signin

forma

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

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

Forma
rectangular
pill
circle
square

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:

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

logo_alignment
left
center

largura

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

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

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:

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 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:

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)

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:

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.