Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Autenticare con Firebase utilizzando il collegamento e-mail in JavaScript

È possibile utilizzare l'autenticazione Firebase per accedere a un utente inviando loro un'e-mail contenente un collegamento, a cui possono fare clic per accedere. Nel processo, viene verificato anche l'indirizzo e-mail dell'utente.

Esistono numerosi vantaggi per l'accesso tramite e-mail:

  • Iscrizione e accesso a basso attrito.
  • Riduzione del rischio di riutilizzo delle password tra le applicazioni, che può compromettere la sicurezza anche di password ben selezionate.
  • La possibilità di autenticare un utente verificando al contempo che l'utente sia il legittimo proprietario di un indirizzo e-mail.
  • Per accedere è necessario solo un account di posta elettronica accessibile. Non è richiesta la proprietà di un numero di telefono o di un account di social media.
  • Un utente può accedere in modo sicuro senza la necessità di fornire (o ricordare) una password, che può essere ingombrante su un dispositivo mobile.
  • Un utente esistente che in precedenza ha effettuato l'accesso con un identificativo e-mail (password o federato) può essere aggiornato per accedere solo tramite e-mail. Ad esempio, un utente che ha dimenticato la password può ancora accedere senza dover reimpostare la password.

Prima di iniziare

Se non lo hai già fatto, copia lo snippet di inizializzazione dalla console di Firebase al tuo progetto come descritto in Aggiungi Firebase al tuo progetto JavaScript .

Per accedere agli utenti tramite collegamento e-mail, è innanzitutto necessario abilitare il provider di posta elettronica e il metodo di accesso al collegamento e-mail per il progetto Firebase:

  1. Nella console di Firebase , apri la sezione Auth .
  2. Nella scheda Metodo di accesso , abilitare il provider Email / Password . Si noti che l'accesso e-mail / password deve essere abilitato per utilizzare l'accesso al collegamento e-mail.
  3. Nella stessa sezione, abilitare il metodo di accesso Collegamento e-mail (accesso senza password) .
  4. Fai clic su Salva .

Per avviare il flusso di autenticazione, presentare all'utente un'interfaccia che richiede all'utente di fornire il proprio indirizzo e-mail e quindi chiamare sendSignInLinkToEmail per richiedere a Firebase di inviare il collegamento di autenticazione al messaggio di posta elettronica dell'utente.

  1. Costruisci l'oggetto ActionCodeSettings , che fornisce a Firebase le istruzioni su come costruire il link e-mail. Imposta i seguenti campi:

    • url : il collegamento diretto da incorporare e qualsiasi stato aggiuntivo da trasmettere. Il dominio del collegamento deve essere autorizzato nell'elenco dei domini autorizzati Firebase Console, che può essere trovato andando nella scheda Metodo di accesso (Autenticazione -> Metodo di accesso).
    • android e ios : le app da utilizzare quando si apre il collegamento di accesso su un dispositivo Android o iOS. Ulteriori informazioni su come configurare i collegamenti dinamici Firebase per aprire collegamenti di azioni e-mail tramite app mobili.
    • handleCodeInApp : impostato su true. L'operazione di accesso deve sempre essere completata nell'app a differenza di altre azioni e-mail fuori banda (reimpostazione password e verifiche e-mail). Questo perché, al termine del flusso, si prevede che l'utente abbia effettuato l'accesso e che il suo stato Auth sia persistito all'interno dell'app.
    • dynamicLinkDomain : quando vengono definiti più domini di collegamento dinamico personalizzati per un progetto, specificare quale utilizzare quando si deve aprire il collegamento tramite un'app mobile specificata (ad esempio example.page.link ). Altrimenti il ​​primo dominio viene automaticamente selezionato.
    
    var actionCodeSettings = {
      // URL you want to redirect back to. The domain (www.example.com) for this
      // URL must be whitelisted in the Firebase Console.
      url: 'https://www.example.com/finishSignUp?cartId=1234',
      // This must be true.
      handleCodeInApp: true,
      iOS: {
        bundleId: 'com.example.ios'
      },
      android: {
        packageName: 'com.example.android',
        installApp: true,
        minimumVersion: '12'
      },
      dynamicLinkDomain: 'example.page.link'
    };
    

    Per ulteriori informazioni su ActionCodeSettings, consultare la sezione Stato di passaggio nelle azioni e-mail .

  2. Chiedi all'utente la sua email.

  3. Invia il link di autenticazione all'e-mail dell'utente e salva l'e-mail dell'utente nel caso in cui l'utente completi l'accesso e-mail sullo stesso dispositivo.

    
    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
      .then(function() {
        // The link was successfully sent. Inform the user.
        // Save the email locally so you don't need to ask the user for it again
        // if they open the link on the same device.
        window.localStorage.setItem('emailForSignIn', email);
      })
      .catch(function(error) {
        // Some error occurred, you can inspect the code: error.code
      });
    

Problemi di sicurezza

Per impedire che un collegamento di accesso venga utilizzato per accedere come utente non intenzionale o su un dispositivo non intenzionale, Firebase Auth richiede che l'indirizzo e-mail dell'utente sia fornito al completamento del flusso di accesso. Affinché l'accesso abbia esito positivo, questo indirizzo e-mail deve corrispondere all'indirizzo a cui è stato originariamente inviato il collegamento di accesso.

