Questa pagina è stata tradotta dall'API Cloud Translation.

Funzionalità di autenticazione avanzate

1. Configurazione

Ottieni il codice sorgente

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

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

Quindi, passa alla directory security-start , dove lavorerai per il resto di questo codelab:

$ cd codelab-friendlychat-web/security-start

Ora installa le dipendenze in modo da poter eseguire il codice. Se la tua connessione Internet è più lenta, l'operazione potrebbe richiedere un minuto o due:

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

Conosci questo repository

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

functions/index.js contiene il codice Cloud Functions ed è qui che scriverai le funzioni di blocco dell'autenticazione.
public/ - contiene i file statici per la tua app di chat
public/scripts/main.js - dove è 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

Ottieni la CLI Firebase

Emulator Suite fa parte della CLI Firebase (interfaccia della riga di comando), che può essere installata sul tuo computer con il seguente comando:

$ npm install -g firebase-tools@latest

Costruisci il javascript con webpack, che creerà main.js all'interno della directory public/scripts/.

webpack build

Successivamente, conferma di avere la versione più recente della CLI. Questo codelab funziona con la versione 11.14 o successiva.

$ firebase --version
11.14.2

Connettiti al tuo progetto Firebase

Se non disponi di un progetto Firebase, nella console Firebase crea un nuovo progetto Firebase. Prendi nota dell'ID progetto che scegli, poiché ti servirà in seguito.

Ora devi collegare questo codice al tuo progetto Firebase. Per prima cosa esegui il comando seguente per accedere alla CLI Firebase:

$ firebase login

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

$ firebase use $YOUR_PROJECT_ID

Ora sei pronto per eseguire l'app!

2. Eseguire gli emulatori

In questa sezione eseguirai l'app localmente. Ciò significa che è ora di avviare Emulator Suite.

Avvia gli emulatori

Dall'interno della directory dei sorgenti codelab, esegui il comando seguente per avviare gli emulatori:

$ firebase emulators:start

Questo servirà la tua app all'indirizzo http://127.0.0.1:5170 e ricostruirà continuamente il tuo codice sorgente mentre apporti modifiche. Dovrai solo aggiornare manualmente (ctrl-shift-r) localmente nel tuo browser per vedere le modifiche.

Dovresti vedere un output come questo:

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

Una volta visualizzato il messaggio Tutti gli emulatori sono pronti , l'app è pronta per l'uso.

3. Attuazione dell'AMF

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

Nel tuo editor, apri il file src/index.js e trova il metodo startEnrollMultiFactor() . Aggiungi il seguente codice per impostare il verificatore reCAPTCHA che impedirà l'abuso del telefono (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, 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 richiede agli utenti iscritti a 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, comprese le funzioni qui richiamate, è già completo. Per vedere come funzionano, sfoglia il resto del file.

4. Prova ad accedere con MFA negli emulatori

Ora prova l'implementazione dell'MFA! Assicurati che i tuoi emulatori siano ancora in esecuzione e visita l'app ospitata localmente su localhost:5170 . Prova ad accedere e quando ti viene richiesto di fornire il codice MFA, vedrai il codice MFA nella finestra del terminale.

Poiché gli emulatori supportano completamente Multi-Factor Auth, il tuo ambiente di sviluppo può essere completamente autonomo.

Per ulteriori informazioni sull'implementazione dell'MFA, consulta i nostri documenti di riferimento .

5. Creare una funzione di blocco

Alcune applicazioni sono pensate per essere utilizzate solo da un gruppo specifico di utenti. In questi casi, vuoi essere in grado di creare requisiti personalizzati affinché un utente possa 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.

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

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

Per provare la funzione di blocco, assicurati che i tuoi emulatori siano in esecuzione e, nell'app Web su localhost:5170 , esci.

Quindi, prova a creare un account con un indirizzo email che non termini con example.com . La funzione di blocco impedirà il successo 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 restrizioni di cui hai bisogno riguardo all'autenticazione. Per saperne di più, consulta i documenti di riferimento .

Ricapitolare

Ottimo lavoro! Hai aggiunto l'autenticazione a più fattori a un'app Web per aiutare gli utenti a proteggere il proprio account e quindi hai creato requisiti personalizzati per consentire agli utenti di registrarsi utilizzando le funzioni di blocco. Ti sei sicuramente guadagnato una gif!

una gif di persone dell'ufficio che ballano il sollevamento del tetto