Aggiungi l'autenticazione a più fattori alla tua app Web

Se hai eseguito l'upgrade all'autenticazione Firebase con Identity Platform, puoi aggiungere l'autenticazione a più fattori tramite SMS alla tua app Web.

L'autenticazione a più fattori aumenta la sicurezza della tua app. Sebbene gli aggressori spesso compromettano password e account social, intercettare un messaggio di testo è più difficile.

Prima di iniziare

  1. Abilita almeno un provider che supporti l'autenticazione a più fattori. Tutti i provider supportano MFA, ad eccezione dell'autenticazione telefonica, dell'autenticazione anonima e di Apple Game Center.

  2. Assicurati che la tua app stia verificando le email degli utenti. L'AMF richiede la verifica dell'e-mail. Ciò impedisce agli autori malintenzionati di registrarsi a un servizio con un indirizzo email di cui non sono i proprietari e quindi di escludere il vero proprietario aggiungendo un secondo fattore.

Utilizzo della multi-tenancy

Se stai abilitando l'autenticazione a più fattori per l'utilizzo in un ambiente multi-tenant , assicurati di completare i seguenti passaggi (oltre al resto delle istruzioni contenute in questo documento):

  1. Nella console GCP, seleziona il tenant con cui desideri collaborare.

  2. Nel codice, imposta il campo tenantId nell'istanza Auth sull'ID del tuo tenant. Per esempio:

    API modulare Web

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth(app);
    auth.tenantId = "myTenantId1";
    

    API con spazio dei nomi Web

    firebase.auth().tenantId = 'myTenantId1';
    

Abilitazione dell'autenticazione a più fattori

  1. Apri la pagina Autenticazione > Metodo di accesso della console Firebase.

  2. Nella sezione Avanzate , abilita l'autenticazione a più fattori SMS .

    Dovresti anche inserire i numeri di telefono con cui testerai la tua app. Anche se facoltativa, la registrazione dei numeri di telefono di prova è fortemente consigliata per evitare limitazioni durante lo sviluppo.

  3. Se non hai già autorizzato il dominio della tua app, aggiungilo all'elenco di autorizzazioni nella pagina Autenticazione > Impostazioni della console Firebase.

Scegliere un modello di iscrizione

Puoi scegliere se la tua app richiede l'autenticazione a più fattori e come e quando registrare i tuoi utenti. Alcuni modelli comuni includono:

  • Registra il secondo fattore dell'utente come parte della registrazione. Utilizza questo metodo se la tua app richiede l'autenticazione a più fattori per tutti gli utenti.

  • Offri un'opzione ignorabile per iscrivere un secondo fattore durante la registrazione. Le app che vogliono incoraggiare, ma non richiedere, l'autenticazione a più fattori potrebbero preferire questo approccio.

  • Fornire la possibilità di aggiungere un secondo fattore dall'account dell'utente o dalla pagina di gestione del profilo, anziché dalla schermata di registrazione. Ciò riduce al minimo gli attriti durante il processo di registrazione, pur rendendo disponibile l’autenticazione a più fattori per gli utenti sensibili alla sicurezza.

  • Richiedere l'aggiunta incrementale di un secondo fattore quando l'utente desidera accedere a funzionalità con requisiti di sicurezza maggiori.

Configurazione del verificatore reCAPTCHA

Prima di poter inviare codici SMS, è necessario configurare un verificatore reCAPTCHA. Firebase utilizza reCAPTCHA per prevenire abusi garantendo che le richieste di verifica del numero di telefono provengano da uno dei domini consentiti della tua app.

Non è necessario configurare manualmente un client reCAPTCHA; l'oggetto RecaptchaVerifier dell'SDK client crea e inizializza automaticamente tutte le chiavi e i segreti client necessari.

Utilizzo di reCAPTCHA invisibile

L'oggetto RecaptchaVerifier supporta reCAPTCHA invisibile , che spesso può verificare l'utente senza richiedere alcuna interazione. Per utilizzare un reCAPTCHA invisibile, crea un RecaptchaVerifier con il parametro size impostato su invisible e specifica l'ID dell'elemento dell'interfaccia utente che avvia la registrazione a più fattori:

