Comprendere l'autenticazione biometrica nelle moderne applicazioni mobili

Grazie all'utilizzo di caratteristiche biologiche uniche, come impronte digitali, caratteristiche facciali o iris, gli app possono verificare l'identità con alta precisione e convenienza. React Native, con la sua flessibilità multipiattaforma, consente agli sviluppatori di integrare queste funzionalità in modo efficiente attraverso iOS e Android utilizzando un unico codice base.

Che cosa è l'autenticazione biometrica?

L'autenticazione biometrica si basa sulle caratteristiche fisiologiche misurabili che sono in gran parte uniche per ogni individuo. I metodi più comuni nelle applicazioni mobili includono:

  • Riconoscimento impronte[[] – Scansiona i pattern di cresta attraverso sensori capacitivi o ottici.
  • Riconoscimento facciale[[] – Utilizza la fotocamera frontale per mappare la geometria del viso (ad esempio, Apple Face ID, Android Face Slock).
  • Iris scansione[] – Meno comune ma disponibile su alcuni dispositivi Android di fascia alta; scandisce l'iride per alta precisione.

I sensori di impronte digitali sono veloci e affidabili in qualsiasi illuminazione, ma possono essere influenzati da dita bagnate o sporche. Il riconoscimento facciale è conveniente ma può lottare con maschere o angoli estremi. Per la maggior parte delle applicazioni di consumo, combinando impronte digitali e sblocchi facciali fornisce la copertura più ampia del dispositivo.

Il caso di affari per il login biometrico

Secondo gli studi, le applicazioni con login biometrico vedono fino a un aumento del 35% del re-engagement perché gli utenti non hanno più bisogno di ricordare le password complesse. Banking, sanità e applicazioni aziendali particolarmente beneficio perché biometrics ridurre il rischio di furto di credenziali, mantenendo una user experience liscia.

Impostazione dell'autenticazione biometrica in React Native

React Native non include un API biometrica integrata, quindi gli sviluppatori si affidano alle librerie della comunità. Le opzioni più popolari e mantenute sono:

  • react-native-biometrics[[] – Una libreria leggera e ben documentata che supporta l'impronta digitale e il riconoscimento facciale su entrambe le piattaforme.
  • expo-local-autenticication[[] – Ideale per progetti gestiti da Expo; offre un API simile ma dipende dall'SDK di Expo.
  • react-native-keychain[[] – Si concentra sullo storage sicuro ma include helper di sbloccaggio biometrico.

Per la maggior parte delle applicazioni React Native (senza Expo), react-native-biometrics[] è la scelta consigliata a causa della sua stabilità e manutenzione attiva.

Installazione della Biblioteca

Installare via npm o filato:

npm install react-native-biometrics
yarn add react-native-biometrics

Per React Native 0.60 e versioni successive, il collegamento automatico aggiungerà automaticamente i moduli nativi. Se si utilizza React Native 0.59 o inferiore, è necessario collegare il pacchetto manualmente:

react-native link react-native-biometrics

Configurazione delle autorizzazioni

Ogni piattaforma richiede autorizzazioni specifiche nei file manifest.

Android

Aggiungi il seguente a all'interno del tag:

<uses-permission android:name="android.permission.USE_BIOMETRIC" />

Si noti che a partire da Android 9 (livello API 28), si potrebbe anche bisogno di:[
] [] per i dispositivi più vecchi. Il permesso copre sia l'impronta digitale e lo sblocco del viso, quindi è la scelta preferita.

iOS

Apri e aggiungi una descrizione per l'utilizzo Face ID:

<key>NSFaceIDUsageDescription</key>
<string>This app uses Face ID to securely authenticate you.</string>

Se ometti questa chiave, il prompt Face ID non apparirà e la chiamata fallirà silenziosamente. Per le applicazioni che supportano Touch ID su iPhone più vecchi, non è necessario alcun tasto aggiuntivo.

Realizzazione di autenticità Logica

Con la libreria installata e le autorizzazioni impostate, è ora possibile costruire il flusso di autenticazione. Di seguito è un esempio ampliato che include il controllo del sensore, il failback per passarecode su iOS e la gestione completa degli errori.

Passo 1: Controllare la disponibilità del sensore

Prima di mostrare il pulsante biometrico, verificare sempre che il dispositivo supporti la biometrica. Il metodo restituisce una promessa con informazioni sul tipo di sensore disponibile.

import ReactNativeBiometrics from 'react-native-biometrics';

const checkBiometricAvailability = async () => {
 try {
 const { available, biometryType } = await ReactNativeBiometrics.isSensorAvailable();
 if (available) {
 // biometryType can be 'TouchID', 'FaceID', 'Biometrics' (Android)
 console.log(`Biometric sensor available: ${biometryType}`);
 return { available, biometryType };
 } else {
 console.log('Biometric sensor not available');
 return { available: false, biometryType: null };
 }
 } catch (error) {
 console.error('Error checking sensor:', error);
 return { available: false, biometryType: null };
 }
};

Passo 2: Prompt l'utente

Usa per attivare la finestra di dialogo biometrica del sistema. Su iOS, verrà visualizzato Face ID o Touch ID; su Android, il sistema utilizzerà il miglior biometrico disponibile (impronta digitale o faccia).

const authenticateWithBiometrics = async () => {
 try {
 const { success, error } = await ReactNativeBiometrics.simplePrompt({
 promptMessage: 'Authenticate to continue',
 cancelButtonText: 'Cancel',
 });
 if (success) {
 return true;
 } else {
 // User cancelled or failed
 if (error) console.warn('Biometric prompt error:', error);
 return false;
 }
 } catch (e) {
 console.error('Biometric auth exception:', e);
 return false;
 }
};

Passo 3: Componente completo con Fallback

Combina le funzioni di cui sopra in un componente che mostra un pulsante biometrico, e se l'utente annulla o non riesce, torna a un ingresso di password.

import React, { useState, useEffect } from 'react';
import { View, Button, Text, TextInput, Alert } from 'react-native';
import ReactNativeBiometrics from 'react-native-biometrics';

const AuthScreen = () => {
 const [authenticated, setAuthenticated] = useState(false);
 const [biometricAvailable, setBiometricAvailable] = useState(false);
 const [showPasswordField, setShowPasswordField] = useState(false);
 const [password, setPassword] = useState('');

 useEffect(() => {
 (async () => {
 const { available } = await checkBiometricAvailability();
 setBiometricAvailable(available);
 })();
 }, []);

 const handleBiometricLogin = async () => {
 const success = await authenticateWithBiometrics();
 if (success) {
 setAuthenticated(true);
 } else {
 setShowPasswordField(true);
 Alert.alert('Biometric failed', 'Please use your password as a fallback.');
 }
 };

 const handlePasswordLogin = () => {
 // Verify against stored password hash (example only)
 if (password === 'correctpassword') {
 setAuthenticated(true);
 } else {
 Alert.alert('Error', 'Incorrect password.');
 }
 };

 return (
 
 {!authenticated ? (
 <>
 {biometricAvailable && (

Migliori Pratiche per l'implementazione di produzione-Ready

Gestione degli errori e feedback degli utenti

L'autenticazione biometrica può fallire per molti motivi: sensore sporco, scarsa luce, utente annullato o errore di livello di sistema. Cattura sempre le eccezioni e fornisce un messaggio chiaro e leggibile dall'uomo. Evitare di visualizzare i codici di errore grezzi agli utenti.

Su iOS, se l'utente non riesce a controllare l'autenticazione biometrica tre volte, il dispositivo può bloccare il sensore biometrico e richiedere il codice di accesso. La tua app dovrebbe rilevare questo controllando il tipo di errore e spingendo l'utente a inserire il codice di accesso del dispositivo. La libreria non supporta direttamente il failback dei codici a barre; potrebbe essere necessario utilizzare moduli nativi o il framework per un'esperienza senza soluzione di continuità.

Meccanismi di autenticazione a caduta

Ogni implementazione deve supportare un metodo di fallback, ovvero una password, un PIN o un modello, che è fondamentale perché:

  • Alcuni dispositivi non hanno sensori biometrici (modelli di anziani, tablet).
  • Gli utenti possono non essere in grado di utilizzare biometria a causa di condizioni temporanee (bande, dita bagnate, trucco pesante).
  • Le impostazioni del sistema possono disattivare la biometria (ad esempio, dopo il riavvio o dopo un lungo periodo senza l'uso).
  • I requisiti normativi (come PSD2 in Europa) richiedono un secondo fattore.

Conservare le password utilizzando un hash salato (ad esempio, bcrypt) sul server, o utilizzare l'enclave sicura del dispositivo tramite React Native Keychain per l'autenticazione locale.

Considerazioni sulla sicurezza e sulla privacy

I dati biometrici sono estremamente sensibili. Il Progetto OWASP per la Sicurezza Mobile sottolinea le seguenti regole:

  1. Non memorizzare dati biometrici grezzi sul server[] – Il sistema operativo memorizza questi dati in un enclave sicuro isolato e restituisce solo un risultato di successo / fatica.
  2. Non trasmettere informazioni biometriche sulla rete[[] – L'autenticazione biometrica deve avvenire localmente sul dispositivo.
  3. Utilizza la crittografia per lo storage locale[[] – Se si memorizza un token di login dopo il successo biometrico, memorizzarlo nella Keychain (iOS) o EncryptedSharedPreferences (Android) utilizzando il tastiere biometrico protetto del dispositivo.
  4. L'applicazione della velocità limitante[[] – Per prevenire attacchi di forza bruta sulle password di ricaduta, aggiungere il backoff esponenziale dopo ripetuti fallimenti.

Consistenza della forma trasversale

Mentre React Native astratti la maggior parte delle differenze, essere consapevoli del comportamento specifico della piattaforma:

  • iOS] – Face ID funziona solo in orientamento verticale. Touch ID ha un'interfaccia utente diversa. Il sistema memorizza il successo biometrico per un breve periodo (configurabile tramite ).
  • Android[] – Il prompt biometrico richiede che l'app sia in primo piano. Su alcuni dispositivi OEM (come alcuni modelli Samsung), la biometrica multimodale (impronta digitale + faccia) può comportarsi in modo inconsistente.

Emulatori spesso simulano i sensori biometrici in modo negativo (ad esempio, il simulatore iOS restituisce sempre il successo). Utilizzare laboratori di dispositivo o servizi di test cloud come BrowserStack per i test di reale dispositivo.

Performance e esperienza utente

I suggerimenti biometrici dovrebbero sentirsi istantanei. La biblioteca completa normalmente in meno di 300 ms su dispositivi moderni.

  • Chiama una volta che l'app lancia o lo schermo monta, non ogni volta che l'utente tocca il pulsante.
  • Preferire un login "one-tap": combinare l'autenticazione biometrica con l'acquisizione di un token di sessione memorizzato da archiviazione sicura, in modo che l'utente si imbatte automaticamente dopo il successo.
  • Fornisci feedback visivo prima e dopo il prompt (ad esempio, cambia lo stato del pulsante, mostra un girante di carico).
  • Non oscurare il prompt con sovrapposizioni – la finestra di dialogo del sistema è modale e non deve essere interrotta.

Considerazioni avanzate

Integrazione dell'autenticazione biometrica con i servizi backend

Molte applicazioni hanno bisogno di autenticare gli utenti contro un backend API. Il flusso tipico è:

  1. L'utente ritorna al login della password (prima volta o dopo la scadenza del gettone).
  2. Conservare il gettone nella conservazione sicura del dispositivo protetto da biometri (ad esempio, con sicurezza biometrica).
  3. Nei successivi lanci, il prompt per la biometrica; se successo, recuperare il token e usarlo per chiamare l'API.

Le impostazioni più avanzate utilizzano la crittografia a chiave pubblica: il dispositivo genera una coppia chiave, memorizza la chiave privata nella key store biometrica e registra la chiave pubblica con il server. In seguito, l'applicazione segna una sfida con la chiave privata dopo la verifica biometrica, dimostrando l'identità senza mai condividere segreti. La libreria supporta questo tramite il e [[FLT] metodi di combinazione locali

// Example: generating biometric-protected key pair (Android/iOS)
import { createKeys, sign } from 'react-native-biometrics';

const registerKey = async () => {
 const { publicKey } = await createKeys();
 // Send publicKey to your server
};

const signChallenge = async (challenge) => {
 const { signature } = await sign(challenge);
 // Send signature to server for verification
};

Combinazione di modalità Biometriche multiple

Alcuni dispositivi supportano sia l'impronta digitale che il riconoscimento facciale. La libreria restituisce solo il sensore di massima priorità. Per offrire una scelta, è possibile che sia necessario utilizzare moduli nativi o rilevare il tipo di sensore e presentare l'interfaccia utente appropriata. In pratica, fare affidamento sul prompt del sistema è più semplice e più facile da usare, il sistema operativo utilizza automaticamente il miglior biometrico disponibile.

Considerazioni legali e di conformità

Quando si attuano biometrie, si consideri una regolamentazione:

  • GDPR (EU)[] – I dati biometrici sono considerati dati personali sensibili. È necessario ottenere un consenso esplicito e consentire agli utenti di revocare il consenso facilmente.
  • CCPA (California)[] – Richiede la divulgazione delle pratiche di raccolta dei dati e il diritto di optare.
  • iOS Face ID linee guida[[] – Apple richiede che l'uso Face ID sia descritto nel e che non lo usi per il marketing o la sorveglianza.
  • Android BiometricManager[[] – I mandati API di Google che le applicazioni che utilizzano biometrici per l'autenticazione devono anche fornire un fallback delle credenziali del dispositivo (PIN, modello, password).

Consultare il team legale per garantire la privacy policy della tua app e i flussi di consenso degli utenti sono conformi.

Test di autenticazione biometrica

Testare le caratteristiche biometriche può essere difficile perché gli emulatori spesso mancano di sensori reali.

  • Test di unità[[] – Inserire il modulo per verificare la logica dei componenti (ad esempio, i cambiamenti di stato corretti sul successo/fallimento).
  • I test di integrità[[] – Utilizzare Detox o Appium su dispositivi reali. È possibile automatizzare i prompt biometrici tramite comandi specifici per dispositivi (ad esempio, per l'emulazione delle impronte digitali Android).
  • Prove pratiche[] – Test su una varietà di telefoni, soprattutto dispositivi Android di fascia media dove la qualità del sensore varia.
  • Casi di emergenza[] – Test senza sensore biometrico, sensore bloccato dopo troppi guasti, e quando l'utente declina la finestra di dialogo.

Per i dispositivi fisici iOS, utilizzare la funzione di registrazione biometrica del Simulatore (Impostazioni – Face ID & Passcode – Iscrizioni) ma notare che Face ID simulato riesce sempre al primo tentativo.

Conclusioni

Integrando l'autenticazione biometrica nella tua app React Native migliora notevolmente sia la sicurezza che l'esperienza degli utenti. Grazie a librerie come , puoi aggiungere impronte digitali e riconoscimento facciale con un minimo sforzo, mantenendo le regole e le best practice specifiche della piattaforma.

Per ulteriori informazioni, consultare le seguenti risorse: