Esegui l'autenticazione con Firebase con un numero di telefono utilizzando JavaScript

Puoi utilizzare Firebase Authentication per consentire l'accesso a un utente inviando un messaggio SMS al suo telefono. L'utente accede utilizzando un codice monouso contenuto nel messaggio SMS.

Il modo più semplice per aggiungere l'accesso con il numero di telefono alla tua app è utilizzare FirebaseUI, che include un widget di accesso integrato che implementa i flussi di accesso per l'accesso con il numero di telefono, nonché l'accesso federato e basato su password. Questo documento descrive come implementare un flusso di accesso con numero di telefono utilizzando l'SDK Firebase.

I numeri di telefono forniti dagli utenti finali per l'autenticazione verranno inviati e archiviati da Google per migliorare la prevenzione dello spam e dei comportamenti illeciti nei servizi Google, inclusi, a titolo esemplificativo, Firebase. Gli sviluppatori devono assicurarsi di avere il consenso dell'utente finale prima di utilizzare il servizio di accesso con numero di telefono Firebase Authentication.

Prima di iniziare

Se non l'hai ancora fatto, copia lo snippet di inizializzazione dalla console Firebase nel tuo progetto come descritto in Aggiungere Firebase al tuo progetto JavaScript.

Problemi di sicurezza

L'autenticazione che utilizza solo un numero di telefono, sebbene comoda, è meno sicura rispetto agli altri metodi disponibili, perché la proprietà di un numero di telefono può essere facilmente trasferita tra gli utenti. Inoltre, sui dispositivi con più profili utente, qualsiasi utente che può ricevere messaggi SMS può accedere a un account utilizzando il numero di telefono del dispositivo.

Se utilizzi l'accesso basato sul numero di telefono nella tua app, devi offrirlo insieme a metodi di accesso più sicuri e informare gli utenti dei compromessi in termini di sicurezza dell'utilizzo dell'accesso con il numero di telefono.

Attivare l'accesso con numero di telefono per il tuo progetto Firebase

Per consentire agli utenti di accedere tramite SMS, devi prima attivare il metodo di accesso con numero di telefono per il tuo progetto Firebase:

1. Nella Firebaseconsole, apri la sezione Autenticazione.
2. Nella pagina Metodo di accesso, attiva il metodo di accesso Numero di telefono.
3. (Facoltativo) Nella pagina Impostazioni, imposta un criterio per le regioni a cui vuoi consentire o negare l'invio di messaggi SMS. L'impostazione di una norma regionale per gli SMS può contribuire a proteggere le tue app dall'abuso di SMS.
4. Nella stessa pagina, se il dominio che ospiterà la tua app non è elencato nella sezione Domini di reindirizzamento OAuth, aggiungi il tuo dominio. Tieni presente che localhost non è consentito come dominio ospitato ai fini dell'autenticazione tramite telefono.

Configura il programma di verifica reCAPTCHA

Prima di poter accedere con i numeri di telefono degli utenti, devi configurare il sistema di verifica reCAPTCHA di Firebase. Firebase utilizza reCAPTCHA per prevenire comportamenti illeciti, ad esempio assicurandosi che la richiesta di verifica del numero di telefono provenga da uno dei domini consentiti della tua app.

Non devi configurare manualmente un client reCAPTCHA. Quando utilizzi l'oggetto RecaptchaVerifier dell'SDK Firebase, Firebase crea e gestisce automaticamente tutte le chiavi e i secret client necessari.

L'oggetto RecaptchaVerifier supporta reCAPTCHA invisibile, che spesso può verificare l'utente senza richiedere alcuna azione, nonché il widget reCAPTCHA, che richiede sempre l'interazione dell'utente per essere completato correttamente.

Il reCAPTCHA di base sottoposto a rendering può essere localizzato in base alle preferenze dell'utente aggiornando il codice lingua nell'istanza Auth prima del rendering di reCAPTCHA. La localizzazione sopra menzionata si applicherà anche al messaggio SMS inviato all'utente, contenente il codice di verifica.

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

