Aggiungi l'autenticazione a più fattori alla tua applicazione web

Se hai eseguito l'upgrade a Firebase Authentication with 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. Mentre gli aggressori spesso compromette password e account social, l'intercettazione di un messaggio più difficile.

Prima di iniziare

  1. Attiva almeno un provider che supporta l'autenticazione a più fattori. Tutti i provider supportano l'autenticazione a due fattori, tranne l'autenticazione telefonica, l'autenticazione anonima e Game Center di Apple.

  2. Attiva le regioni in cui prevedi di utilizzare l'autenticazione SMS. Firebase utilizza un criterio di blocco completo della regione per gli SMS, che consente di creare progetti in uno stato più sicuro per impostazione predefinita.

  3. Assicurati che l'app verifichi le email degli utenti. MFA richiede la verifica email. In questo modo si impedisce che utenti malintenzionati si registrino a un servizio con un indirizzo e-mail non sono di loro proprietà, per poi bloccare l'effettivo proprietario aggiungendo un secondo fattore.

Utilizzo della multitenancy

Se attivi l'autenticazione a più fattori per l'utilizzo in una multi-tenant, assicurati che per completare i seguenti passaggi (in aggiunta agli altri istruzioni riportate in questo documento):

  1. Nella console Google Cloud, seleziona il tenant con cui vuoi lavorare.

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

    Web 

    import { getAuth } from "firebase/auth";

const auth = getAuth(app);
auth.tenantId = "myTenantId1";

    Web 

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

Attivazione dell'autenticazione a più fattori

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

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

    Devi anche inserire i numeri di telefono con cui testerai l'app. Sebbene sia facoltativo, ti consigliamo vivamente di registrare i numeri di telefono di prova per evitare la limitazione durante lo sviluppo.

  3. Se non hai già autorizzato il dominio della tua app, aggiungilo alla lista consentita alla voce Autenticazione > Impostazioni pagina della console Firebase.

Scegliere un modello di registrazione

Puoi scegliere se la tua app richiede l'autenticazione a più fattori e in che modo e quando registrare gli utenti. Alcuni pattern comuni sono:

  • Registrare il secondo fattore dell'utente nell'ambito della registrazione. Usa questa se la tua app richiede l'autenticazione a più fattori per tutti gli utenti.

  • Offri un'opzione ignorabile per registrare un secondo fattore durante la registrazione. App che vogliono incoraggiare, ma non richiedere, l'autenticazione a più fattori può preferiscono questo approccio.

  • Offri la possibilità di aggiungere un secondo fattore dalla pagina di gestione dell'account o del profilo dell'utente, anziché dalla schermata di registrazione. In questo modo, le difficoltà durante la procedura di registrazione sono ridotte al minimo, pur mantenendo l'autenticazione multi-fattore disponibile per gli utenti attenti alla sicurezza.

  • Richiedere l'aggiunta di un secondo fattore in modo incrementale quando l'utente vuole accedere con requisiti di sicurezza più stringenti.

Configurazione dello strumento di verifica reCAPTCHA

Prima di poter inviare codici SMS, devi configurare uno strumento di verifica reCAPTCHA. Firebase utilizza reCAPTCHA per prevenire gli abusi assicurandosi 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 le chiavi e i secret client necessari.

Utilizzo di reCAPTCHA invisibile

L'oggetto RecaptchaVerifier supporta reCAPTCHA invisibile, che spesso consentono di 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 multifattoriale:

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);

Web 

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

Utilizzo del widget reCAPTCHA

Per utilizzare un widget reCAPTCHA visibile, crea un elemento HTML che contenga il widget, quindi crea un oggetto RecaptchaVerifier con l'ID dell'interfaccia utente containerizzato. Facoltativamente, puoi impostare i callback che vengono attivati quando reCAPTCHA è stato risolto o scade:

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
);

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.
      // ...
    }
  });

Prerendering del reCAPTCHA

Facoltativamente, puoi eseguire il prerendering del reCAPTCHA prima di iniziare la verifica a due fattori registrazione:

