Obter credenciais

Developer Advocate in Tokyo

Meggin is a Tech Writer

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'
    ]
  }
})

Notificação para usuário de login automático

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.