Autenticazione con Firebase con un numero di telefono utilizzando JavaScript,Autenticazione con Firebase con un numero di telefono utilizzando JavaScript

Puoi utilizzare Firebase Authentication per accedere a un utente inviando un messaggio SMS al telefono dell'utente. L'utente accede utilizzando un codice monouso contenuto nel messaggio SMS.

Il modo più semplice per aggiungere l'accesso tramite numero di telefono alla tua app consiste nell'utilizzare FirebaseUI , che include un widget di accesso drop-in che implementa i flussi di accesso per l'accesso tramite numero di telefono, nonché l'accesso basato su password e federato -In. 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 Aggiungere Firebase al tuo progetto JavaScript .

Problemi di sicurezza

L'autenticazione utilizzando solo un numero di telefono, sebbene conveniente, è meno sicura rispetto agli altri metodi disponibili, poiché il possesso di un numero di telefono può essere facilmente trasferito tra gli utenti. Inoltre, sui dispositivi con più profili utente, qualsiasi utente in grado di 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, dovresti offrirlo insieme a metodi di accesso più sicuri e informare gli utenti dei compromessi di sicurezza dell'utilizzo dell'accesso tramite numero di telefono.

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

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

  1. Nella console Firebase , apri la sezione Autenticazione .
  2. Nella pagina Metodo di accesso abilitare il metodo di accesso tramite numero di telefono .
  3. Nella stessa pagina, se il dominio che ospiterà la tua app non è elencato nella sezione dei domini di reindirizzamento OAuth , aggiungi il tuo dominio.

La quota di richieste di accesso al numero di telefono di Firebase è sufficientemente elevata da non influire sulla maggior parte delle app. Tuttavia, se devi far accedere un volume molto elevato di utenti con l'autenticazione telefonica, potrebbe essere necessario aggiornare il tuo piano tariffario. Consulta la pagina dei prezzi .

Imposta il verificatore reCAPTCHA

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

Non è necessario configurare manualmente un client reCAPTCHA; quando utilizzi l'oggetto RecaptchaVerifier dell'SDK di Firebase, Firebase crea e gestisce automaticamente tutte le chiavi e i segreti client necessari.

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

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

Web modular API

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 namespaced API

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. Per esempio:

Web modular API

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 namespaced API

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

Utilizza il widget reCAPTCHA

Per utilizzare il widget reCAPTCHA visibile, crea un elemento sulla tua pagina per contenere il widget, quindi crea un oggetto RecaptchaVerifier , specificando l'ID del contenitore quando lo fai. Per esempio:

Web modular API

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

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

Web namespaced API

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

Facoltativo: specificare i parametri reCAPTCHA

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

Web modular API

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 namespaced API

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: eseguire il pre-rendering di reCAPTCHA

Se desideri eseguire il pre-rendering di reCAPTCHA prima di inviare una richiesta di accesso, chiama render :

Web modular API

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

Web namespaced API

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

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

Web modular API

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

Web namespaced API

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

Invia un codice di verifica al telefono dell'utente

Per avviare l'accesso tramite numero di telefono, presenta all'utente un'interfaccia che richiede 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. Ottenere il numero di telefono dell'utente.

    I requisiti legali variano, ma come best practice e per impostare le aspettative per i tuoi utenti, dovresti informarli che se utilizzano l'accesso telefonico, potrebbero ricevere un messaggio SMS per la verifica e si applicano le tariffe standard.

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

    Web modular API

    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 namespaced API

    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 genera 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);
});

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

Accedi come utente con il codice di verifica

Dopo che la chiamata a signInWithPhoneNumber ha avuto esito positivo, chiedi all'utente di digitare il codice di verifica ricevuto tramite SMS. Quindi, accedi all'utente passando il codice al metodo confirm dell'oggetto ConfirmationResult che è stato passato al gestore di evasione signInWithPhoneNumber (ovvero, il suo blocco then ). Per esempio:

Web modular API

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 namespaced API

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 di confirm è andata a buon fine, l'utente ha eseguito correttamente 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 invece di chiamare confirm :

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

Quindi, puoi accedere all'utente con le credenziali:

firebase.auth().signInWithCredential(credential);

Test con numeri di telefono fittizi

Puoi impostare numeri di telefono fittizi per lo sviluppo tramite la console Firebase. Il test con numeri di telefono fittizi offre i seguenti vantaggi:

  • Prova l'autenticazione del numero di telefono senza consumare la tua quota di utilizzo.
  • Prova l'autenticazione del numero di telefono senza inviare un vero messaggio SMS.
  • Esegui test consecutivi con lo stesso numero di telefono senza subire limitazioni. Ciò riduce al minimo il rischio di rifiuto durante il processo di revisione dell'App Store se il revisore utilizza lo stesso numero di telefono per il test.
  • Testa facilmente in ambienti di sviluppo senza alcuno sforzo aggiuntivo, come la possibilità di sviluppare in un simulatore iOS o un emulatore Android senza Google Play Services.
  • Scrivi test di integrazione senza essere bloccato dai controlli di sicurezza normalmente applicati ai numeri di telefono reali in un ambiente di produzione.

I numeri di telefono fittizi devono soddisfare questi requisiti:

  1. Assicurati di utilizzare numeri di telefono che siano davvero fittizi e che non esistano già. Firebase Authentication non consente di impostare i numeri di telefono esistenti utilizzati da utenti reali come numeri di prova. Un'opzione consiste nell'utilizzare i numeri con prefisso 555 come numeri di telefono di prova negli Stati Uniti, ad esempio: +1 650-555-3434
  2. I numeri di telefono devono essere formattati correttamente per la lunghezza e altri vincoli. Passeranno comunque attraverso la stessa convalida del numero di telefono di un utente reale.
  3. Puoi aggiungere fino a 10 numeri di telefono per lo sviluppo.
  4. Utilizzare numeri di telefono/codici di prova difficili da indovinare e modificarli frequentemente.

Crea numeri di telefono fittizi e codici di verifica

  1. Nella console Firebase , apri la sezione Autenticazione .
  2. Nella scheda Metodo di accesso , abilita il Gestore telefonico se non l'hai già fatto.
  3. Apri il menu Numeri di telefono per testare la fisarmonica.
  4. Fornisci il numero di telefono che desideri testare, 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 ce n'è bisogno, puoi eliminare il numero di telefono e il suo codice passando con il mouse sopra la riga corrispondente e facendo clic sull'icona del cestino.

Test manuale

Puoi iniziare direttamente a utilizzare un numero di telefono fittizio nella tua applicazione. Ciò consente di eseguire test manuali durante le fasi di sviluppo senza incorrere in problemi di quota o limitazione. Puoi anche testare 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 inviato alcun SMS effettivo. Devi invece fornire il codice di verifica configurato in precedenza per completare l'accesso.

Al completamento 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 numero di telefono reale e può accedere a Realtime Database/Cloud Firestore e ad altri servizi allo stesso modo. Il token ID coniato durante questo processo ha la stessa firma di un utente con numero di telefono reale.

Un'altra opzione consiste nell'impostare un ruolo di test tramite attestazioni personalizzate su questi utenti per differenziarli come utenti falsi se si desidera limitare ulteriormente l'accesso.

Test d'integrazione

Oltre ai test manuali, Firebase Authentication fornisce API per aiutare a scrivere test di integrazione per i test di autenticazione del telefono. Queste API disabilitano la verifica dell'app disabilitando il requisito reCAPTCHA nel web e le notifiche push silenziose in iOS. Ciò rende possibile il test di automazione in questi flussi e più facile da implementare. Inoltre, aiutano a fornire la possibilità di testare i flussi di verifica istantanea su Android.

Sul Web, imposta appVerificationDisabledForTesting su true prima di eseguire il rendering di firebase.auth.RecaptchaVerifier . Questo risolve automaticamente il reCAPTCHA, permettendoti di passare il numero di telefono senza risolverlo manualmente. Tieni presente che anche se reCAPTCHA è disabilitato, l'utilizzo di un numero di telefono non fittizio non consentirà comunque di 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 mock reCAPTCHA visibili e invisibili si comportano in modo diverso quando la verifica dell'app è disabilitata:

  • Visible reCAPTCHA : quando il reCAPTCHA visibile viene visualizzato tramite appVerifier.render() , si risolve automaticamente dopo una frazione di secondo di ritardo. Ciò equivale a un utente che fa clic su reCAPTCHA immediatamente dopo il rendering. La risposta reCAPTCHA scadrà dopo un po' di tempo e poi si risolverà di nuovo automaticamente.
  • Invisible reCAPTCHA : Il reCAPTCHA invisibile non si risolve automaticamente durante il rendering e invece lo fa sulla chiamata appVerifier.verify() o quando si fa clic sull'ancora del pulsante di reCAPTCHA dopo una frazione di secondo di ritardo. Allo stesso modo, la risposta scadrà dopo un po' di tempo e si risolverà automaticamente solo dopo la chiamata appVerifier.verify() o quando si fa nuovamente clic sull'ancora del pulsante di reCAPTCHA.

Ogni volta che un finto reCAPTCHA viene risolto, la funzione di callback corrispondente viene attivata come previsto con la risposta fasulla. Se viene specificato anche un callback di scadenza, si attiverà alla scadenza.

Prossimi passi

Dopo che un utente ha effettuato 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 sul provider di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene archiviato 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 dell'utente.

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

  • In Firebase Realtime Database and Cloud Storage Security Rules , 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 modular API

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 namespaced API

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