Funzionalità di autenticazione avanzata

1. Configura

Recuperare il codice sorgente

In questo codelab, inizierai con una versione quasi completa dell'app di esempio Friendly Chat, quindi la prima cosa da fare è clonare il codice sorgente:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Poi, passa alla directory security-start, in cui lavorerai per il resto di questo codelab:

$ cd codelab-friendlychat-web/security-start

Ora installa le dipendenze per poter eseguire il codice. Se la connessione a internet è lenta, l'operazione potrebbe richiedere un minuto o due:

$ npm install && (cd functions && npm install)

Scopri di più su questo repository

La directory security-solution/ contiene il codice completo dell'app di esempio. La directory security-start è quella in cui lavorerai durante il codelab e mancano alcune parti importanti dell'implementazione dell'autenticazione. I file e le funzionalità principali di security-start/ e security-solution/ sono:

• functions/index.js contiene il codice di Cloud Functions ed è qui che scriverai le funzioni di blocco dell'autenticazione.
• public/: contiene i file statici per l'app di chat
• public/scripts/main.js: dove viene compilato il codice JS dell'app di chat (src/index.js)
• src/firebase-config.js: contiene l'oggetto di configurazione Firebase utilizzato per inizializzare l'app di chat
• src/index.js: il codice JS dell'app di chat

Scarica la CLI di Firebase

Emulator Suite fa parte dell'interfaccia a riga di comando di Firebase, che può essere installata sulla tua macchina con il seguente comando:

$ npm install -g firebase-tools@latest

Crea il file JavaScript con webpack, che creerà main.js nella directory public/scripts/.

webpack build

Poi, verifica di avere l'ultima versione della CLI. Questo codelab funziona con la versione 11.14 o successive.

$ firebase --version
11.14.2

Connettersi al progetto Firebase

Crea un nuovo progetto Firebase

1. Accedi alla console Firebase utilizzando il tuo Account Google.
2. Fai clic sul pulsante per creare un nuovo progetto, quindi inserisci un nome per il progetto (ad esempio Authentication MFA Codelab).
   

   Questo nome del progetto viene utilizzato come nome visualizzato nelle interfacce Firebase e Firebase crea automaticamente un ID progetto univoco in base a questo nome. Tieni presente che ora puoi fare clic sull'icona Modifica per impostare l'ID progetto che preferisci, ma non potrai modificarlo dopo la creazione del progetto.

   Ricorda l'ID progetto perché ti servirà in seguito per identificare il tuo progetto Firebase nella CLI Firebase. Se dimentichi l'ID, puoi sempre trovarlo in un secondo momento nelle Impostazioni progetto.

3. Fai clic su Continua.
4. Se richiesto, leggi e accetta i termini di Firebase, quindi fai clic su Continua.
5. (Facoltativo) Attiva l'assistenza AI nella console Firebase (denominata "Gemini in Firebase").
6. Per questo codelab non hai bisogno di Google Analytics, quindi disattiva l'opzione Google Analytics.
7. Fai clic su Crea progetto, attendi il provisioning del progetto, poi fai clic su Continua.

Collegare il codice al progetto Firebase

Ora devi collegare questo codice al tuo progetto Firebase. Per prima cosa, esegui questo comando per accedere all'interfaccia a riga di comando di Firebase:

$ firebase login

Quindi, esegui il comando seguente per creare un alias del progetto. Sostituisci $YOUR_PROJECT_ID con l'ID del tuo progetto Firebase.

$ firebase use $YOUR_PROJECT_ID

Ora puoi eseguire l'app.

2. Esegui gli emulatori

In questa sezione eseguirai l'app in locale. Ciò significa che è il momento di avviare Emulator Suite.

Avvia gli emulatori

Dall'interno della directory di origine del codelab, esegui il seguente comando per avviare gli emulatori:

$ firebase emulators:start

L'app verrà pubblicata all'indirizzo http://127.0.0.1:5170 e il codice sorgente verrà ricompilato continuamente man mano che apporti modifiche. Per visualizzare le modifiche, dovrai solo aggiornare la pagina (ctrl+maiusc+r) localmente nel browser.

Dovresti vedere un output simile al seguente:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Quando viene visualizzato il messaggio All emulators ready (Tutti gli emulatori pronti), l'app è pronta per l'uso.

3. Implementazione di MFA

L'autenticazione a più fattori è stata implementata parzialmente in questo repository. Aggiungerai il codice per registrare prima un utente in MFA e poi per richiedere un secondo fattore agli utenti registrati in MFA.

NOTA: questi sono i metodi principali che utilizzerai per implementare l'autenticazione a più fattori:

• getMultiFactorResolver(): Ottiene un oggetto MultiFactorResolver utilizzato per facilitare l'accesso dell'utente quando deve fornire un secondo fattore
• verifyPhoneNumber(): invia un messaggio di verifica al telefono dell'utente sia per la registrazione MFA sia per l'accesso
• resolveSignIn(): utilizzato per completare l'accesso dopo che l'utente ha fornito il codice di verifica che gli è stato inviato
• enroll(): utilizzato per completare la registrazione MFA dopo che l'utente ha fornito il codice di verifica che gli è stato inviato

Nell'editor, apri il file src/index.js e trova il metodo startEnrollMultiFactor(). Aggiungi il seguente codice per configurare il programma di verifica reCAPTCHA che impedirà l'abuso del telefono (il programma di verifica reCAPTCHA è impostato su invisibile e non sarà visibile agli utenti):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Quindi, trova il metodo finishEnrollMultiFactor() e aggiungi quanto segue per registrare il secondo fattore:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

Successivamente, trova la funzione signIn e aggiungi il seguente flusso di controllo che chiede agli utenti registrati all'autenticazione a più fattori di inserire il secondo fattore:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .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") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

Il resto dell'implementazione, incluse le funzioni richiamate qui, è già stato completato. Per vedere come funzionano, sfoglia il resto del file.

4. Prova ad accedere con l'autenticazione a più fattori negli emulatori

Ora prova l'implementazione dell'MFA. Assicurati che gli emulatori siano ancora in esecuzione e visita l'app ospitata localmente all'indirizzo localhost:5170. Prova ad accedere e, quando ti viene chiesto di fornire il codice MFA, lo vedrai nella finestra del terminale.

Poiché gli emulatori supportano completamente l'autenticazione a più fattori, l'ambiente di sviluppo può essere completamente autonomo.

Per saperne di più sull'implementazione dell'autenticazione a più fattori, consulta la nostra documentazione di riferimento.

5. Creare una funzione di blocco

Alcune applicazioni sono destinate a essere utilizzate solo da un gruppo specifico di utenti. In questi casi, vuoi poter creare requisiti personalizzati per consentire a un utente di registrarsi o accedere alla tua app.

Questo è ciò che forniscono le funzioni di blocco: un modo per creare requisiti di autenticazione personalizzati. Sono Funzioni Cloud, ma a differenza della maggior parte delle funzioni, vengono eseguite in modo sincrono quando un utente tenta di registrarsi o accedere.

NOTA: una funzione di blocco può accettare un utente senza modifiche, accettare e modificare un utente, il che è utile per applicare rivendicazioni personalizzate, o rifiutare l'utente.

Esistono due eventi che possono attivare una funzione di blocco:

• Eventi beforeUserCreated: attivati prima della creazione di un account utente. Possono essere utilizzati per specificare i requisiti che gli utenti devono soddisfare per creare un account.
• Eventi beforeUserSignedIn: attivati prima dell'accesso di un utente. Possono essere utilizzati per specificare i requisiti per l'accesso degli utenti.

Per creare una funzione di blocco, apri functions/index.js nell'editor e trova la funzione beforecreated commentata.

Sostituiscilo con questo codice che consente solo agli utenti con un dominio example.com di creare un account:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Prova la funzionalità di blocco negli emulatori

Per provare la funzionalità di blocco, assicurati che gli emulatori siano in esecuzione ed esci dall'app web all'indirizzo localhost:5170.

Poi, prova a creare un account con un indirizzo email che non termina con example.com. La funzione di blocco impedirà il completamento dell'operazione.

Ora riprova con un indirizzo email che termina con example.com. L'account verrà creato correttamente.

Con le funzioni di blocco, puoi creare tutte le limitazioni necessarie per l'autenticazione. Per saperne di più, consulta la documentazione di riferimento.

Riepilogo

Ottimo lavoro! Hai aggiunto l'autenticazione a più fattori a un'app web per aiutare gli utenti a proteggere il proprio account, poi hai creato requisiti personalizzati per l'iscrizione degli utenti utilizzando le funzioni di blocco. Ti sei sicuramente guadagnato una GIF.