L'autenticazione del telefono consente agli utenti di accedere a Firebase utilizzando il proprio telefono come autenticatore. All'utente viene inviato un messaggio SMS (utilizzando il numero di telefono fornito) contenente un codice univoco. Una volta autorizzato il codice, l'utente può 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 in tutti i servizi Google, incluso, ma non limitato a, Firebase. Gli sviluppatori devono assicurarsi di avere il consenso appropriato dell'utente finale prima di utilizzare il servizio di accesso tramite numero di telefono di autenticazione Firebase.
L'autenticazione telefonica Firebase non è supportata in tutti i paesi. Per ulteriori informazioni, consultare le domande frequenti .
Impostare
Prima di iniziare con l'autenticazione telefonica, assicurati di aver seguito questi passaggi:
- Abilita il telefono come metodo di accesso nella console Firebase .
- Android : se non hai già impostato l'hash SHA-1 della tua app nella console Firebase , fallo. Consulta Autenticazione del client per informazioni su come trovare l'hash SHA-1 della tua app.
- iOS : in Xcode, abilita le notifiche push per il tuo progetto e assicurati che la chiave di autenticazione APN sia configurata con Firebase Cloud Messaging (FCM) . Inoltre, è necessario abilitare le modalità in background per le notifiche remote. Per visualizzare una spiegazione approfondita di questo passaggio, consulta la documentazione relativa all'autenticazione del telefono iOS di Firebase .
- Web : assicurati di aver aggiunto il dominio delle applicazioni sulla console Firebase , in Domini di reindirizzamento OAuth .
Nota ; L'accesso tramite numero di telefono è disponibile solo per l'utilizzo 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 esempio Android e iOS) forniscono funzionalità diverse per la convalida di un numero di telefono rispetto al web, pertanto esistono esclusivamente due metodi 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 poi l'utente può accedere o collegare il proprio account con PhoneAuthCredential .
Per prima cosa devi chiedere all'utente il proprio 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) {},
);
Esistono 4 callback separati che devi gestire, ognuno determinerà il modo in cui aggiorni l'interfaccia utente dell'applicazione:
- verificaCompleted : gestione automatica del codice SMS sui dispositivi Android.
- verificaFailed : gestisce gli eventi di errore come numeri di telefono non validi o se la quota SMS è stata superata.
- codeSent : gestisce quando un codice è stato inviato al dispositivo da Firebase, utilizzato per richiedere agli utenti di inserire il codice.
- codeAutoRetrievalTimeout : gestisce un timeout quando la gestione automatica del codice SMS fallisce.
verificaCompletata
Questo gestore verrà chiamato solo sui 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 fornito automaticamente un PhoneAuthCredential che può essere utilizzato 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 una FirebaseAuthException a questo gestore. In questo caso, chiederesti all'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 verificationId e resendToken (un resendToken è supportato solo sui dispositivi Android, i dispositivi iOS restituiranno sempre un valore null ).
Una volta attivato, sarebbe il momento opportuno 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 un nuovo 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 reinvio all'argomento forceResendingToken . In caso di successo, il messaggio SMS verrà inviato nuovamente.
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 intervallo di tempo. Una volta trascorso l'intervallo di tempo, il dispositivo non tenterà più di risolvere i messaggi in arrivo.
Per impostazione predefinita, il dispositivo attende 30 secondi, tuttavia è possibile personalizzarlo 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 Google reCAPTCHA . Una volta confermato, verrà inviato il codice SMS.
L'SDK di autenticazione Firebase per Flutter gestirà il widget reCAPTCHA immediatamente 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 al metodo attiverà innanzitutto la visualizzazione del widget reCAPTCHA. L'utente deve completare il test prima che venga inviato un codice SMS. Una volta completato, puoi quindi far accedere l'utente fornendo il codice SMS al metodo confirm nella risposta ConfirmationResult risolta:
UserCredential userCredential = await confirmationResult.confirm('123456');
Come altri flussi di accesso, un accesso riuscito attiverà tutti i listener dello stato di autenticazione a cui hai effettuato la sottoscrizione nell'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 opzionale 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 modale a pagina intera nella parte superiore della tua applicazione.
È comunque possibile visualizzare un widget inline sul quale l'utente deve premere esplicitamente per verificarsi.
Per aggiungere un widget in linea, specifica un ID elemento DOM nell'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à reso "invisibile".
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
container: 'recaptcha',
size: RecaptchaVerifierSize.compact,
theme: RecaptchaVerifierTheme.dark,
));
Facoltativamente, puoi modificare le dimensioni e il tema personalizzando gli argomenti relativi alle size e theme come mostrato sopra.
È anche possibile ascoltare 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:
- Nella console Firebase, seleziona il provider di autenticazione "Telefono" e fai clic sul menu a discesa "Numeri di telefono per il test".
- 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 verifyPhoneNumber o signInWithPhoneNumber , non verrà effettivamente inviato alcun SMS. Puoi invece fornire il codice di test direttamente a PhoneAuthProvider o con il gestore dei risultati di conferma di signInWithPhoneNumber .