Esta página de referência descreve a API Sign-In JavaScript. É possível usar essa API para exibir 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 de 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 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 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, as configurações são redefinidas sempre que você chama o método google.accounts.id.initialize
, e todos os métodos subsequentes na mesma página da Web usam as novas configurações imediatamente.
Tipo de dados: IdConfiguration
A tabela abaixo 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 processa 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 botão "Fazer login com o Google"
redirect 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 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 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 têm permissão para incorporar o iframe intermediário. O recurso de um toque será executado no modo de iframe intermediário se esse campo estiver presente. |
intermediate_iframe_close_callback |
Modifica o comportamento padrão de iframe intermediário quando os usuários fecham manualmente um toque. |
itp_support |
Ativa a UX de um toque atualizada em navegadores ITP. |
login_hint |
Forneça uma dica ao usuário para pular a seleção de conta. |
hd |
Limitar 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, encontrado e criado no Google Developers Console. Veja mais informações na tabela a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Sim | client_id: "CLIENT_ID.apps.googleusercontent.com" |
seleção_automática
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
. Veja mais informações na tabela
abaixo:
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 modo de UX
popup
ou o botão "Fazer login com o Google" do Google One for usado. Consulte a tabela a seguir para mais informações:
Tipo | Obrigatório | Exemplo |
---|---|---|
função | Obrigatório para um toque e o modo UX popup |
callback: handleResponse |
uri_de_login
Esse atributo é o URI do 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 de APIs. 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 redirecionamento de UX é usado.
Veja mais informações na tabela a seguir:
Tipo | Opcional | Exemplo |
---|---|---|
URL | O padrão é o URI da página atual ou o valor que você especificar. Usado apenas quando ux_mode: "redirect" está definido. |
login_uri="https://www.example.com/login" |
Seu endpoint de login precisa processar solicitações POST que contenham uma
chave credential
com um
valor de token de ID no corpo.
Este é 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
nativo de chamada de retorno
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 |
cancelar_ao_toque_fora
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á-la se definir
o valor como false
. Veja mais informações na tabela a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
booleano | Opcional | cancel_on_tap_outside: false |
prompt_pai_id
Esse atributo define o ID DOM do elemento contêiner. Se ela não estiver definida, a solicitação de um toque será exibida no canto superior direito da janela. Consulte a tabela a seguir para mais informações:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | prompt_parent_id: 'parent_id' |
valor de uso único
Esse campo é uma string aleatória usada pelo token de ID para evitar ataques repetidos. Veja mais informações na tabela a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | nonce: "biaqbm70g23" |
O valor de uso único é limitado ao tamanho máximo de JWT compatível com seu ambiente e às restrições de tamanho HTTP do navegador e do servidor.
contexto
Esse campo muda o texto do título e as mensagens na solicitação de um toque. Veja mais informações na tabela a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | context: "use" |
A tabela a seguir lista os contextos disponíveis e as descrições deles:
Contexto | |
---|---|
signin |
"Fazer login com o Google" |
signup |
"Inscreva-se com o Google" |
use |
"Usar com o Google" |
estado_cookie_domain
Se você precisar exibir um toque no domínio pai e nos subdomínios dele, transmita o domínio pai para este campo para que um único cookie de estado compartilhado seja usado. Veja mais informações na tabela a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | state_cookie_domain: "example.com" |
modo_ux
Use esse campo para definir o fluxo de UX do 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 da UX de login por um redirecionamento de página completa. |
allow_parent_origin
As origens que têm permissão para incorporar o iframe intermediário. O recurso de um toque será 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 string | 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 do domínio. | ["https://news.example.com", "https://local.example.com"] |
Prefixos com caracteres curinga também são compatíveis. 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
). Considere o seguinte ao usar caracteres curinga:
- As strings de padrão não podem ser compostas apenas de um caractere curinga e um domínio
de nível superior. Por exemplo,
https://*.com
ehttps://*.co.uk
são inválidos. Conforme mencionado acima,"https://*.example.com"
corresponde aexample.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íniosexample1.com
,example2.com
e subdomínios deexample2.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
Substitui o comportamento padrão de iframe intermediário quando os usuários fecham manualmente o One Toque tocando no botão "X" na IU 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 de iframe intermediário. Ela afeta apenas o iframe intermediário, não o iframe com um toque. A IU de um toque é removida antes que o callback seja invocado.
Tipo | Obrigatório | Exemplo |
---|---|---|
função | Opcional | intermediate_iframe_close_callback: logBeforeClose |
suporte_ITp
Esse campo determina se a
UX com um toque atualizada
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
. Veja mais informações na tabela
abaixo:
Tipo | Obrigatório | Exemplo |
---|---|---|
booleano | Opcional | itp_support: true |
dica_de_login
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 do 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 do token de ID. |
Opcional | login_hint: 'elisa.beckett@gmail.com' |
alta definição
Se 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. Se a operação for bem-sucedida, as contas de usuário exibidas durante a seleção serã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: '*' |
usar_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".
Tipo | Obrigatório | Exemplo |
---|---|---|
booleano | 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 depois que o método initialize()
é 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 durante o carregamento da página. Devido ao status da sessão e às configurações do usuário no Google, a IU de solicitação com um toque pode não ser exibida. Para receber notificações sobre o status da IU em diferentes momentos, transmita uma
função para receber notificações de status da IU.
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 IU será exibida ou não. Momento ignorado:ocorre quando a solicitação de um toque é encerrada por um cancelamento automático ou manual ou quando o Google não emite uma credencial, como quando a sessão selecionada é desconectada do Google.
Nesses casos, recomendamos que você continue com os próximos provedores de identidade, se houver.
Momento dispensado:ocorre quando o Google recupera uma credencial ou um usuário quer interromper o fluxo de recuperação. Por exemplo, quando o usuário começar 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.
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? |
isDisplayed() |
A notificação é para um momento de exibição, e a IU é mostrada? |
isNotDisplayed() |
Essa notificação é para um momento de exibição e a IU não é mostrada? |
getNotDisplayedReason() |
O motivo detalhado por que a IU não é exibida. Veja a seguir os valores possíveis:
|
isSkippedMoment() |
Esta notificação é para um momento ignorado? |
getSkippedReason() |
O motivo detalhado do momento ignorado. Veja a seguir os valores possíveis:
|
isDismissedMoment() |
A notificação é para um momento dispensado? |
getDismissedReason() |
O motivo detalhado da dispensa. Veja a seguir os valores possíveis:
|
getMomentType() |
Retorne uma string para o tipo de momento. Veja a seguir os valores possíveis:
|
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 da credencial:
Campo | |
---|---|
credential |
Esse campo é o token de ID retornado. |
select_by |
Esse campo define como a credencial é selecionada. |
credencial
Esse campo é o token de ID como uma string JSON Web Token (JWT) codificada em base64.
Quando decodificado, o JWT é semelhante ao exemplo a seguir:
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
contém um identificador globalmente exclusivo para a Conta do Google.
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 ehd
está definido, essa é 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 do Fazer login com o Google. É necessário 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.
selecionar_por
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 com um toque ou o botão "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
- pressionaram o botão de confirmação para autorizar o compartilhamento de credenciais;
- já deu consentimento e usou o recurso "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á havia dado consentimento para compartilhar credenciais. |
user |
Um usuário com uma sessão já existente que já deu consentimento pressionou o botão "Continuar como" com um toque para compartilhar as credenciais. |
user_1tap |
Um usuário com uma sessão pressionou o botão "Continuar como" com um toque 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 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á deu 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 sem uma sessão que já deu 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 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. |
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 abaixo 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 preto preenchido. |
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 |
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 vai ser renderizado. |
click_listener |
Se definida, essa função vai ser chamada quando o usuário clicar no botão "Fazer login com o Google". |
Tipos de atributo
As seções abaixo contêm detalhes sobre o tipo de cada atributo e um exemplo.
digitar
O tipo de botão. O valor padrão é standard
.
Veja 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 |
![]() ![]() |
icon |
![]() |
tema
O tema do botão. O valor padrão é outline
. Consulte a tabela a seguir para
mais informações:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | theme: "filled_blue" |
A tabela a seguir lista os temas disponíveis e suas descrições:
Tema | |
---|---|
outline |
![]() ![]() ![]() |
filled_blue |
![]() ![]() ![]() |
filled_black |
![]() ![]() ![]() |
tamanho
O tamanho do botão. O valor padrão é large
. Consulte a tabela a seguir para
mais informações:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | size: "small" |
A tabela a seguir lista os tamanhos de botão disponíveis e as descrições deles:
Tamanho | |
---|---|
large |
![]() ![]() ![]() |
medium |
![]() ![]() |
small |
![]() ![]() |
texto
O texto do botão. O valor padrão é signin_with
. Não há 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 fins de acessibilidade na tela.
Veja mais informações na tabela a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | text: "signup_with" |
A tabela a seguir lista os textos dos botões disponíveis e as respectivas descrições:
Texto | |
---|---|
signin_with |
![]() ![]() |
signup_with |
![]() ![]() |
continue_with |
![]() ![]() |
signin |
![]() ![]() |
shape
Forma do botão. O valor padrão é rectangular
. Veja mais informações na tabela
a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | shape: "rectangular" |
A tabela a seguir lista as formas dos botões disponíveis e as respectivas descrições:
Forma | |
---|---|
rectangular |
![]() ![]() ![]() icon , é o mesmo que square .
|
pill |
![]() ![]() ![]() icon , é o mesmo que circle .
|
circle |
![]() ![]() ![]() standard , é o mesmo que pill .
|
square |
![]() ![]() ![]() standard , é o mesmo que rectangular .
|
Alinhamento do logotipo
O alinhamento do logotipo do Google. O valor padrão é left
. Esse atributo
só se aplica ao tipo de botão standard
. Veja mais informações na tabela
abaixo:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | logo_alignment: "center" |
A tabela abaixo lista os alinhamentos disponíveis e as descrições deles:
Alinhamento do logotipo | |
---|---|
left |
![]() |
center |
![]() |
largura
A largura mínima do botão, em pixels. A largura máxima é de 400 pixels.
Veja mais informações na tabela a seguir:
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 do navegador ou da Conta do Google 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, diferentes usuários podem ver versões distintas dos botões localizados e possivelmente com tamanhos distintos.
Veja mais informações na tabela a seguir:
Tipo | Obrigatório | Exemplo |
---|---|---|
string | Opcional | locale: "zh_CN" |
listener de cliques
É possível definir uma função JavaScript a 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 button button... é registrada no console quando o botão "Fazer login com o Google" é clicado.
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, chame o método google.accounts.id.disableAutoSelect
para registrar o status em 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 abaixo 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 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 abaixo 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 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 da biblioteca: onGoogleLibraryLoad
É possível registrar um callback onGoogleLibraryLoad
. Ele é notificado 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 permissão OAuth usada para compartilhar o token de ID com o 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 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 da 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 "true" se a chamada do método de revogação for bem-sucedida ou "false" em caso de falha.
erro
Esse campo é um valor de string e contém uma mensagem de erro detalhada. Se a chamada do método de revogação falhar, ele será indefinido em caso de sucesso.