Web 

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

Web 

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

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

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

RecaptchaVerifier astrae questa logica con il metodo verify, quindi non devi gestire direttamente la variabile grecaptcha.

La registrazione di un secondo fattore

Per registrare un nuovo fattore secondario per un utente:

  1. Ripeti l'autenticazione dell'utente.

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

  3. Inizializza lo strumento di verifica reCAPTCHA come illustrato nella sezione precedente. Salta questo passaggio se è già configurata un'istanza RecaptchaVerifier:

    Web 

    import { RecaptchaVerifier } from "firebase/auth";

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

    Web 

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');

  4. Ottieni una sessione a più fattori per l'utente:

    Web 

    import { multiFactor } from "firebase/auth";

multiFactor(user).getSession().then(function (multiFactorSession) {
    // ...
});

    Web 

    user.multiFactor.getSession().then(function(multiFactorSession) {
  // ...
})

  5. Inizializza un oggetto PhoneInfoOptions con il numero di telefono dell'utente e sessione basata su più fattori:

    Web 

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

    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:

    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.
    });

    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, è buona norma informare in anticipo gli utenti che riceverà un SMS alle tariffe standard.

  7. Se la richiesta non va a buon fine, reimposta il reCAPTCHA e ripeti il passaggio precedente. in modo che l'utente possa riprovare. Tieni presente che verifyPhoneNumber() reimposta automaticamente il reCAPTCHA quando genera un errore, I token reCAPTCHA possono essere utilizzati solo una volta.

    Web 

    recaptchaVerifier.clear();

    Web 

    recaptchaVerifier.clear();

  8. Una volta inviato il codice SMS, chiedi all'utente di verificarlo:

    Web 

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

    Web 

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

  9. Inizializza un oggetto MultiFactorAssertion con PhoneAuthCredential:

    Web 

    import { PhoneMultiFactorGenerator } from "firebase/auth";

const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Web 

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);

  10. Completa la registrazione. Facoltativamente, puoi specificare un nome visualizzato per il secondo fattore. Questo è utile per gli utenti con più fattori secondari, poiché il numero di telefono viene mascherato durante il flusso di autenticazione (ad ad esempio +1******1234).

    Web 

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

    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 registrazione di un secondo fattore:

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);
    });

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);
});

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

Accesso degli utenti con un secondo fattore

Per eseguire l'accesso di un utente con la verifica tramite SMS a due fattori:

  1. Fai accedere l'utente con il primo fattore, quindi rileva il auth/multi-factor-auth-required errore. Questo errore contiene un resolver, suggerimenti sui secondi fattori registrati e una sessione sottostante dimostrando che l'utente ha eseguito correttamente l'autenticazione con il primo fattore.

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

    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.
        }
});

    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 più fattori secondari registrati, chiedigli quale per utilizzare:

    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.
}

    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 è già configurata un'istanza RecaptchaVerifier:

    Web 

    import { RecaptchaVerifier } from "firebase/auth";

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

    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 nei campi resolver passato all'errore auth/multi-factor-auth-required:

    Web 

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

    Web 

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

  5. Invia un messaggio di verifica al telefono dell'utente:

    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.
    });

    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 non va a buon fine, reimposta il reCAPTCHA e ripeti il passaggio precedente. in modo che l'utente possa riprovare:

    Web 

    recaptchaVerifier.clear();

    Web 

    recaptchaVerifier.clear();

  7. Una volta inviato il codice SMS, chiedi all'utente di verificarlo:

    Web 

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

    Web 

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

  8. Inizializza un oggetto MultiFactorAssertion con PhoneAuthCredential:

    Web 

    const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

    Web 

    var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);

  9. Chiama resolver.resolveSignIn() per completare l'autenticazione secondaria. Puoi quindi accedere al risultato dell'accesso originale, che include il parametro credenziali standard di autenticazione e dati specifici del provider:

    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.
    });

    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 a un utente a più fattori:

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.
        }
    });

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.
    } ...
  });

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

Passaggi successivi