Funzionalità di autenticazione avanzata

1. Configura

Ottieni 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

Quindi, vai alla directory security-start, dove 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 paio di minuti:

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

Scopri questo repository

La directory security-solution/ contiene il codice completo dell'app di esempio. La directory security-start è quella in cui lavorerai nel codelab e mancano alcune parti importanti dell'implementazione dell'autenticazione. I file e le funzionalità principali in 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: la destinazione del 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

Ottieni l'interfaccia a riga di comando di Firebase

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

$ npm install -g firebase-tools@latest

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

webpack build

Successivamente, verifica di avere la versione più recente della CLI. Questo codelab è compatibile con la versione 11.14 o successive.

$ firebase --version
11.14.2

Eseguire la connessione al progetto Firebase

Se non hai un progetto Firebase, crea un nuovo progetto Firebase nella Console Firebase. Prendi nota dell'ID progetto scelto, ti servirà più avanti.

Ora devi collegare questo codice al tuo progetto Firebase. Innanzitutto, esegui il seguente 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 localmente. Ciò significa che è il momento di avviare la suite di emulatori.

Avvia gli emulatori

Dalla 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à ricostruito continuamente man mano che apporti modifiche. Per visualizzare le modifiche, dovrai solo eseguire un aggiornamento forzato (Ctrl+Maiusc+R) localmente nel browser.

L'output dovrebbe essere 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 Tutti gli emulatori sono pronti, l'app è pronta per l'uso.

3. Implementazione dell'MFA

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

NOTA: questi sono i metodi principali che utilizzerai per implementare la verifica in due passaggi:

• getMultiFactorResolver(): recupera un oggetto MultiFactorResolver utilizzato per facilitare l'accesso degli utenti quando devono fornire un secondo fattore
• verifyPhoneNumber(): invia un messaggio di verifica allo smartphone dell'utente sia per la registrazione che per l'accesso con l'MFA
• 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 all'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 verificatore reCAPTCHA che impedirà gli abusi telefonici (il verificatore reCAPTCHA è impostato su invisibile e non sarà visibile agli utenti):

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

Quindi, individua 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;
}

Poi, individua la funzione signIn e aggiungi il seguente flusso di controllo che chiede agli utenti registrati all'MFA 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à completato. Per scoprire come funzionano, sfoglia il resto del file.

4. Prova ad accedere con l'MFA 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, vedrai il codice MFA nella finestra del terminale.

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

Per scoprire di più sull'implementazione dell'MFA, consulta la nostra documentazione di riferimento.

5. Creare una funzione di blocco

Alcune applicazioni sono destinate all'utilizzo solo da parte di un gruppo specifico di utenti. In questi casi, devi essere in grado di creare requisiti personalizzati per la registrazione o l'accesso di un utente alla tua app.

Questo è ciò che forniscono le funzioni di blocco: un modo per creare requisiti di autenticazione personalizzati. Si tratta di 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 (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 per la creazione di un account da parte degli utenti
• Eventi beforeUserSignedIn: attivati prima che un utente acceda. 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 di creare un account solo agli utenti con un dominio example.com:

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 funzione di blocco negli emulatori

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

Quindi, prova a creare un account con un indirizzo email che non termina con example.com. La funzione di blocco impedirà il buon esito 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 le limitazioni necessarie per l'autenticazione. Per saperne di più, consulta la documentazione di riferimento.

Riepilogo

Ottimo! Hai aggiunto l'autenticazione a più fattori a un'app web per aiutare gli utenti a proteggere il proprio account e poi hai creato requisiti personalizzati per la registrazione utilizzando funzioni di blocco. Ti meriti sicuramente una GIF.