Aggiunta dell'autenticazione a più fattori alla tua app web

Questo documento mostra come aggiungere l'autenticazione a più fattori tramite SMS alla tua app web.

L'autenticazione a più fattori aumenta la sicurezza della tua app. Sebbene i malintenzionati spesso compromettano le password e gli account social, intercettare un SMS è più difficile.

Prima di iniziare

Abilita almeno un provider che supporti l'autenticazione a più fattori. Ogni provider supporta MFA, tranne l'autenticazione tramite telefono, l'autenticazione anonima e l'Apple Game Center.
Assicurati che la tua app verifichi le email degli utenti. La MFA richiede la verifica email. In questo modo impedisci ai malintenzionati di registrarsi a un servizio con un'email di cui non sono proprietari, quindi di bloccare il vero proprietario aggiungendo un secondo fattore.

Utilizzo della multitenancy

Se abiliti l'autenticazione a più fattori per l'utilizzo in un ambiente multi-tenant, assicurati di completare i seguenti passaggi (oltre alle altre istruzioni in questo documento):

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

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

Versione 9 del Web

import { getAuth } from "firebase/auth";

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

Versione 8 web

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

Attivazione dell'autenticazione a più fattori

Vai alla pagina Identity Platform MFA nella console Google Cloud.
Vai alla pagina MFA
Nella casella Autenticazione a più fattori basata su SMS, fai clic su Attiva.
Inserisci i numeri di telefono con cui testerai la tua app. Sebbene sia facoltativo, è vivamente consigliato registrare i numeri di telefono di test per evitare limitazioni durante lo sviluppo.
Se non hai ancora autorizzato il dominio dell'app, aggiungilo alla lista consentita facendo clic su Aggiungi dominio a destra.
Fai clic su Salva.

Scegliere un pattern di registrazione

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

Registra il secondo fattore dell'utente nell'ambito della registrazione. Utilizza questo metodo 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. Le app che vogliono incoraggiare, ma non richiedono, l'autenticazione a più fattori possono preferire questo approccio.
Offri la possibilità di aggiungere un secondo fattore dalla pagina di gestione del profilo o dell'account dell'utente, invece che dalla schermata di registrazione. Questo riduce al minimo l'attrito durante il processo di registrazione, pur rendendo disponibile l'autenticazione a più fattori per gli utenti sensibili alla sicurezza.
Richiedi l'aggiunta di un secondo fattore in modo incrementale quando l'utente vuole accedere alle funzionalità con requisiti di sicurezza più elevati.

Configurazione dello strumento di verifica reCAPTCHA

Prima di poter inviare codici SMS, devi configurare uno strumento di verifica reCAPTCHA. Identity Platform utilizza reCAPTCHA per prevenire gli abusi garantendo che le richieste di verifica dei numeri di telefono provengano da uno dei domini consentiti nella tua app.

Non è necessario configurare manualmente un client reCAPTCHA; l'oggetto RecaptchaVerifier dell'SDK client crea e inizializza automaticamente le chiavi e i secret del 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 UI che avvia la registrazione a più fattori:

Versione 9 del 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);

Versione 8 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 del container dell'interfaccia utente. Facoltativamente, puoi impostare callback che vengono richiamati una volta risolto o che scade il reCAPTCHA:

Versione 9 del 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
);

Versione 8 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 eseguire il pre-rendering di reCAPTCHA prima di avviare la registrazione a due fattori:

Versione 9 del Web

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

Versione 8 web

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

Una volta risolto il problema di render(), viene visualizzato l'ID widget di reCAPTCHA, che puoi utilizzare per effettuare chiamate all'API reCAPTCHA:

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

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

Registrazione di un secondo fattore

Per registrare un nuovo fattore secondario per un utente:

Eseguire nuovamente l'autenticazione dell'utente.
Chiedi all'utente di inserire il suo numero di telefono.

Nota: Google memorizza e utilizza i numeri di telefono per migliorare la prevenzione di spam e comportamenti illeciti in tutti i servizi Google. Assicurati di ottenere il consenso appropriato dagli utenti prima di inviare i loro numeri di telefono a Identity Platform.

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

Versione 9 del Web

import { RecaptchaVerifier } from "firebase/auth";

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

Versione 8 web

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

Ricevi una sessione a più fattori per l'utente:

Versione 9 del Web

import { multiFactor } from "firebase/auth";

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

Versione 8 web

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

Inizializza un oggetto PhoneInfoOptions con il numero di telefono dell'utente e la sessione a più fattori:

Versione 9 del Web

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

Versione 8 web

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

Invia un messaggio di verifica al telefono dell'utente:

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

Versione 8 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 verranno applicate le tariffe standard.

Se la richiesta non va a buon fine, reimposta il reCAPTCHA, quindi ripeti il passaggio precedente per consentire all'utente di riprovare. Tieni presente che verifyPhoneNumber() reimposterà automaticamente il reCAPTCHA quando genera un errore, poiché i token reCAPTCHA vengono utilizzati una sola volta.
Versione 9 del Web
```
recaptchaVerifier.clear();
```
Versione 8 web
```
recaptchaVerifier.clear();
```

Una volta inviato il codice SMS, chiedi all'utente di verificare il codice:

Versione 9 del Web

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

Versione 8 web

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

Inizializza un oggetto MultiFactorAssertion con PhoneAuthCredential:

Versione 9 del Web

import { PhoneMultiFactorGenerator } from "firebase/auth";

const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

Versione 8 web

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

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

Versione 9 del Web

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

Versione 8 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 come registrare un secondo fattore:

Versione 9 del 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);
    });

Versione 8 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:

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

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

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

Versione 8 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, ad esempio OAuth, SAML o OIDC, individua l'errore dopo aver chiamato signInWithPopup() o signInWithRedirect().

Se l'utente ha diversi fattori secondari registrati, chiedigli quale utilizzare:

Versione 9 del 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 {
    // Unsupported second factor.
    // Note that only phone second factors are currently supported.
}

Versione 8 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 {
  // Unsupported second factor.
  // Note that only phone second factors are currently supported.
}

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

Versione 9 del Web

import { RecaptchaVerifier } from "firebase/auth";

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

Versione 8 web

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

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:
Versione 9 del Web
```
const phoneInfoOptions = {
    multiFactorHint: resolver.hints[selectedIndex],
    session: resolver.session
};
```
Versione 8 web
```
var phoneInfoOptions = {
  multiFactorHint: resolver.hints[selectedIndex],
  session: resolver.session
};
```

Invia un messaggio di verifica al telefono dell'utente:

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

Versione 8 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.
  })

Se la richiesta non va a buon fine, reimposta il reCAPTCHA, quindi ripeti il passaggio precedente per consentire all'utente di riprovare:
Versione 9 del Web
```
recaptchaVerifier.clear();
```
Versione 8 web
```
recaptchaVerifier.clear();
```

Una volta inviato il codice SMS, chiedi all'utente di verificare il codice:

Versione 9 del Web

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

Versione 8 web

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

Inizializza un oggetto MultiFactorAssertion con PhoneAuthCredential:

Versione 9 del Web

const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

Versione 8 web

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

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

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

Versione 8 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 come accedere a un utente a più fattori:

Versione 9 del 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 {
                // Unsupported second factor.
            }
        } else if (error.code == 'auth/wrong-password') {
            // Handle other errors such as wrong password.
        }
    });

Versione 8 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 {
        // Unsupported second factor.
      }
    } else if (error.code == 'auth/wrong-password') {
      // Handle other errors such as wrong password.
    } ...
  });

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

Passaggi successivi

Gestisci gli utenti a più fattori in modo programmatico con l'SDK Admin.