查看 2022 年 Google I/O 大会上介绍的 Firebase 新动态。了解详情

Autenticazione del telefono

L'autenticazione del telefono consente agli utenti di accedere a Firebase utilizzando il proprio telefono come autenticatore. Un messaggio SMS viene inviato all'utente (utilizzando il numero di telefono fornito) contenente un codice univoco. Una volta che il codice è stato autorizzato, l'utente è in grado di accedere a Firebase.

I numeri di telefono forniti dagli utenti finali per l'autenticazione verranno inviati e archiviati da Google per migliorare la prevenzione di spam e abusi nel servizio Google, incluso, a titolo esemplificativo, Firebase. Gli sviluppatori devono assicurarsi di disporre del consenso dell'utente finale appropriato prima di utilizzare il servizio di accesso del numero di telefono di autenticazione Firebase.authentication

L'autenticazione del telefono Firebase non è supportata in tutti i paesi. Si prega di consultare le loro FAQ per ulteriori informazioni.

Impostare

Prima di iniziare con l'autenticazione del telefono, assicurati di aver seguito questi passaggi:

  1. Abilita il telefono come metodo di accesso nella console Firebase .
  2. Android : se non hai già impostato l'hash SHA-1 della tua app nella console Firebase , fallo. Consulta Autenticazione del cliente per informazioni su come trovare l'hash SHA-1 della tua app.
  3. iOS : in Xcode, abilita le notifiche push per il tuo progetto e assicurati che la tua chiave di autenticazione APNs sia configurata con Firebase Cloud Messaging (FCM) . Per visualizzare una spiegazione approfondita di questo passaggio, consulta la documentazione di Firebase iOS Phone Auth .
  4. Web : assicurati di aver aggiunto il dominio delle applicazioni sulla console Firebase , sotto i domini di reindirizzamento OAuth .

Nota ; L'accesso al numero di telefono è disponibile solo per l'uso su dispositivi reali e sul Web. Per testare il flusso di autenticazione sugli emulatori di dispositivi, consulta Test .

Utilizzo

L'SDK di autenticazione Firebase per Flutter offre due modi individuali per accedere a un utente con il proprio numero di telefono. Le piattaforme native (ad es. Android e iOS) forniscono funzionalità diverse per la convalida di un numero di telefono rispetto al Web, pertanto esistono due metodi esclusivamente per ciascuna piattaforma:

  • Piattaforma nativa : verifyPhoneNumber .
  • Piattaforma Web : signInWithPhoneNumber .

Nativo: verifyPhoneNumber

Sulle piattaforme native, il numero di telefono dell'utente deve essere prima verificato e quindi l'utente può accedere o collegare il proprio account con una PhoneAuthCredential .

Per prima cosa devi richiedere all'utente il suo numero di telefono. Una volta fornito, chiama il metodo verifyPhoneNumber() :

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

Ci sono 4 callback separate che devi gestire, ognuna determinerà come aggiornerai l'interfaccia utente dell'applicazione:

  1. verificaCompleted : Gestione automatica del codice SMS su dispositivi Android.
  2. verificaFailed : gestisce gli eventi di errore come numeri di telefono non validi o se la quota SMS è stata superata.
  3. codeSent : Gestisce quando un codice è stato inviato al dispositivo da Firebase, utilizzato per richiedere agli utenti di inserire il codice.
  4. codeAutoRetrievalTimeout : gestisce un timeout di quando la gestione automatica del codice SMS non riesce.

verificaCompletata

Questo gestore verrà chiamato solo su dispositivi Android che supportano la risoluzione automatica del codice SMS.

Quando il codice SMS viene consegnato al dispositivo, Android verificherà automaticamente il codice SMS senza richiedere all'utente di inserirlo manualmente. Se si verifica questo evento, viene automaticamente fornita una PhoneAuthCredential che può essere utilizzata per accedere o collegare il numero di telefono dell'utente.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

verifica fallita

Se Firebase restituisce un errore, ad esempio per un numero di telefono errato o se la quota SMS per il progetto è stata superata, verrà inviata FirebaseAuthException a questo gestore. In questo caso, dovresti chiedere al tuo utente che qualcosa è andato storto a seconda del codice di errore.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

codice inviato