Utilizzare reCAPTCHA invisibile

Per utilizzare un reCAPTCHA invisibile, crea un oggetto RecaptchaVerifier con il parametro size impostato su invisible, specificando l'ID del pulsante che invia il modulo di accesso. Ad esempio:

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});
auth_phone_recaptcha_verifier_invisible.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});
phone-auth.js

Utilizzare il widget reCAPTCHA

Per utilizzare il widget reCAPTCHA visibile, crea un elemento nella pagina per contenere il widget, quindi crea un oggetto RecaptchaVerifier, specificando l'ID del contenitore. Ad esempio:

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {});
auth_phone_recaptcha_verifier_simple.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
phone-auth.js

(Facoltativo) Specifica i parametri reCAPTCHA

Puoi impostare facoltativamente le funzioni di callback sull'oggetto RecaptchaVerifier che vengono chiamate quando l'utente risolve reCAPTCHA o quando reCAPTCHA scade prima che l'utente invii il modulo:

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});
auth_phone_recaptcha_verifier_visible.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});
phone-auth.js

(Facoltativo) Pre-rendering di reCAPTCHA

Se vuoi pre-renderizzare reCAPTCHA prima di inviare una richiesta di accesso, chiama render:

Web

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
auth_phone_recaptcha_render.js

Web

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
phone-auth.js

Dopo la risoluzione di render, ricevi l'ID widget di reCAPTCHA, che puoi utilizzare per effettuare chiamate all'API reCAPTCHA:

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
auth_get_recaptcha_response.js

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
phone-auth.js

Invia un codice di verifica al telefono dell'utente

Per avviare l'accesso con il numero di telefono, mostra all'utente un'interfaccia che gli chiede di fornire il proprio numero di telefono, quindi chiama signInWithPhoneNumber per richiedere a Firebase di inviare un codice di autenticazione al telefono dell'utente tramite SMS:

1. Recupera il numero di telefono dell'utente.

   I requisiti legali variano, ma come best practice e per definire le aspettative degli utenti, devi informarli che se utilizzano l'accesso con il numero di telefono, potrebbero ricevere un messaggio SMS per la verifica e si applicano tariffe standard.

2. Chiama signInWithPhoneNumber, passando il numero di telefono dell'utente e RecaptchaVerifier che hai creato in precedenza.

   Web

   import { getAuth, signInWithPhoneNumber } from "firebase/auth";
   
   const phoneNumber = getPhoneNumberFromUserInput();
   const appVerifier = window.recaptchaVerifier;
   
   const auth = getAuth();
   signInWithPhoneNumber(auth, phoneNumber, appVerifier)
       .then((confirmationResult) => {
         // SMS sent. Prompt user to type the code from the message, then sign the
         // user in with confirmationResult.confirm(code).
         window.confirmationResult = confirmationResult;
         // ...
       }).catch((error) => {
         // Error; SMS not sent
         // ...
       });
   auth_phone_signin.js

   Web

   const phoneNumber = getPhoneNumberFromUserInput();
   const appVerifier = window.recaptchaVerifier;
   firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
       .then((confirmationResult) => {
         // SMS sent. Prompt user to type the code from the message, then sign the
         // user in with confirmationResult.confirm(code).
         window.confirmationResult = confirmationResult;
         // ...
       }).catch((error) => {
         // Error; SMS not sent
         // ...
       });
   phone-auth.js

   Se signInWithPhoneNumber restituisce un errore, reimposta reCAPTCHA in modo che l'utente possa riprovare:

   grecaptcha.reset(window.recaptchaWidgetId);
   
   // Or, if you haven't stored the widget ID:
   window.recaptchaVerifier.render().then(function(widgetId) {
     grecaptcha.reset(widgetId);
   });

   Nota:consulta Firebase Authentication Limiti per i limiti di utilizzo e le quote applicabili.

Il metodo signInWithPhoneNumber invia la richiesta di verifica reCAPTCHA all'utente e, se l'utente supera la verifica, richiede a Firebase Authentication di inviare un messaggio SMS contenente un codice di verifica al telefono dell'utente.

