Biometrische Authentifizierung in modernen mobilen Apps verstehen

Die biometrische Authentifizierung ist zu einem Eckpfeiler der modernen mobilen Sicherheit geworden und bietet eine reibungslose Alternative zu Passwörtern und PINs. Durch die Verwendung einzigartiger biologischer Merkmale wie Fingerabdrücke, Gesichtsmerkmale oder Irismuster können Apps die Identität mit hoher Genauigkeit und Bequemlichkeit überprüfen. React Native ermöglicht es Entwicklern, diese Funktionen mit seiner plattformübergreifenden Flexibilität effizient über iOS und Android mit einer einzigen Codebasis zu integrieren. Dieser Artikel erweitert die Grundlagen und bietet einen produktionsbereiten Implementierungsleitfaden, der alles abdeckt von der Bibliotheksauswahl bis hin zu erweiterten Sicherheitsüberlegungen.

Was ist biometrische Authentifizierung?

Die biometrische Authentifizierung beruht auf messbaren physiologischen Eigenschaften, die für jeden Einzelnen weitgehend einzigartig sind.

  • Fingerabdruckerkennung – Scannt Gratmuster über kapazitive oder optische Sensoren.
  • Gesichtserkennung – Verwendet die nach vorne gerichtete Kamera, um die Gesichtsgeometrie abzubilden (z. B. Apple Face ID, Android’s Face Unlock).
  • Iris-Scanning – Weniger häufig, aber auf einigen High-End-Android-Geräten verfügbar; scannt die Iris auf hohe Genauigkeit.

Jede Methode hat Kompromisse. Fingerabdrucksensoren sind schnell und zuverlässig in jeder Beleuchtung, können aber durch nassen oder schmutzigen Fingern beeinflusst werden. Gesichtserkennung ist bequem, kann aber mit Masken oder extremen Winkeln zu kämpfen haben. Für die meisten Verbraucher-Apps bietet die Kombination von Fingerabdruck und Gesichtsentriegelungen die breiteste Geräteabdeckung.

Der Business Case für biometrisches Login

Das Hinzufügen biometrischer Authentifizierung verbessert direkt wichtige Metriken wie die Benutzerbindung und die Sitzungsabschlussraten. Studien zufolge erhöhen Apps mit biometrischem Login die Wiedereinbindung um bis zu 35 %, da sich Benutzer keine komplexen Passwörter mehr merken müssen. Banken-, Gesundheits- und Unternehmens-Apps profitieren besonders, weil Biometrie das Risiko von Anmeldeinformationen reduziert und gleichzeitig eine reibungslose Benutzererfahrung gewährleistet. React Native-Entwickler können diesen Vorteil nutzen, ohne separaten nativen Code für jede Plattform zu schreiben.

Biometrische Authentifizierung in React Native einrichten

React Native enthält keine integrierte biometrische API, daher verlassen sich Entwickler auf Community-Bibliotheken.

  • react-native-biometrics – Eine leichte, gut dokumentierte Bibliothek, die Fingerabdrücke und Gesichtserkennung auf beiden Plattformen unterstützt.
  • expo-local-authentication – Ideal für Expo-verwaltete Projekte; bietet eine ähnliche API, hängt aber vom Expo SDK ab.
  • react-native-keychain – Konzentriert sich auf sichere Speicherung, beinhaltet aber auch biometrische Entsperrhelfer.

Für die meisten benutzerdefinierten React Native Anwendungen (ohne Expo) ist die react-native-biometrics die empfohlene Wahl aufgrund ihrer Stabilität und aktiven Wartung.

Installation der Bibliothek

Installieren Sie via npm oder Garn:

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

Bei React Native 0.60 und höher werden die nativen Module automatisch durch Auto-Linking hinzugefügt.

react-native link react-native-biometrics

Konfiguration von Berechtigungen

Jede Plattform erfordert spezifische Berechtigungen in den Manifestdateien.

Android

Fügen Sie das Folgende zu innerhalb des -Tags hinzu:

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