È possibile semplificare questo flusso per gli utenti che aprono il collegamento di accesso sullo stesso dispositivo che richiedono il collegamento, memorizzando il proprio indirizzo e-mail localmente, ad esempio utilizzando LocalStorage o cookie, quando si invia l'e-mail di accesso. Quindi, utilizzare questo indirizzo per completare il flusso. Non passare l'e-mail dell'utente nei parametri dell'URL di reindirizzamento e riutilizzarla in quanto ciò potrebbe consentire iniezioni di sessione.

Dopo il completamento dell'accesso, qualsiasi precedente meccanismo di accesso non verificato verrà rimosso dall'utente e tutte le sessioni esistenti verranno invalidate. Ad esempio, se qualcuno ha precedentemente creato un account non verificato con la stessa e-mail e la stessa password, la password dell'utente verrà rimossa per impedire al sosia che ha rivendicato la proprietà e creato l'account non verificato di accedere nuovamente con e-mail e password non verificate.

Assicurati inoltre di utilizzare un URL HTTPS in produzione per evitare che il tuo collegamento venga potenzialmente intercettato dai server intermedi.

Completamento dell'accesso in una pagina Web

Il formato del deep link del collegamento e-mail è lo stesso del formato utilizzato per le azioni e-mail fuori banda (verifica e-mail, reimpostazione password e revoca della modifica e-mail). Firebase Auth semplifica questo controllo fornendo l'API isSignInWithEmailLink per verificare se un collegamento è un accesso con collegamento e-mail.

Per completare l'accesso sulla pagina di destinazione, chiama signInWithEmailLink con l'e-mail dell'utente e il link e-mail effettivo contenente il codice unico.


// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then(function(result) {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch(function(error) {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

Completamento dell'accesso in un'app mobile

L'autenticazione Firebase utilizza i collegamenti dinamici Firebase per inviare il collegamento e-mail a un dispositivo mobile. Per il completamento dell'accesso tramite l'applicazione mobile, l'applicazione deve essere configurata per rilevare il collegamento dell'applicazione in arrivo, analizzare il deep link sottostante e quindi completare l'accesso come avviene tramite il flusso web.

Per ulteriori informazioni su come gestire l'accesso con collegamento e-mail in un'applicazione Android, consultare la guida di Android .

Per ulteriori informazioni su come gestire l'accesso con il collegamento e-mail in un'applicazione iOS, consultare la guida iOS .

Puoi anche collegare questo metodo di autenticazione a un utente esistente. Ad esempio, un utente precedentemente autenticato con un altro provider, ad esempio un numero di telefono, può aggiungere questo metodo di accesso al proprio account esistente.

La differenza sarebbe nella seconda metà dell'operazione:


// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
    email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then(function(usercred) {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch(function(error) {
    // Some error occurred.
  });

Questo può anche essere usato per autenticare nuovamente un utente di collegamento e-mail prima di eseguire un'operazione sensibile.


// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
    email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then(function(usercred) {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch(function(error) {
    // Some error occurred.
  });

Tuttavia, poiché il flusso potrebbe finire su un dispositivo diverso in cui l'utente originale non era connesso, questo flusso potrebbe non essere completato. In tal caso, è possibile mostrare all'utente un errore per costringerli ad aprire il collegamento sullo stesso dispositivo. È possibile passare un certo stato nel collegamento per fornire informazioni sul tipo di operazione e sull'utente uid.

Nel caso in cui supporti sia la password sia l'accesso basato sul collegamento con e-mail, per differenziare il metodo di accesso per un utente password / collegamento, usa fetchSignInMethodsForEmail . Ciò è utile per i flussi identificativi per primi in cui all'utente viene chiesto per primo di fornire la propria e-mail e quindi presentato il metodo di accesso:

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then(function(signInMethods) {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
     if (signInMethods.indexOf(
             firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
       // User can sign in with email/link.
    }
  })
  .catch(function(error) {
    // Some error occurred, you can inspect the code: error.code
  });
}

Come descritto sopra, e-mail / password e e-mail / collegamento sono considerati lo stesso firebase.auth.EmailAuthProvider (stesso PROVIDER_ID ) con diversi metodi di accesso.

Prossimi passi

Dopo che un utente accede per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del provider di autenticazione, con cui l'utente ha effettuato l'accesso. Questo nuovo account viene archiviato come parte del progetto Firebase e può essere utilizzato per identificare un utente in ogni app del progetto, indipendentemente da come l'utente accede.

  • Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un osservatore sull'oggetto Auth . È quindi possibile ottenere le informazioni di base sul profilo User dall'oggetto User . Vedi Gestisci utenti .

  • Nelle regole di sicurezza di Firebase Realtime Database e Cloud Storage, è possibile ottenere l'ID utente univoco dell'utente connesso dalla variabile auth e utilizzarlo per controllare i dati a cui un utente può accedere.

Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.

Per disconnettere un utente, chiama signOut :

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});