Per evitare comportamenti illeciti, Firebase impone un limite al numero di messaggi SMS che possono essere inviati a un singolo numero di telefono in un determinato periodo di tempo. Se superi questo limite, le richieste di verifica del numero di telefono potrebbero essere limitate. Se riscontri questo problema durante lo sviluppo, utilizza un altro numero di telefono per i test o riprova a inviare la richiesta in un secondo momento.

Accedere all'utente con il codice di verifica

Dopo la chiamata a signInWithPhoneNumber, chiedi all'utente di digitare il codice di verifica ricevuto via SMS. Quindi, accedi all'utente passando il codice al metodo confirm dell'oggetto ConfirmationResult passato al gestore di fulfillment di signInWithPhoneNumber (ovvero il blocco then). Ad esempio:

Web

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});
auth_phone_verify_code.js

Web

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});
phone-auth.js

Se la chiamata a confirm è andata a buon fine, l'utente ha eseguito l'accesso.

Ottieni l'oggetto AuthCredential intermedio

Se devi ottenere un oggetto AuthCredential per l'account dell'utente, passa il codice di verifica dal risultato della conferma e il codice di verifica a PhoneAuthProvider.credential anziché chiamare confirm:

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Dopodiché, puoi accedere all'utente con le credenziali:

firebase.auth().signInWithCredential(credential);

Esegui test con numeri di telefono fittizi

Puoi configurare numeri di telefono fittizi per lo sviluppo tramite la console Firebase. I test con numeri di telefono fittizi offrono i seguenti vantaggi:

• Testa l'autenticazione del numero di telefono senza consumare la quota di utilizzo.
• Testa l'autenticazione del numero di telefono senza inviare un messaggio SMS effettivo.
• Esegui test consecutivi con lo stesso numero di telefono senza limitazioni. In questo modo si riduce al minimo il rischio di rifiuto durante la procedura di revisione dell'App Store se il revisore utilizza lo stesso numero di telefono per i test.
• Esegui test facilmente negli ambienti di sviluppo senza alcuno sforzo aggiuntivo, ad esempio la possibilità di sviluppare in un simulatore iOS o in un emulatore Android senza Google Play Services.
• Scrivi test di integrazione senza essere bloccato dai controlli di sicurezza normalmente applicati sui numeri di telefono reali in un ambiente di produzione.

I numeri di telefono fittizi devono soddisfare i seguenti requisiti:

1. Assicurati di utilizzare numeri di telefono fittizi e non esistenti. Firebase Authentication non ti consente di impostare numeri di telefono esistenti utilizzati da utenti reali come numeri di test. Un'opzione è utilizzare i numeri con prefisso 555 come numeri di telefono di test statunitensi, ad esempio: [phone]
2. I numeri di telefono devono essere formattati correttamente in base alla lunghezza e ad altri vincoli. Verrà comunque eseguita la stessa convalida del numero di telefono di un utente reale.
3. Puoi aggiungere fino a 10 numeri di telefono per lo sviluppo.
4. Utilizza numeri di telefono/codici di test difficili da indovinare e cambia quelli frequentemente.

Creare numeri di telefono e codici di verifica fittizi

1. Nella Firebaseconsole, apri la sezione Autenticazione.
2. Nella scheda Metodo di accesso, attiva il fornitore di servizi telefonici, se non l'hai già fatto.
3. Apri il menu a fisarmonica Numeri di telefono per il test.
4. Fornisci il numero di telefono che vuoi testare, ad esempio [phone].
5. Fornisci il codice di verifica di 6 cifre per quel numero specifico, ad esempio: 654321.
6. Aggiungi il numero. Se necessario, puoi eliminare il numero di telefono e il relativo codice passando il mouse sopra la riga corrispondente e facendo clic sull'icona del cestino.

Test manuale

Puoi iniziare subito a utilizzare un numero di telefono fittizio nella tua applicazione. Ciò ti consente di eseguire test manuali durante le fasi di sviluppo senza riscontrare problemi di quota o limitazione. Puoi anche eseguire il test direttamente da un simulatore iOS o da un emulatore Android senza Google Play Services installato.

