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

Puoi utilizzare Firebase Authentication per accedere a un utente tramite l'invio di un messaggio SMS al telefono dell'utente. L'utente accede utilizzando un codice monouso contenuto nei SMS.

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

Prima di iniziare

Se non l'hai già fatto, copia lo snippet di inizializzazione dalla Console Firebase al tuo progetto come descritto in Aggiungi Firebase al tuo progetto JavaScript.

Problemi di sicurezza

L'autenticazione basata esclusivamente su un numero di telefono, sebbene sia pratica, è meno sicura rispetto agli altri metodi disponibili, in quanto il possesso di un numero di telefono possono essere trasferite facilmente da un utente all'altro. Inoltre, sui dispositivi con più utenti profili, qualsiasi utente in grado di ricevere messaggi SMS può accedere a un account utilizzando il numero di telefono del dispositivo.

Se nella tua app usi l'accesso basato su numero di telefono, dovresti offrirlo oltre a metodi di accesso più sicuri, oltre a informare gli utenti del livello i pro e i contro dell'uso dell'accesso con numero di telefono.

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

Per accedere agli utenti tramite SMS, devi prima abilitare l'accesso tramite numero di telefono per il tuo progetto Firebase:

  1. Nella console Firebase, apri la sezione Autenticazione.
  2. Nella pagina Metodo di accesso, attiva Numero di telefono. .
  3. Nella stessa pagina, se il dominio che ospita l'app non è elencato nella Domini di reindirizzamento OAuth, aggiungi il tuo dominio. Tieni presente che localhost non è consentito come host dominio ai fini dell'autenticazione telefonica.

Configurare il verificatore reCAPTCHA

Prima di poter accedere agli utenti con i loro numeri di telefono, devi configurare Strumento di verifica reCAPTCHA di Firebase. Firebase utilizza reCAPTCHA per prevenire comportamenti illeciti, ad esempio assicurandoti che la richiesta di verifica del numero di telefono provenga da uno dei tuoi domini consentiti dell'app.

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

L'oggetto RecaptchaVerifier supporta invisibile reCAPTCHA, che spesso è in grado di verificare l'utente senza richiedere alcun utente. e il widget reCAPTCHA, che richiede sempre l'interazione dell'utente. per completare correttamente l'operazione.

Il reCAPTCHA sottostante sottoposto a rendering può essere localizzato in base alle preferenze dell'utente aggiornando il nell'istanza Auth prima di eseguire il rendering del reCAPTCHA. La localizzazione verrà applicato 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

Usa 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

Usa 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

Facoltativamente, puoi impostare le funzioni di callback nella RecaptchaVerifier oggetto che viene chiamato quando l'utente risolve reCAPTCHA o il reCAPTCHA scadono 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 del reCAPTCHA

Se vuoi eseguire il prerendering del 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, ottieni l'ID widget di reCAPTCHA, che che puoi utilizzare per effettuare chiamate 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, presenta all'utente un'interfaccia che richieda di fornire il proprio numero di telefono e poi di chiamare 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 definire aspettative per gli utenti, è bene informarli che, se utilizzano all'accesso con il telefono, potrebbero ricevere un SMS per la verifica si applicano le tariffe.

  2. Chiama il numero signInWithPhoneNumber, passando al telefono dell'utente numero e il 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 il reCAPTCHA per consentire all'utente di riprovare: 
    grecaptcha.reset(window.recaptchaWidgetId);

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

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

Accedere con il codice di verifica

Dopo che la chiamata a signInWithPhoneNumber ha esito positivo, richiedi il comando all'utente di digitare il codice di verifica ricevuto via SMS. Quindi, accedi all'utente passando il codice al metodo confirm del metodo Oggetto ConfirmationResult passato a Gestore del fulfillment di signInWithPhoneNumber, ovvero 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 ha esito positivo, l'utente viene restituito connesso.

Recupera l'oggetto AuthCredential intermedio

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

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

Quindi, puoi eseguire l'accesso dell'utente con la credenziale:

firebase.auth().signInWithCredential(credential);

Esegui test con numeri di telefono fittizi

Puoi configurare numeri di telefono fittizi per lo sviluppo tramite la console Firebase. Test con smartphone fittizio numeri offre i seguenti vantaggi:

  • Testa l'autenticazione del numero di telefono senza consumare la tua quota di utilizzo.
  • Verifica l'autenticazione del numero di telefono senza inviare un SMS effettivo.
  • Esegui test consecutivi con lo stesso numero di telefono senza essere limitato. In questo modo, il rischio di rifiuto durante la procedura di revisione dell'App Store viene ridotto al minimo se il revisore utilizza lo stesso numero di telefono per i test.
  • Esegui subito test in ambienti di sviluppo senza alcuno sforzo in più, ad esempio la possibilità di sviluppare in un simulatore iOS o in un emulatore Android senza Google Play Services.
  • Scrivere test di integrazione senza essere bloccati da controlli di sicurezza normalmente applicati su 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 che non esistono già. Firebase Authentication non consente di impostare numeri di telefono esistenti utilizzati da utenti reali come numeri di test. Un'opzione è utilizzare 555 numeri con prefisso come numeri di telefono di prova statunitensi, ad esempio: +39 338 555 3434
  2. I numeri di telefono devono essere formattati correttamente per la lunghezza e altre i vincoli. Saranno comunque sottoposti alla 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 prova difficili da indovinare e cambiare di frequente.

Crea numeri di telefono fittizi e codici di verifica

  1. Nella console Firebase, apri la nella sezione Autenticazione.
  2. Nella scheda Metodo di accesso, attiva il provider telefonico, se non l'hai ancora fatto.
  3. Apri il menu Numeri di telefono per i test di accordion.
  4. Fornisci il numero di telefono che vuoi verificare, ad esempio: +1 650-555-3434.
  5. Fornisci il codice di verifica a 6 cifre per quel numero specifico, ad esempio: 654321.
  6. Aggiungi il numero. Se serve, puoi eliminare il numero di telefono e passa il mouse sopra la riga corrispondente e fai clic sull'icona del cestino.

Test manuale

Puoi iniziare direttamente a utilizzare un numero di telefono fittizio nella tua applicazione. In questo modo, puoi eseguire test manuali durante le fasi di sviluppo senza riscontrare problemi di quota o throttling. Puoi anche eseguire il test direttamente da un simulatore iOS o un emulatore Android senza Google Play Services installato.

Quando fornisci il numero di telefono fittizio e invii il codice di verifica, non viene effettuato alcun SMS inviate. Devi invece fornire il codice di verifica configurato in precedenza per completare la firma in.

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

Un'altra opzione è impostare un ruolo di test tramite rivendicazioni su questi utenti per differenziarli come utenti falsi, nel caso in cui tu voglia limitare ulteriormente l'accesso.

Test di integrazione

Oltre ai test manuali, Firebase Authentication fornisce API per facilitare la scrittura dei test di integrazione per i test di autenticazione dello smartphone. Queste API disabilitano la verifica app disabilitando reCAPTCHA di notifica web e le notifiche push silenziose in iOS. Ciò rende possibili i test di automazione questi flussi e più facile da implementare. Inoltre, offrono la possibilità di eseguire test istantanei di verifica su Android.

Sul web, imposta appVerificationDisabledForTesting su true prima di eseguire il rendering di firebase.auth.RecaptchaVerifier. Questa operazione risolve il reCAPTCHA automaticamente, consentendoti di passare il numero di telefono senza risolverlo manualmente. Nota che, anche se reCAPTCHA è disattivato, l'utilizzo di un numero di telefono non fittizio non riuscirà completare l'accesso. Con questa API è possibile utilizzare solo numeri di telefono fittizi. 

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

var phoneNumber = "+16505554567";
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 è disabilitata:

  • reCAPTCHA visibile: quando viene eseguito il rendering del reCAPTCHA visibile tramite appVerifier.render(), si risolve automaticamente dopo una frazione di secondo in ritardo. Equivale a quando un utente fa clic sul reCAPTCHA subito dopo il rendering. Il reCAPTCHA scadrà dopo un po' di tempo e poi risolverà nuovamente automaticamente.
  • reCAPTCHA invisibile: Il reCAPTCHA invisibile non risolve automaticamente in fase di rendering, al contrario della appVerifier.verify()o quando viene raggiunto l'ancoraggio pulsante di reCAPTCHA dopo una frazione di secondo di ritardo. Analogamente, la risposta scade dopo un po' di tempo e si risolve automaticamente solo dopo la chiamata appVerifier.verify() o quando si fa di nuovo clic sull'ancora del pulsante del reCAPTCHA.

Ogni volta che un reCAPTCHA di esempio viene risolto, la funzione di callback corrispondente viene attivata come previsto. con la risposta falsa. Se viene specificato anche un callback di scadenza, 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 collegati alle credenziali, ovvero nome utente, password, numero o informazioni del provider di autenticazione, ovvero l'utente con cui ha eseguito l'accesso. Questo nuovo viene archiviato come parte del progetto Firebase e può essere utilizzato per identificare a un utente in ogni app del progetto, a prescindere da come esegue l'accesso.

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

  • In Firebase Realtime Database e Cloud Storage Regole di sicurezza, puoi ottieni l'ID utente unico dell'utente che ha eseguito l'accesso dalla variabile auth, e usarli per controllare i dati a cui un utente può accedere.

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

Per scollegare 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