Beachten Sie, dass Sie ab Android 9 (API-Level 28) möglicherweise auch für ältere Geräte Folgendes benötigen:
Die -Berechtigung umfasst sowohl den Fingerabdruck als auch das Entsperren des Gesichts, daher ist es die bevorzugte Wahl.

iOS

Öffnen Sie und fügen Sie eine Beschreibung für die Verwendung von Face ID hinzu:

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

Wenn Sie diesen Schlüssel weglassen, wird die Face ID-Eingabeaufforderung nicht angezeigt und der Anruf schlägt stillschweigend fehl.Bei Apps, die Touch ID auf älteren iPhones unterstützen, ist kein zusätzlicher Schlüssel erforderlich.

Implementierung der Authentifizierungslogik

Wenn die Bibliothek installiert und Berechtigungen festgelegt sind, können Sie jetzt den Authentifizierungsfluss erstellen. Unten finden Sie ein erweitertes Beispiel, das Sensorprüfung, Rückgriff auf den Passcode auf iOS und umfassende Fehlerbehandlung umfasst.

Schritt 1: Sensorverfügbarkeit überprüfen

Bevor Sie die biometrische Schaltfläche anzeigen, vergewissern Sie sich immer, dass das Gerät biometrische Daten unterstützt.

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

Schritt 2: Fordern Sie den Benutzer

Verwenden Sie , um den biometrischen Dialog des Systems auszulösen. Auf iOS wird die Face ID oder Touch ID angezeigt; auf Android wird das System die beste verfügbare biometrische (Fingerabdruck oder Gesicht) verwenden.

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

Schritt 3: Volle Komponente mit Fallback

