Accesso degli utenti

Eiji Kitamura

Meggin Kearney

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

Accesso automatico

L'accesso automatico può avvenire in qualsiasi punto del tuo sito web, non solo nella pagina principale, ma anche in altre pagine foglia. Questo è utile quando gli utenti raggiungono varie pagine del tuo sito web tramite un motore di ricerca.

Per attivare l'accesso automatico:

1. Ottieni informazioni sulle credenziali.
2. Autentica l'utente.
3. Aggiorna la UI o vai alla pagina personalizzata.

Ottieni informazioni sulle credenziali

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

Utilizza sempre mediation: 'silent' per gli accessi automatici, in modo da poter ignorare facilmente la procedura se l'utente:

• Non contiene credenziali archiviate.
• Sono state memorizzate più credenziali.
• 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() viene risolta con un oggetto credenziali o null. Per determinare se si tratta di un PasswordCredential o di un FederatedCredential, basta guardare 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 l'utente

Una volta ottenuta la credenziale, esegui un flusso di autenticazione a seconda del 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 promise viene risolta, controlla se hai ricevuto un oggetto Credential. In caso contrario, significa che l'accesso automatico non è stato possibile. Ignora silenziosamente la procedura di accesso automatico.

UI di aggiornamento

Se l'autenticazione va a buon fine, aggiorna l'interfaccia utente o indirizza l'utente alla pagina personalizzata:

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

Non dimenticare di mostrare il messaggio di errore di autenticazione

Per evitare confusione, gli utenti dovrebbero visualizzare un toast blu con la dicitura "Accesso in corso" al momento della ricezione dell'oggetto della credenziale:

Un suggerimento importante: se riesci a ottenere un oggetto credenziale, ma non riesci ad autenticare l'utente, devi mostrare 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 selettore account

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

I passaggi per accedere tramite il selettore account sono gli stessi dell'accesso automatico, con una chiamata aggiuntiva per mostrare il selettore account nell'ambito del recupero delle informazioni sulle credenziali:

1. Recupera le informazioni sulle credenziali e mostra il selettore account.
2. Autentica l'utente.
3. Aggiorna la UI o vai a una pagina personalizzata.

Ottieni le informazioni sulle credenziali e mostra il selettore dell'account

Mostra un selettore account in risposta a un'azione utente definita, ad esempio quando l'utente tocca il pulsante "Accedi". Chiama navigator.credentials.get() e aggiungi mediation: 'optional' o mediation: 'required' per mostrare 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 serve a garantire che l'accesso automatico non avvenga dopo che l'utente ha scelto di uscire o 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 viene risolta con la credenziale. Se gli utenti annullano il selettore di account o se non sono memorizzate credenziali, la promise viene risolta con null. In questo caso, torna all'esperienza del modulo di accesso.

Non dimenticare di utilizzare il modulo di accesso come opzione di riserva

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

• Non vengono memorizzate credenziali.
• 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 solo tocco e senza dover ricordare ulteriori dettagli di accesso per il tuo sito web.

Per implementare l'accesso federato:

1. Autenticare l'utente con un'identità di terze parti.
2. Memorizzare le informazioni sull'identità.
3. Aggiorna la UI o vai 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.

Ad esempio, se il provider è Google, utilizza la libreria JavaScript 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à federate. Ecco alcuni esempi di piattaforme conosciute:

• Accedi con Google
• Facebook Login
• Twitter Sign-in
• OAuth GitHub

Memorizzare informazioni sull'identità

Una volta completata l'autenticazione, puoi memorizzare le informazioni sull'identità. Le informazioni che memorizzerai 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 memorizzare i dettagli dell'account federato, crea un'istanza di un nuovo oggetto FederatedCredential con l'identificatore dell'utente e l'identificatore del provider. Poi richiama navigator.credentials.store() per archiviare le informazioni sull'identità.

Dopo la federazione, crea un'istanza di 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 archivia l'oggetto credenziali:

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

Esci

Disconnetti gli utenti quando viene toccato il pulsante di disconnessione. Innanzitutto, termina la sessione, poi disattiva l'accesso automatico per le visite future. (La modalità di interruzione delle sessioni dipende interamente da te.)

Disattiva l'accesso automatico per le visite future

Chiama navigator.credentials.preventSilentAccess():

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

In questo modo, l'accesso automatico non verrà eseguito fino alla prossima volta che l'utente lo attiverà. Per riprendere l'accesso automatico, un utente può scegliere di accedere intenzionalmente selezionando l'account con cui vuole accedere dal selettore account. In seguito, l'utente viene sempre ricollegato finché non esce esplicitamente.

Feedback