Utenti che hanno eseguito l'accesso

Meggin Kearney
Meggin Kearney

Per accedere agli utenti, recupera le credenziali dal gestore delle password del browser e utilizzale per accedere automaticamente agli utenti. Per gli utenti con più account, consenti loro di selezionare l'account con un solo tocco utilizzando il selettore account.

Accesso automatico

L'accesso automatico può avvenire ovunque sul tuo sito web, non solo nella parte superiore della pagina, ma anche in altre pagine di prodotto. È utile quando gli utenti raggiungono varie pagine del tuo sito web, tramite un motore di ricerca.

Per attivare l'accesso automatico:

  1. Recupera informazioni sulle credenziali.
  2. Autenticare l'utente.
  3. Aggiorna l'interfaccia utente o vai alla pagina personalizzata.

Recupera informazioni sulle credenziali

Supporto dei browser

  • 51
  • 18
  • 60
  • 13

Fonte

Per ottenere informazioni sulle credenziali, richiama navigator.credentials.get(). Specifica il tipo di credenziali da richiedere assegnando un valore password o federated.

Usa sempre mediation: 'silent' per gli accessi automatici, per poter ignorare facilmente la procedura se l'utente:

  • Nessuna credenziale memorizzata.
  • Ha più credenziali archiviate.
  • Non ha eseguito l'accesso.

Prima di ottenere una credenziale, non dimenticare di controllare se l'utente ha già eseguito l'accesso:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

La promessa restituita da navigator.credentials.get() si risolve con un oggetto credenziali o con null. Per determinare se si tratta di un valore PasswordCredential o FederatedCredential, controlla la proprietà .type dell'oggetto, che sarà password o federated.

Se .type è federated, la proprietà .provider è una stringa che rappresenta il provider di identità.

Autentica utente

Una volta ottenuta la credenziale, esegui un flusso di autenticazione in base al tipo di credenziale, password o federated:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

Quando la promessa si risolve, controlla se hai ricevuto un oggetto credenziali. In caso contrario, significa che non è stato possibile accedere automaticamente. Ignora senza notifiche la procedura di accesso automatico.

Aggiorna UI

Se l'autenticazione ha esito positivo, aggiorna l'interfaccia utente o inoltra l'utente alla pagina personalizzata:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

Non dimenticare di mostrare il messaggio di errore dell'autenticazione

Per evitare confusione, gli utenti dovrebbero visualizzare un avviso blu con il messaggio "Accesso" al momento del recupero dell'oggetto credenziali:

Toast blu che mostra che l'utente sta eseguendo l'accesso.

Un suggerimento importante: se riesci a ottenere un oggetto credenziali, ma non a autenticare l'utente, dovresti visualizzare un messaggio di errore:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

Esempio di codice completo

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

Accesso tramite il selettore account

Se un utente richiede la mediazione o ha più account, utilizza il selettore account per consentirgli di accedere, ignorando il modulo di accesso ordinario, ad esempio:

Selettore Account Google che mostra più account.

I passaggi per accedere tramite il selettore account sono gli stessi dell'accesso automatico, con una chiamata aggiuntiva per mostrare il selettore account durante l'acquisizione delle informazioni sulle credenziali:

  1. Recupera le informazioni sulle credenziali e mostra il Selettore account.
  2. Autenticare l'utente.
  3. Aggiorna l'interfaccia utente o passa a una pagina personalizzata.

Ottenere informazioni sulle credenziali e mostrare il Selettore account

Mostrare un selettore account in risposta a un'azione definita dell'utente, ad esempio quando l'utente tocca il pulsante "Accedi". Chiama il numero navigator.credentials.get() e aggiungi mediation: 'optional' o mediation: 'required' per visualizzare il selettore account.

Quando mediation è required, all'utente viene sempre mostrato un selettore account per accedere. Questa opzione consente agli utenti con più account di passare facilmente da un account all'altro. Quando mediation è optional, all'utente viene mostrato esplicitamente un selettore account per accedere dopo una chiamata navigator.credentials.preventSilentAccess(). In genere questo garantisce che non venga eseguito l'accesso automatico dopo che l'utente sceglie di uscire o di annullare la registrazione.

Esempio che mostra mediation: 'optional':

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

Una volta che l'utente seleziona un account, la promessa si risolve con la credenziale. Se l'utente annulla il selettore account o se non sono archiviate credenziali, la promessa si risolve con null. In questo caso, torna all'esperienza con il modulo di accesso.

Non dimenticare di ricorrere al modulo di accesso

Dovresti utilizzare un modulo di accesso per uno dei seguenti motivi:

  • Nessuna credenziale memorizzata.
  • L'utente ha ignorato il selettore account senza selezionare un account.
  • L'API non è disponibile.
    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

Esempio di codice completo

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

Accesso federato

L'accesso federato consente agli utenti di accedere con un tocco e senza dover ricordare ulteriori dati di accesso per il tuo sito web.

Per implementare l'accesso federato:

  1. Autenticare l'utente con un'identità di terze parti.
  2. Archivia le informazioni sull'identità.
  3. Aggiorna l'interfaccia utente o passa a una pagina personalizzata (come per l'accesso automatico).

Autentica l'utente con un'identità di terze parti

Quando un utente tocca un pulsante di accesso federato, esegui il flusso di autenticazione del provider di identità specifico con FederatedCredential.

Supporto dei browser

  • 51
  • 79
  • x
  • x

Fonte

Ad esempio, se il provider è Google, utilizza la libreria JavaScript di Accedi con Google:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // 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() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

Accedi con Google genera un token ID come prova di autenticazione.

In generale, gli accessi federati si basano su protocolli standard come OpenID Connect o OAuth. Per scoprire come eseguire l'autenticazione con gli account federati, consulta la documentazione dei rispettivi provider di identità federati. Esempi popolari includono:

Archivia le informazioni sull'identità

Al termine dell'autenticazione, puoi archiviare le informazioni sull'identità. Le informazioni che archivierai qui sono il id del provider di identità e una stringa del provider che rappresenta il provider di identità (name e iconURL sono facoltativi). Scopri di più su queste informazioni nella specifica di Gestione delle credenziali.

Per archiviare i dettagli dell'account federato, crea un'istanza di un nuovo oggetto FederatedCredential con l'identificatore dell'utente e l'identificatore del provider. Quindi chiama navigator.credentials.store() per archiviare le informazioni sull'identità.

Dopo la corretta federazione, crea una FederatedCredential in modo sincrono o asincrono:

Esempio di approccio sincrono:

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

Esempio di approccio asincrono:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

Quindi memorizza l'oggetto credenziali:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

Esci

Disconnettiti dagli utenti quando tocca il pulsante di disconnessione. Prima chiudi la sessione, poi disattiva l'accesso automatico per le visite future. La modalità di chiusura delle sessioni dipende da te.

Disattivare l'accesso automatico per le visite future

Chiamata navigator.credentials.preventSilentAccess():

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

In questo modo l'accesso automatico non verrà eseguito fino alla successiva abilitazione dell'accesso da parte dell'utente. Per riprendere l'accesso automatico, un utente può scegliere di accedere intenzionalmente scegliendo l'account con cui vuole accedere dal selettore account. In questo modo, l'utente accederà sempre di nuovo fino a quando non uscirà esplicitamente.

Feedback