Kombinieren Sie die oben genannten Funktionen in einer Komponente, die eine biometrische Schaltfläche anzeigt, und wenn der Benutzer abbricht oder ausfällt, fällt er auf eine Passworteingabe zurück.

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 && (

Best Practices für die produktionsbereite Implementierung

Fehlerbehandlung und Benutzerfeedback

Die biometrische Authentifizierung kann aus vielen Gründen fehlschlagen: verschmutzter Sensor, schwaches Licht, abgesagter Benutzer oder Fehler auf Systemebene. Immer Ausnahmen abfangen und eine klare, vom Menschen lesbare Nachricht bereitstellen. Vermeiden Sie die Anzeige von Rohfehlercodes für Benutzer.

Wenn der Benutzer dreimal die biometrische Authentifizierung nicht besteht, kann das Gerät den biometrischen Sensor aussperren und den Passcode benötigen. Ihre App sollte dies erkennen, indem sie den Fehlertyp überprüft und den Benutzer auffordert, seinen Gerätepasscode einzugeben. Die -Bibliothek unterstützt das Passcode-Fallback nicht direkt; Sie müssen möglicherweise native Module oder das -Framework verwenden, um ein nahtloses Erlebnis zu ermöglichen.

Fallback-Authentifizierungsmechanismen

Jede Implementierung muss eine Fallback-Methode unterstützen – normalerweise ein Passwort, eine PIN oder ein Muster.

  • Einige Geräte haben keine biometrischen Sensoren (ältere Modelle, Tablets).
  • Benutzer können möglicherweise aufgrund vorübergehender Bedingungen (Bandagen, nassen Fingern, schwerem Make-up) keine biometrischen Daten verwenden.
  • Systemeinstellungen können Biometrie deaktivieren (z. B. nach einem Neustart oder nach einem langen Zeitraum ohne Verwendung).
  • Regulatorische Anforderungen (wie PSD2 in Europa) verlangen einen zweiten Faktor.

Ihr Fallback sollte so sicher sein wie die Biometrie selbst. Speichern Sie Passwörter mit einem gesalzenen Hash (z. B. bcrypt) auf dem Server oder verwenden Sie die sichere Enklave des Geräts über React Native Keychain für die lokale Authentifizierung.

Sicherheits- und Datenschutzbedenken

Biometrische Daten sind extrem sensibel. Das OWASP Mobile Security Project betont folgende Regeln:

  1. Speichern Sie niemals biometrische Rohdaten auf Ihrem Server – Das Betriebssystem speichert diese Daten in einer isolierten sicheren Enklave und gibt nur ein Erfolgs-/Ausfallergebnis zurück.
  2. Übertragen Sie keine biometrischen Informationen über das Netzwerk – Die biometrische Authentifizierung muss lokal auf dem Gerät erfolgen.
  3. Verwenden Sie Verschlüsselung für die lokale Speicherung – Wenn Sie ein Anmelde-Token nach biometrischem Erfolg zwischenspeichern, speichern Sie es im Keychain (iOS) oder EncryptedSharedPreferences (Android) mit dem biometrischen Schlüsselspeicher des Geräts.
  4. Implementieren Sie eine Begrenzung der Rate – Um Brute-Force-Angriffe auf Fallback-Passwörter zu verhindern, fügen Sie nach wiederholten Fehlern exponentielle Rückwärtsbewegungen hinzu.

Plattformübergreifende Konsistenz

Während React Native die meisten Unterschiede abstrahiert, sollten Sie sich des plattformspezifischen Verhaltens bewusst sein:

  • iOS – Face ID funktioniert nur in der Porträtorientierung. Touch ID hat eine andere Benutzeroberfläche. Das System speichert biometrischen Erfolg für kurze Zeit (konfigurierbar über .
  • Android – Die biometrische Eingabeaufforderung erfordert, dass die App im Vordergrund steht. Auf einigen OEM-Geräten (wie einigen Samsung-Modellen) kann sich die multimodale Biometrie (Fingerabdruck + Gesicht) inkonsequent verhalten.

Testen Sie Ihre App auf mindestens einem physischen Gerät pro Plattform. Emulatoren simulieren biometrische Sensoren oft schlecht (z. B. iOS-Simulator gibt immer Erfolg). Verwenden Sie Gerätelabors oder Cloud-Testdienste wie BrowserStack für echte Gerätetests.

Performance und User Experience

Die Bibliotheks-] wird normalerweise in weniger als 300 ms auf modernen Geräten durchgeführt.

  • Rufen Sie FLT: 19 einmal an, wenn die App gestartet wird oder der Bildschirm montiert wird, nicht jedes Mal, wenn der Benutzer auf die Schaltfläche tippt.
  • Bevorzugen Sie ein "One-Tap" -Login: Kombinieren Sie die biometrische Authentifizierung mit dem Abrufen eines gespeicherten Sitzungstokens aus dem sicheren Speicher, so dass sich der Benutzer nach dem Erfolg automatisch anmeldet.
  • Geben Sie visuelles Feedback vor und nach der Aufforderung (z. B. Schaltflächenzustand ändern, einen Lade-Spinner anzeigen).
  • Verdecken Sie die Eingabeaufforderung nicht mit Overlays – der Systemdialog ist modal und sollte nicht unterbrochen werden.

Fortgeschrittene Überlegungen

Integration der biometrischen Authentifizierung mit Backend Services

Viele Apps müssen sich gegenüber einer Backend-API authentifizieren.

  1. Der Benutzer greift auf die Passwort-Anmeldung zurück (erstes Mal oder nach dem Ablauf des Tokens).
  2. Speichern Sie das Token im sicheren Speicher des Geräts, der durch Biometrie geschützt ist (z. B. mit biometrischer Sicherheit).
  3. Bei nachfolgenden Starts, fordern Sie nach Biometrie; Wenn erfolgreich, rufen Sie das Token ab und verwenden Sie es, um die API aufzurufen.

Fortgeschrittene Setups verwenden Public-Key-Kryptographie: Das Gerät generiert ein Schlüsselpaar, speichert den privaten Schlüssel im biometrischen Keystore und registriert den öffentlichen Schlüssel beim Server. Später signiert die App eine Herausforderung mit dem privaten Schlüssel nach biometrischer Verifizierung und beweist die Identität, ohne jemals Geheimnisse zu teilen. Die Bibliothek unterstützt dies über die und Methoden und Sie können es mit für die lokale Authentifizierung kombinieren.

// 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
};