Quando Firebase invia un codice SMS al dispositivo, questo gestore viene attivato con un ID di verificationId e un resendToken di ripristino (un resendToken di ripristino è supportato solo sui dispositivi Android, i dispositivi iOS restituiranno sempre un valore null ).

Una volta attivato, sarebbe un buon momento per aggiornare l'interfaccia utente dell'applicazione per richiedere all'utente di inserire il codice SMS che si aspetta. Una volta inserito il codice SMS, puoi combinare l'ID di verifica con il codice SMS per creare una nuova PhoneAuthCredential :

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

Per impostazione predefinita, Firebase non invierà nuovamente un nuovo messaggio SMS se è stato inviato di recente. È tuttavia possibile ignorare questo comportamento richiamando il metodo verifyPhoneNumber con il token di rinvio all'argomento forceResendingToken . In caso di esito positivo, il messaggio SMS verrà reinviato.

codeAutoRetrievalTimeout

Sui dispositivi Android che supportano la risoluzione automatica del codice SMS, questo gestore verrà chiamato se il dispositivo non ha risolto automaticamente un messaggio SMS entro un determinato periodo di tempo. Una volta trascorso il periodo di tempo, il dispositivo non tenterà più di risolvere i messaggi in arrivo.

Per impostazione predefinita, il dispositivo attende 30 secondi, tuttavia questo può essere personalizzato con l'argomento timeout :

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

Web: signInWithPhoneNumber

Sulle piattaforme web, gli utenti possono accedere confermando di avere accesso a un telefono inserendo il codice SMS inviato al numero di telefono fornito. Per maggiore sicurezza e prevenzione dello spam, agli utenti viene richiesto di dimostrare di essere umani completando un widget reCAPTCHA di Google . Una volta confermato, verrà inviato il codice SMS.

L'SDK di autenticazione Firebase per Flutter gestirà il widget reCAPTCHA per impostazione predefinita, tuttavia fornisce il controllo su come viene visualizzato e configurato, se necessario. Per iniziare, chiama il metodo signInWithPhoneNumber con il numero di telefono.

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

La chiamata del metodo attiverà prima la visualizzazione del widget reCAPTCHA. L'utente deve completare il test prima di inviare un codice SMS. Una volta completato, è quindi possibile eseguire l'accesso dell'utente fornendo il codice SMS al metodo di confirm sulla risposta risolta ConfirmationResult :

UserCredential userCredential = await confirmationResult.confirm('123456');

Come altri flussi di accesso, un accesso riuscito attiverà tutti i listener dello stato di autenticazione che hai sottoscritto nell'intera applicazione.

Configurazione reCAPTCHA

Il widget reCAPTCHA è un flusso completamente gestito che fornisce sicurezza alla tua applicazione web.

Il secondo argomento di signInWithPhoneNumber accetta un'istanza RecaptchaVerifier facoltativa che può essere utilizzata per gestire il widget. Per impostazione predefinita, il widget verrà visualizzato come widget invisibile quando viene attivato il flusso di accesso. Un widget "invisibile" apparirà come una pagina modale intera sopra la tua applicazione.

E' comunque possibile visualizzare un widget inline che l'utente deve premere esplicitamente per verificarsi.

Per aggiungere un widget inline, specifica un ID elemento DOM all'argomento container dell'istanza RecaptchaVerifier . L'elemento deve esistere ed essere vuoto, altrimenti verrà generato un errore. Se non viene fornito alcun argomento container , il widget verrà visualizzato come "invisibile".

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

Puoi facoltativamente modificare le dimensioni e il tema personalizzando le size e gli argomenti del theme come mostrato sopra.

È anche possibile ascoltare gli eventi, ad esempio se il reCAPTCHA è stato completato dall'utente, se il reCAPTCHA è scaduto o se è stato generato un errore:

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

Test

Firebase fornisce supporto per testare localmente i numeri di telefono:

  1. Nella console Firebase, seleziona il provider di autenticazione "Telefono" e fai clic sul menu a discesa "Numeri di telefono per il test".
  2. Inserisci un nuovo numero di telefono (es. +44 7444 555666 ) e un codice di prova (es. 123456 ).

Se si fornisce un numero di telefono di prova ai metodi signInWithPhoneNumber verifyPhoneNumber non verrà effettivamente inviato alcun SMS. È invece possibile fornire il codice del test direttamente a PhoneAuthProvider o con il gestore del risultato di conferma signInWithPhoneNumber .