Quando fornisci il numero di telefono fittizio e invii il codice di verifica, non viene inviato alcun SMS. Invece, devi fornire il codice di verifica configurato in precedenza per completare l'accesso.

Al termine dell'accesso, viene creato un utente Firebase con quel numero di telefono. L'utente ha lo stesso comportamento e le stesse proprietà di un utente con un numero di telefono reale e può accedere a Realtime Database/Cloud Firestore e ad altri servizi allo stesso modo. Il token ID creato durante questo processo ha la stessa firma di un utente con un numero di telefono reale.

Poiché il token ID per il numero di telefono fittizio ha la stessa firma di un utente con un numero di telefono reale, è importante memorizzare questi numeri in modo sicuro e riciclarli continuamente.

Un'altra opzione è impostare un ruolo di test tramite rivendicazioni personalizzate per questi utenti per differenziarli come utenti falsi se vuoi limitare ulteriormente l'accesso.

Test di integrazione

Oltre ai test manuali, Firebase Authentication fornisce API per facilitare la scrittura di test di integrazione per il test dell'autenticazione con il numero di telefono. Queste API disattivano la verifica dell'app disattivando il requisito reCAPTCHA nelle notifiche push web e silenziose in iOS. In questo modo, è possibile eseguire test di automazione in questi flussi e implementarli più facilmente. Inoltre, contribuiscono a fornire la possibilità di testare i flussi di verifica istantanea su Android.

Assicurati che la verifica dell'app non sia disattivata per le app di produzione e che non siano codificati numeri di telefono fittizi nell'app di produzione.

Sul web, imposta appVerificationDisabledForTesting su true prima del rendering di firebase.auth.RecaptchaVerifier. In questo modo, il reCAPTCHA viene risolto automaticamente, consentendoti di superare la verifica del numero di telefono senza risolverlo manualmente. Tieni presente che, anche se reCAPTCHA è disattivato, l'utilizzo di un numero di telefono non fittizio non consentirà comunque di completare l'accesso. Con questa API possono essere utilizzati solo numeri di telefono fittizi.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "[phone]";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

I verificatori di app reCAPTCHA simulati visibili e invisibili si comportano in modo diverso quando la verifica dell'app è disattivata:

• reCAPTCHA visibile: quando il reCAPTCHA visibile viene visualizzato tramite appVerifier.render(), si risolve automaticamente dopo un ritardo di una frazione di secondo. Equivale a un utente che fa clic su reCAPTCHA immediatamente dopo il rendering. La risposta reCAPTCHA scadrà dopo un po' di tempo e verrà risolta automaticamente di nuovo.
• reCAPTCHA invisibile: reCAPTCHA invisibile non si risolve automaticamente durante il rendering, ma lo fa alla chiamata appVerifier.verify() o quando si fa clic sull'ancora del pulsante di reCAPTCHA dopo un ritardo di una frazione di secondo. Allo stesso modo, la risposta scadrà dopo un po' e si risolverà automaticamente solo dopo la chiamata appVerifier.verify() o quando viene fatto di nuovo clic sull'ancora del pulsante di reCAPTCHA.

Ogni volta che viene risolto un reCAPTCHA simulato, la funzione di callback corrispondente viene attivata come previsto con la risposta fittizia. Se viene specificato anche un callback di scadenza, questo verrà attivato alla scadenza.

Passaggi successivi

Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del fornitore di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene memorizzato come parte del tuo progetto Firebase e può essere utilizzato per identificare un utente in ogni app del tuo progetto, indipendentemente dalla modalità di accesso.

• Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un observer sull'oggetto Auth. Puoi quindi ottenere le informazioni di base del profilo dell'utente dall'oggetto User. Vedi Gestire gli utenti.

• Nelle regole di sicurezza di Firebase Realtime Database e Cloud Storage, puoi ottenere l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile auth e utilizzarlo per controllare a quali dati può accedere un utente.

Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.

Per disconnettere un utente, chiama signOut:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js