Kombination mehrerer biometrischer Modi

Einige Geräte unterstützen sowohl Fingerabdruck- als auch Gesichtserkennung. Die Bibliothek liefert nur den Sensor mit der höchsten Priorität zurück. Um eine Auswahl zu bieten, müssen Sie möglicherweise native Module verwenden oder den Sensortyp erkennen und eine geeignete Benutzeroberfläche aufweisen. In der Praxis ist es einfacher und benutzerfreundlicher, sich auf die Systemaufforderung zu verlassen - das Betriebssystem verwendet automatisch die beste verfügbare Biometrie.

Rechtliche und Compliance-Bedenken

Bei der Umsetzung von Biometrie, beachten Sie Vorschriften:

  • GDPR (EU) – Biometrische Daten gelten als sensible personenbezogene Daten. Sie müssen eine ausdrückliche Zustimmung einholen und es den Nutzern ermöglichen, die Einwilligung leicht zu widerrufen.
  • CCPA (Kalifornien) – Erfordert die Offenlegung der Datenerhebungspraktiken und das Recht, sich abzumelden.
  • iOS Face ID Richtlinien – Apple verlangt, dass die Verwendung von Face ID in beschrieben wird und dass Sie sie nicht für Marketing oder Überwachung verwenden.
  • Android BiometricManager – Googles API schreibt vor, dass Apps, die Biometrie zur Authentifizierung verwenden, auch einen Gerätenachweis bereitstellen müssen (PIN, Muster, Passwort).

Wenden Sie sich an Ihr Rechtsteam, um sicherzustellen, dass die Datenschutzrichtlinien und die Zustimmungsströme Ihrer App konform sind.

Prüfung der biometrischen Authentifizierung

Das Testen biometrischer Merkmale kann schwierig sein, da Emulatoren oft keine echten Sensoren haben.

  • Unit tests – Verspotte das -Modul, um deine Komponentenlogik zu verifizieren (z. B. korrekte Zustandsänderungen bei Erfolg/Misserfolg).
  • Integrationstests – Verwenden Sie Detox oder Appium auf realen Geräten. Sie können biometrische Eingabeaufforderungen über gerätespezifische Befehle automatisieren (z. B. für die Android-Fingerabdruckemulation).
  • Manuelles Testen – Testen Sie auf einer Vielzahl von Telefonen, insbesondere auf Android-Geräten mit mittlerer Reichweite, bei denen die Sensorqualität variiert.
  • Edge-Fälle – Testen Sie ohne biometrischen Sensor, Sensor nach zu vielen Fehlern gesperrt, und wenn der Benutzer den Berechtigungsdialog ablehnt.

Verwenden Sie für physische iOS-Geräte die biometrische Registrierungsfunktion des Simulators (Einstellungen – Face ID & Passcode – Registrierung), aber beachten Sie, dass die simulierte Face ID immer beim ersten Versuch erfolgreich ist.

Schlussfolgerung

Die Integration der biometrischen Authentifizierung in Ihre React Native App verbessert die Sicherheit und die Benutzererfahrung erheblich. Durch die Nutzung von Bibliotheken wie können Sie mit minimalem Aufwand Fingerabdruck und Gesichtserkennung hinzufügen, während Sie sich an plattformspezifische Regeln und Best Practices halten. Implementieren Sie immer ein robustes Ausweichmanöver, behandeln Sie Fehler anmutig und übertragen Sie niemals rohe biometrische Daten. Mit einem angemessenen Test- und Compliance-Bewusstsein kann die biometrische Anmeldung zu einer nahtlosen, vertrauensbildenden Funktion für Ihre Benutzer werden.

Für weitere Informationen konsultieren Sie die folgenden Ressourcen: