Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Autenticati con Firebase utilizzando il collegamento e-mail in JavaScript

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Puoi utilizzare l'autenticazione Firebase per accedere a un utente inviandogli un'e-mail contenente un collegamento, su cui può fare clic per accedere. Nel processo, viene verificato anche l'indirizzo e-mail dell'utente.

L'accesso tramite e-mail offre numerosi vantaggi:

  • Registrazione e accesso a basso attrito.
  • Minore 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 anche che l'utente sia il legittimo proprietario di un indirizzo e-mail.
  • Un utente ha bisogno solo di un account e-mail accessibile per accedere. 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 ha effettuato l'accesso in precedenza con un identificatore e-mail (password o federato) può essere aggiornato per accedere solo con l'e-mail. Ad esempio, un utente che ha dimenticato la password può comunque accedere senza dover reimpostare la password.

Prima di iniziare

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

Per accedere agli utenti tramite collegamento e-mail, devi prima abilitare il provider di posta elettronica e il metodo di accesso al collegamento e-mail per il tuo progetto Firebase:

  1. Nella console Firebase , apri la sezione Auth .
  2. Nella scheda Metodo di accesso, abilitare il provider di posta elettronica/password . Tieni presente che l'accesso tramite e-mail/password deve essere abilitato per utilizzare l'accesso tramite collegamento e-mail.
  3. Nella stessa sezione, abilita il metodo di accesso tramite collegamento e-mail (accesso senza password) .
  4. Fare clic su Salva .

Per avviare il flusso di autenticazione, presenta all'utente un'interfaccia che richiede all'utente di fornire il proprio indirizzo e-mail e quindi chiama sendSignInLinkToEmail per richiedere a Firebase di inviare il collegamento di autenticazione all'e-mail dell'utente.

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

    • url : il collegamento diretto da incorporare e qualsiasi stato aggiuntivo da trasmettere. Il dominio del collegamento deve essere aggiunto all'elenco dei domini autorizzati di Firebase Console, che può essere trovato andando alla scheda Metodo di accesso (Autenticazione -> Metodo di accesso).
    • android e ios : le app da utilizzare quando il collegamento di accesso viene aperto su un dispositivo Android o Apple. Scopri di più su come configurare Firebase Dynamic Links per aprire i link di azioni e-mail tramite app mobili.
    • handleCodeInApp : impostato su true. L'operazione di accesso deve essere sempre completata nell'app a differenza di altre azioni e-mail fuori banda (reimpostazione password e verifiche e-mail). Questo perché, alla fine del flusso, l'utente dovrebbe aver effettuato l'accesso e il suo stato di autenticazione persiste all'interno dell'app.
    • dynamicLinkDomain : quando vengono definiti più domini di collegamento dinamico personalizzati per un progetto, specificare quale utilizzare quando il collegamento deve essere aperto tramite un'app mobile specificata (ad esempio, example.page.link ). Altrimenti viene selezionato automaticamente il primo dominio.

      Web version 9

      const actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list 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'
      };

      Web version 8

      var actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list 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, fare riferimento alla sezione Stato di passaggio nelle azioni e-mail .

  2. Chiedi all'utente la sua email.

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

    Web version 9

    import { getAuth, sendSignInLinkToEmail } from "firebase/auth";
    
    const auth = getAuth();
    sendSignInLinkToEmail(auth, email, actionCodeSettings)
      .then(() => {
        // 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((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ...
      });

    Web version 8

    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
      .then(() => {
        // 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((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });

Problemi di sicurezza

Per evitare che un collegamento di accesso venga utilizzato per accedere come utente non previsto o su un dispositivo non previsto, 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 email deve corrispondere all'indirizzo a cui è stato originariamente inviato il link di accesso.

Puoi semplificare questo flusso per gli utenti che aprono il collegamento di accesso sullo stesso dispositivo su cui richiedono il collegamento, memorizzando il loro indirizzo e-mail in locale, ad esempio utilizzando localStorage o cookie, quando invii l'e-mail di accesso. Quindi, utilizza questo indirizzo per completare il flusso. Non passare l'e-mail dell'utente nei parametri dell'URL di reindirizzamento e riutilizzarla poiché 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 email e password, la password dell'utente verrà rimossa per impedire al sosia che ha rivendicato la proprietà e creato quell'account non verificato di accedere nuovamente con l'email e la password non verificate.

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

Completamento dell'accesso a 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 della password e revoca della modifica dell'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 alla pagina di destinazione, chiama signInWithEmailLink con l'e-mail dell'utente e il collegamento e-mail effettivo contenente il codice monouso.

Web version 9

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, 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.
  let 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.
  signInWithEmailLink(auth, email, window.location.href)
    .then((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((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

Web version 8

// 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((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((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 per dispositivi mobili

L'autenticazione Firebase utilizza Firebase Dynamic Links per inviare il collegamento e-mail a un dispositivo mobile. Per completare l'accesso tramite l'applicazione mobile, l'applicazione deve essere configurata per rilevare il collegamento dell'applicazione in entrata, analizzare il collegamento diretto 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, fare riferimento alla guida Android .

Per ulteriori informazioni su come gestire l'accesso con il collegamento e-mail in un'applicazione Apple, fare riferimento alla guida alle piattaforme Apple .

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:

Web version 9

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

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

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

Web version 8

// 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((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

Questo può essere utilizzato anche per riautenticare un utente del collegamento e-mail prima di eseguire un'operazione sensibile.

Web version 9

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

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

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

Web version 8

// 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((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });

Tuttavia, poiché il flusso potrebbe finire su un dispositivo diverso in cui l'utente originale non aveva effettuato l'accesso, questo flusso potrebbe non essere completato. In tal caso, all'utente può essere mostrato un errore per costringerlo ad aprire il collegamento sullo stesso dispositivo. Alcuni stati possono essere passati nel collegamento per fornire informazioni sul tipo di operazione e sull'uid utente.

Nel caso in cui si supporti sia l'accesso basato su password che tramite collegamento con l'e-mail, per differenziare il metodo di accesso per un utente con password/collegamento, utilizzare fetchSignInMethodsForEmail . Ciò è utile per i flussi di identificazione prima in cui all'utente viene prima chiesto di fornire la propria posta elettronica e quindi viene presentato il metodo di accesso:

Web version 9

import { getAuth, fetchSignInMethodsForEmail, EmailAuthProvider} from "firebase/auth";

// After asking the user for their email.
const email = window.prompt('Please provide your email');

const auth = getAuth();
fetchSignInMethodsForEmail(auth, email)
  .then((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(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });

Web version 8

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then((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((error) => {
    // Some error occurred, you can inspect the code: error.code
  });

Come descritto sopra, email/password ed email/link sono considerati lo stesso firebase.auth.EmailAuthProvider (stesso PROVIDER_ID ) con metodi di accesso diversi.

Prossimi passi

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

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

  • Nelle regole di sicurezza del database in tempo reale e dell'archiviazione cloud di Firebase, puoi ottenere l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile auth e utilizzarlo per controllare a quali dati può accedere un utente.

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 :

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

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