API modulare Web

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier("sign-in-button", {
    "size": "invisible",
    "callback": function(response) {
        // reCAPTCHA solved, you can proceed with
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
    }
}, auth);

API con spazio dei nomi Web

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
  // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
  onSolvedRecaptcha();
}
});

Utilizzando il widget reCAPTCHA

Per utilizzare un widget reCAPTCHA visibile, crea un elemento HTML per contenere il widget, quindi crea un oggetto RecaptchaVerifier con l'ID del contenitore dell'interfaccia utente. Facoltativamente, puoi anche impostare callback che vengono richiamati quando il reCAPTCHA viene risolto o scade:

API modulare Web

import { RecaptchaVerifier } from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha-container",

    // Optional reCAPTCHA parameters.
    {
      "size": "normal",
      "callback": function(response) {
        // reCAPTCHA solved, you can proceed with
        // phoneAuthProvider.verifyPhoneNumber(...).
        onSolvedRecaptcha();
      },
      "expired-callback": function() {
        // Response expired. Ask user to solve reCAPTCHA again.
        // ...
      }
    }, auth
);

API con spazio dei nomi Web

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
  'recaptcha-container',
  // Optional reCAPTCHA parameters.
  {
    'size': 'normal',
    'callback': function(response) {
      // reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
      // ...
      onSolvedRecaptcha();
    },
    'expired-callback': function() {
      // Response expired. Ask user to solve reCAPTCHA again.
      // ...
    }
  });

Pre-rendering del reCAPTCHA

Facoltativamente, puoi pre-renderizzare il reCAPTCHA prima di iniziare la registrazione a due fattori:

API modulare Web

recaptchaVerifier.render()
    .then(function (widgetId) {
        window.recaptchaWidgetId = widgetId;
    });

API con spazio dei nomi Web

recaptchaVerifier.render()
  .then(function(widgetId) {
    window.recaptchaWidgetId = widgetId;
  });

Dopo la risoluzione render() , ottieni l'ID widget di reCAPTCHA, che puoi utilizzare per effettuare chiamate all'API reCAPTCHA :

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

RecaptchaVerifier astrae questa logica con il metodo di verifica , quindi non è necessario gestire direttamente la variabile grecaptcha .

Iscrizione di un secondo fattore

Per registrare un nuovo fattore secondario per un utente:

  1. Riautenticare l'utente.

  2. Chiedi all'utente di inserire il proprio numero di telefono.

  3. Inizializza il verificatore reCAPTCHA come illustrato nella sezione precedente. Salta questo passaggio se un'istanza RecaptchaVerifier è già configurata:

    API modulare Web

    import { RecaptchaVerifier } from "firebase/auth";
    
    const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    API con spazio dei nomi Web

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. Ottieni una sessione a più fattori per l'utente:

    API modulare Web

    import { multiFactor } from "firebase/auth";
    
    multiFactor(user).getSession().then(function (multiFactorSession) {
        // ...
    });
    

    API con spazio dei nomi Web

    user.multiFactor.getSession().then(function(multiFactorSession) {
      // ...
    })
    
  5. Inizializza un oggetto PhoneInfoOptions con il numero di telefono dell'utente e la sessione a più fattori:

    API modulare Web

    // Specify the phone number and pass the MFA session.
    const phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    

    API con spazio dei nomi Web

    // Specify the phone number and pass the MFA session.
    var phoneInfoOptions = {
      phoneNumber: phoneNumber,
      session: multiFactorSession
    };
    
  6. Invia un messaggio di verifica al telefono dell'utente:

    API modulare Web

    import { PhoneAuthProvider } from "firebase/auth";
    
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed to complete enrollment.
        });
    

    API con spazio dei nomi Web

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for enrollment completion.
      })
    

    Sebbene non sia obbligatorio, è consigliabile informare in anticipo gli utenti che riceveranno un messaggio SMS e che si applicano le tariffe standard.

  7. Se la richiesta fallisce, reimposta reCAPTCHA, quindi ripeti il ​​passaggio precedente in modo che l'utente possa riprovare. Tieni presente che verifyPhoneNumber() reimposterà automaticamente reCAPTCHA quando genera un errore, poiché i token reCAPTCHA sono utilizzabili solo una volta.

    API modulare Web

    recaptchaVerifier.clear();
    

    API con spazio dei nomi Web

    recaptchaVerifier.clear();
    
  8. Una volta inviato il codice SMS, chiedi all'utente di verificare il codice:

    API modulare Web

    // Ask user for the verification code. Then:
    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    API con spazio dei nomi Web

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  9. Inizializza un oggetto MultiFactorAssertion con PhoneAuthCredential :

    API modulare Web

    import { PhoneMultiFactorGenerator } from "firebase/auth";
    
    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    API con spazio dei nomi Web

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  10. Completa l'iscrizione. Facoltativamente, è possibile specificare un nome visualizzato per il secondo fattore. Ciò è utile per gli utenti con più fattori secondi, poiché il numero di telefono viene mascherato durante il flusso di autenticazione (ad esempio, +1******1234).

    API modulare Web

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    multiFactor(user).enroll(multiFactorAssertion, "My personal phone number");
    

    API con spazio dei nomi Web

    // Complete enrollment. This will update the underlying tokens
    // and trigger ID token change listener.
    user.multiFactor.enroll(multiFactorAssertion, 'My personal phone number');
    

Il codice seguente mostra un esempio completo di iscrizione di un secondo fattore:

API modulare Web

import {
    multiFactor, PhoneAuthProvider, PhoneMultiFactorGenerator,
    RecaptchaVerifier
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
multiFactor(user).getSession()
    .then(function (multiFactorSession) {
        // Specify the phone number and pass the MFA session.
        const phoneInfoOptions = {
            phoneNumber: phoneNumber,
            session: multiFactorSession
        };

        const phoneAuthProvider = new PhoneAuthProvider(auth);

        // Send SMS verification code.
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
    }).then(function (verificationId) {
        // Ask user for the verification code. Then:
        const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
        const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

        // Complete enrollment.
        return multiFactor(user).enroll(multiFactorAssertion, mfaDisplayName);
    });

API con spazio dei nomi Web

var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
user.multiFactor.getSession().then(function(multiFactorSession) {
  // Specify the phone number and pass the MFA session.
  var phoneInfoOptions = {
    phoneNumber: phoneNumber,
    session: multiFactorSession
  };
  var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
  // Send SMS verification code.
  return phoneAuthProvider.verifyPhoneNumber(
      phoneInfoOptions, recaptchaVerifier);
})
.then(function(verificationId) {
  // Ask user for the verification code.
  var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
  var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
  // Complete enrollment.
  return user.multiFactor.enroll(multiFactorAssertion, mfaDisplayName);
});

Congratulazioni! Hai registrato correttamente un secondo fattore di autenticazione per un utente.

Accesso degli utenti con un secondo fattore

Per accedere a un utente con la verifica SMS a due fattori:

  1. Accedi all'utente con il primo fattore, quindi rileva l'errore auth/multi-factor-auth-required . Questo errore contiene un risolutore, suggerimenti sui secondi fattori registrati e una sessione sottostante che dimostra che l'utente si è autenticato correttamente con il primo fattore.

    Ad esempio, se il primo fattore dell'utente era un indirizzo email e una password:

    API modulare Web

    import { getAuth, getMultiFactorResolver} from "firebase/auth";
    
    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
        .then(function (userCredential) {
            // User successfully signed in and is not enrolled with a second factor.
        })
        .catch(function (error) {
            if (error.code == 'auth/multi-factor-auth-required') {
                // The user is a multi-factor user. Second factor challenge is required.
                resolver = getMultiFactorResolver(auth, error);
                // ...
            } else if (error.code == 'auth/wrong-password') {
                // Handle other errors such as wrong password.
            }
    });
    

    API con spazio dei nomi Web

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(function(userCredential) {
        // User successfully signed in and is not enrolled with a second factor.
      })
      .catch(function(error) {
        if (error.code == 'auth/multi-factor-auth-required') {
          // The user is a multi-factor user. Second factor challenge is required.
          resolver = error.resolver;
          // ...
        } else if (error.code == 'auth/wrong-password') {
          // Handle other errors such as wrong password.
        } ...
      });
    

    Se il primo fattore dell'utente è un provider federato, come OAuth, SAML o OIDC, rileva l'errore dopo aver chiamato signInWithPopup() o signInWithRedirect() .

  2. Se l'utente ha registrato più fattori secondari, chiedigli quale utilizzare:

    API modulare Web

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    
    if (resolver.hints[selectedIndex].factorId ===
        PhoneMultiFactorGenerator.FACTOR_ID) {
        // User selected a phone second factor.
        // ...
    } else if (resolver.hints[selectedIndex].factorId ===
               TotpMultiFactorGenerator.FACTOR_ID) {
        // User selected a TOTP second factor.
        // ...
    } else {
        // Unsupported second factor.
    }
    

    API con spazio dei nomi Web

    // Ask user which second factor to use.
    // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber
    // You can get the display name via resolver.hints[selectedIndex].displayName
    if (resolver.hints[selectedIndex].factorId === firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
      // User selected a phone second factor.
      // ...
    } else if (resolver.hints[selectedIndex].factorId === firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
      // User selected a TOTP second factor.
      // ...
    } else {
      // Unsupported second factor.
    }
    
  3. Inizializza il verificatore reCAPTCHA come illustrato nella sezione precedente. Salta questo passaggio se un'istanza RecaptchaVerifier è già configurata:

    API modulare Web

    import { RecaptchaVerifier } from "firebase/auth";
    
    recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
    

    API con spazio dei nomi Web

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
    
  4. Inizializza un oggetto PhoneInfoOptions con il numero di telefono dell'utente e la sessione a più fattori. Questi valori sono contenuti nell'oggetto resolver passato all'errore auth/multi-factor-auth-required :

    API modulare Web

    const phoneInfoOptions = {
        multiFactorHint: resolver.hints[selectedIndex],
        session: resolver.session
    };
    

    API con spazio dei nomi Web

    var phoneInfoOptions = {
      multiFactorHint: resolver.hints[selectedIndex],
      session: resolver.session
    };
    
  5. Invia un messaggio di verifica al telefono dell'utente:

    API modulare Web

    // Send SMS verification code.
    const phoneAuthProvider = new PhoneAuthProvider(auth);
    phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
        .then(function (verificationId) {
            // verificationId will be needed for sign-in completion.
        });
    

    API con spazio dei nomi Web

    var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
    // Send SMS verification code.
    return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
      .then(function(verificationId) {
        // verificationId will be needed for sign-in completion.
      })
    
  6. Se la richiesta fallisce, reimposta reCAPTCHA, quindi ripeti il ​​passaggio precedente in modo che l'utente possa riprovare:

    API modulare Web

    recaptchaVerifier.clear();
    

    API con spazio dei nomi Web

    recaptchaVerifier.clear();
    
  7. Una volta inviato il codice SMS, chiedi all'utente di verificare il codice:

    API modulare Web

    const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
    

    API con spazio dei nomi Web

    // Ask user for the verification code. Then:
    var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
    
  8. Inizializza un oggetto MultiFactorAssertion con PhoneAuthCredential :

    API modulare Web

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
    

    API con spazio dei nomi Web

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
    
  9. Chiamaresolver.resolveSignIn resolver.resolveSignIn() per completare l'autenticazione secondaria. È quindi possibile accedere al risultato di accesso originale, che include i dati standard specifici del provider e le credenziali di autenticazione:

    API modulare Web

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
        .then(function (userCredential) {
            // userCredential will also contain the user, additionalUserInfo, optional
            // credential (null for email/password) associated with the first factor sign-in.
    
            // For example, if the user signed in with Google as a first factor,
            // userCredential.additionalUserInfo will contain data related to Google
            // provider that the user signed in with.
            // - user.credential contains the Google OAuth credential.
            // - user.credential.accessToken contains the Google OAuth access token.
            // - user.credential.idToken contains the Google OAuth ID token.
        });
    

    API con spazio dei nomi Web

    // Complete sign-in. This will also trigger the Auth state listeners.
    resolver.resolveSignIn(multiFactorAssertion)
      .then(function(userCredential) {
        // userCredential will also contain the user, additionalUserInfo, optional
        // credential (null for email/password) associated with the first factor sign-in.
        // For example, if the user signed in with Google as a first factor,
        // userCredential.additionalUserInfo will contain data related to Google provider that
        // the user signed in with.
        // user.credential contains the Google OAuth credential.
        // user.credential.accessToken contains the Google OAuth access token.
        // user.credential.idToken contains the Google OAuth ID token.
      });
    

Il codice seguente mostra un esempio completo di accesso di un utente a più fattori:

API modulare Web

import {
    getAuth,
    getMultiFactorResolver,
    PhoneAuthProvider,
    PhoneMultiFactorGenerator,
    RecaptchaVerifier,
    signInWithEmailAndPassword
} from "firebase/auth";

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
    .then(function (userCredential) {
        // User is not enrolled with a second factor and is successfully
        // signed in.
        // ...
    })
    .catch(function (error) {
        if (error.code == 'auth/multi-factor-auth-required') {
            const resolver = getMultiFactorResolver(auth, error);
            // Ask user which second factor to use.
            if (resolver.hints[selectedIndex].factorId ===
                PhoneMultiFactorGenerator.FACTOR_ID) {
                const phoneInfoOptions = {
                    multiFactorHint: resolver.hints[selectedIndex],
                    session: resolver.session
                };
                const phoneAuthProvider = new PhoneAuthProvider(auth);
                // Send SMS verification code
                return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
                    .then(function (verificationId) {
                        // Ask user for the SMS verification code. Then:
                        const cred = PhoneAuthProvider.credential(
                            verificationId, verificationCode);
                        const multiFactorAssertion =
                            PhoneMultiFactorGenerator.assertion(cred);
                        // Complete sign-in.
                        return resolver.resolveSignIn(multiFactorAssertion)
                    })
                    .then(function (userCredential) {
                        // User successfully signed in with the second factor phone number.
                    });
            } else if (resolver.hints[selectedIndex].factorId ===
                       TotpMultiFactorGenerator.FACTOR_ID) {
                // Handle TOTP MFA.
                // ...
            } else {
                // Unsupported second factor.
            }
        } else if (error.code == 'auth/wrong-password') {
            // Handle other errors such as wrong password.
        }
    });

API con spazio dei nomi Web

var resolver;
firebase.auth().signInWithEmailAndPassword(email, password)
  .then(function(userCredential) {
    // User is not enrolled with a second factor and is successfully signed in.
    // ...
  })
  .catch(function(error) {
    if (error.code == 'auth/multi-factor-auth-required') {
      resolver = error.resolver;
      // Ask user which second factor to use.
      if (resolver.hints[selectedIndex].factorId ===
          firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
        var phoneInfoOptions = {
          multiFactorHint: resolver.hints[selectedIndex],
          session: resolver.session
        };
        var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
        // Send SMS verification code
        return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
          .then(function(verificationId) {
            // Ask user for the SMS verification code.
            var cred = firebase.auth.PhoneAuthProvider.credential(
                verificationId, verificationCode);
            var multiFactorAssertion =
                firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
            // Complete sign-in.
            return resolver.resolveSignIn(multiFactorAssertion)
          })
          .then(function(userCredential) {
            // User successfully signed in with the second factor phone number.
          });
      } else if (resolver.hints[selectedIndex].factorId ===
        firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
        // Handle TOTP MFA.
        // ...
      } else {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

Congratulazioni! Hai eseguito correttamente l'accesso di un utente utilizzando l'autenticazione a più fattori.

Qual è il prossimo