Para fazer o usuário acessar, recupere as credenciais do gerenciador de senhas do navegador e use-as.
Para recuperar a credencial de um usuário use navigator.credentials.get()
, que
retorna uma promessa processada com um
objeto "credential" como argumento. O objeto "credential" obtido pode ser
PasswordCredential
ou
FederatedCredential
. Se não
houver informações de credencial, null
é retornado.
navigator.credentials.get({
password: true,
unmediated: false,
federated: {
providers: [
'https://account.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
if (cred) {
// Use provided credential to sign user in
}
});
navigator.credentials.get
Parâmetros
Parâmetros | |
---|---|
password
|
Booleano Defina como true para recuperar PasswordCredentials .
O padrão é false .
|
federated
|
Objeto Objeto que aceita provider ou protocol como
chaves que tem uma matriz de parâmetros. Objeto provider
aceita uma matriz de strings que identificam provedores. Atualmente nenhum
navegador implementa protocol .
|
unmediated
|
Booleano Defina como true para evitar exibir a IU do seletor de conta.
|
Obter uma credencial
Obtenha uma credencial automaticamente
Para fazer o usuário efetuar login automaticamente, solicite um objeto "credential" com
unmediated: true
assim que ele chegar ao seu site. Por exemplo:
navigator.credentials.get({ password: true, unmediated: true, // request a credential without user mediation federated: { providers: [ 'https://account.google.com', 'https://www.facebook.com' ] } })

Essa solicitação é processada imediatamente com um objeto "credential" e não exibirá um seletor de conta. Quando o navegador obtém as informações de credencial, uma notificação aparece:
Obtenha uma credencial pelo seletor de conta

Se um usuário solicitar mediação ou tiver diversas contas, use o seletor de contas para deixar o usuário fazer login, ignorando o formulário de login comum.
O seletor de conta normalmente é invocado quando o usuário toca no botão "Acessar" (ou "Fazer login"). O usuário pode selecionar uma conta para acessar, por exemplo:
Para ativar o seletor de conta,
defina a propriedade unmediated
como false
:
navigator.credentials.get({ password: true, unmediated: false, // request a credential with user mediation federated: { providers: [ 'https://account.google.com', 'https://www.facebook.com' ] } });
Quando o usuário selecionar a conta que quer usar, a promessa é processada
com um PasswordCredential
ou FederatedCredential
, dependendo da
seleção. Em seguida, determine o tipo de credencial
e autentique o usuário com a credencial fornecida.
Se o usuário cancelar o seletor de conta ou não houver credenciais armazenadas,
a promessa é processada com um valor undefined
. Nesse caso, volte
à experiência do formulário de acesso.
Determine o tipo de credencial
Quando navigator.credentials.get()
for processado, retornará
undefined
ou um objeto "Credential". Para determinar se ele é uma
PasswordCredential
ou uma FederatedCredential
, basta dar uma olhada na propriedade
.type
do objeto, que será password
ou
federated
.
SE o .type
for federated
, a propriedade .provider
será uma string que
representa o provedor de identidade.
Por exemplo:
if (cred) {
switch (cred.type) {
case 'password':
// authenticate with a server
break;
case 'federated':
switch (cred.provider) {
case 'https://accounts.google.com':
// run google identity authentication flow
break;
case 'https://www.facebook.com':
// run facebook identity authentication flow
break;
}
break;
}
} else {
// auto sign-in not possible
}
No caso de um valor undefined
, continue com o usuário em estado de logoff.
Um valor undefined
é passado quando:
- O usuário não autoriza o recurso de login automático (um por instância do navegador).
- O usuário não tem credenciais ou mais de dois objetos "credential" armazenados na origem.
- O usuário solicita mediação à origem.
Autenticar o usuário
Autentique com um nome de usuário e senha
Para autenticar o usuário no seu servidor, use POST para publicar a
PasswordCredential
fornecida no servidor usando fetch()
.
Quando publicada com POST, fetch
se converterá automaticamente no objeto PasswordCredential
para um objeto FormData
codificado como multipart/form-data
:
------WebKitFormBoundaryOkstjzGAv8zab97W
Content-Disposition: form-data; name="id"
chromedemojp@gmail.com
------WebKitFormBoundaryOkstjzGAv8zab97W
Content-Disposition: form-data; name="password"
testtest
------WebKitFormBoundaryOkstjzGAv8zab97W--
Observação: Não é possível usar XMLHttpRequest
para publicar a PasswordCredential
no servidor usando POST.
Parâmetros de PasswordCredential
Um objeto PasswordCredential
obtido contém os seguintes parâmetros:
Parâmetros | |
---|---|
id
|
String String do identificador do usuário. |
password
|
String Senha "opaca" que não pode ser obtida usando JavaScript. |
name
|
String String do nome do usuário. |
iconURL
|
String String do URL da imagem do ícone do usuário. |
Alterar parâmetros
Em alguns casos, pode ser necessário adicionais mais dados ao POST de autenticação.
Altere as chaves de parâmetro atribuindo uma string a .idName
ou .passwordName
.
Você também pode adicionar parâmetros extras, como um token contra falsificação de solicitação entre sites (CSRF, na sigla em inglês)
atribuindo .additionalData
a FormData
e anexando
valores-chave a ele.
Quando obtiver o objeto "credential":
if (cred) {
if (cred.type == 'password') {
// Use `email` instead of `id` for the id
cred.idName = 'email';
// Append CSRF Token
var csrf_token = document.querySelector('#csrf_token').value;
var form = new FormData();
form.append('csrf_token', csrf_token);
// Append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
}
}
Você pode fazer algo similar atribuindo um objeto URLSearchParams
em vez de um
FormData
a .additionalData
. Nesse caso, todo o objeto "credential"
será codificado usando application/x-www-form-urlencoded
.
Autentique com um provedor de identidade
Para autenticar o usuário com um provedor de identidade, basta usar o
fluxo de autenticação específico com a FederatedCredential
.
Por exemplo, se o provedor for Google, use a biblioteca JavaScript do Google Sign-In:
// Instantiate an auth object
var auth2 = gapi.auth2.getAuthInstance();
// Is this user already signed in?
if (auth2.isSignedIn.get()) {
var googleUser = auth2.currentUser.get();
// Same user as in the credential object?
if (googleUser.getBasicProfile().getEmail() === id) {
// Continue with the signed-in user.
return Promise.resolve(googleUser);
}
}
// Otherwise, run a new authentication flow.
return auth2.signIn({
login_hint: id || ''
});
O Google Sign-In gera um id token como prova da autenticação, que você envia ao servidor para criar uma sessão.
Para ver outros provedores de identidade, consulte a documentação relacionada:
Fazer logout
Quando um usuário faz logout no seu site, é sua responsabilidade garantir
que o usuário não faça login automaticamente quando acessar o seu site novamente. Para desativar
o login automático, chame
navigator.credentials.requireUserMediation()
:
// After a user signing out...
navigator.credentials.requireUserMediation();
Em seguida, se navigator.credentials.get()
for chamado com unmediated: true
,
retornará undefined
e o usuário não fará login. Isso só é
lembrado pela instância atual do navegador desta origem.
Para reativar o login automático, o usuário pode escolher fazer login intencionalmente selecionando a conta que deseja acessar no seletor de conta. Depois disso, o usuário passa a sempre fazer login automaticamente, até fazer logout explicitamente.