Comprendre l'authentification biométrique dans les applications mobiles modernes

L'authentification biométrique est devenue une pierre angulaire de la sécurité mobile moderne, offrant une alternative sans friction aux mots de passe et aux NIP. En utilisant des caractères biologiques uniques – comme les empreintes digitales, les traits du visage ou les modèles d'iris – les applications peuvent vérifier l'identité avec une grande précision et commodité. Réagir Native, avec sa flexibilité multiplateforme, permet aux développeurs d'intégrer ces fonctionnalités efficacement à travers iOS et Android en utilisant une base de code unique.

Qu'est-ce que l'authentification biométrique?

L'authentification biométrique repose sur des caractéristiques physiologiques mesurables qui sont largement uniques à chaque individu. Les méthodes les plus courantes dans les applications mobiles sont les suivantes:

  • Reconnaissance d'empreintes digitales – Scanne les motifs de crêtes via des capteurs capacitifs ou optiques. Disponible sur la plupart des smartphones modernes.
  • Reconnaissance faciale – Utilise la caméra frontale pour cartographier la géométrie faciale (p. ex., Apple Face ID, Android , Face Unlock).
  • Iris scan[ – Moins fréquent mais disponible sur certains appareils Android haut de gamme; scanne l'iris pour une haute précision.

Chaque méthode a des compromis. Les capteurs d'empreintes digitales sont rapides et fiables dans tout éclairage, mais peuvent être affectés par des doigts mouillés ou sales. La reconnaissance faciale est pratique mais peut être difficile avec des masques ou des angles extrêmes.

L'analyse de rentabilisation pour la connexion biométrique

Selon des études, les applications avec connexion biométrique voient jusqu'à 35 % d'augmentation de réengagement parce que les utilisateurs n'ont plus besoin de se souvenir de mots de passe complexes. Les applications bancaires, de soins de santé et d'entreprise en bénéficient particulièrement parce que les applications biométriques réduisent le risque de vol de titres tout en maintenant une expérience utilisateur fluide.

Mise en place de l'authentification biométrique dans les réacts natifs

React Native n'inclut pas d'API biométrique intégrée, de sorte que les développeurs comptent sur les bibliothèques communautaires. Les options les plus populaires et les plus maintenues sont:

  • réaction-native-biométrie – Une bibliothèque légère et bien documentée qui supporte les empreintes digitales et la reconnaissance faciale sur les deux plateformes.
  • expo-local-authentication – Idéal pour les projets gérés par Expo; offre une API similaire mais dépend du SDK Expo.
  • react-native-keychain – Se concentre sur le stockage sécurisé, mais comprend des aides biométriques de déverrouillage.

Pour la plupart des applications React Native personnalisées (sans Expo), réaction-native-biométrie est le choix recommandé en raison de sa stabilité et de sa maintenance active.

Installation de la bibliothèque

Installez-vous via npm ou fil:

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

Pour React Native 0.60 et plus, l'auto-lienage ajoutera automatiquement les modules natifs. Si vous utilisez React Native 0.59 ou moins, vous devez lier le paquet manuellement :

react-native link react-native-biometrics

Configuration des autorisations

Chaque plateforme nécessite des autorisations spécifiques dans les fichiers manifestes.

Android

Ajouter ce qui suit à à l'intérieur de l'étiquette :

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

Notez que depuis Android 9 (niveau 28 de l'API), vous pouvez aussi avoir besoin de:
pour les appareils plus anciens. La permission couvre à la fois le déverrouillage des empreintes digitales et du visage, donc c'est le choix préféré.

iOS

Ouvrez et ajoutez une description pour l'utilisation de Face ID:

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

Si vous omettez cette clé, l'invite Face ID n'apparaîtra pas et l'appel échouera silencieusement. Pour les applications qui prennent en charge Touch ID sur les iPhones plus anciens, aucune clé supplémentaire n'est requise.

Mise en œuvre de la logique d'authentification

Avec la bibliothèque installée et les permissions définies, vous pouvez maintenant construire le flux d'authentification. Ci-dessous est un exemple élargi qui inclut la vérification des capteurs, le retour au code de passe sur iOS, et la gestion complète des erreurs.

Étape 1: Vérifier la disponibilité du capteur

Avant de montrer le bouton biométrique, vérifiez toujours que l'appareil supporte la biométrie. La méthode renvoie une promesse avec des informations sur le type de capteur disponible.

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

Étape 2: Demander à l'utilisateur

Utilisez pour déclencher la boîte de dialogue biométrique du système. Sur iOS, il affichera Face ID ou Touch ID; sur Android, le système utilisera la meilleure biométrie disponible (empreinte ou visage). Vous pouvez personnaliser le message d'invite.

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

Étape 3 : Component complet avec repli

Combinez les fonctions ci-dessus dans un composant qui affiche un bouton biométrique, et si l'utilisateur annule ou échoue, retournez à une entrée de mot de passe.

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

Meilleures pratiques pour la mise en œuvre de la production et de la préparation

Gestion des erreurs et rétroaction de l'utilisateur

L'authentification biométrique peut échouer pour de nombreuses raisons : capteur sale, faible luminosité, annulation d'utilisateur ou erreur de niveau système. Toujours attraper des exceptions et fournir un message clair et lisible par l'homme. Évitez d'afficher des codes d'erreur bruts aux utilisateurs. Au lieu de cela, mapper les erreurs courantes aux actions comme "Essayez à nouveau" ou "Utilisez le mot de passe à la place.

Sur iOS, si l'utilisateur échoue trois fois l'authentification biométrique, l'appareil peut verrouiller le capteur biométrique et exiger le code d'accès. Votre application devrait le détecter en vérifiant le type d'erreur et en incitant l'utilisateur à entrer son code d'accès. La bibliothèque ne supporte pas directement le code d'accès; vous devrez peut-être utiliser des modules natifs ou le cadre pour une expérience sans faille.

Mécanismes d'authentification des retours

Ne jamais se fier uniquement à la biométrie. Chaque mise en œuvre doit supporter une méthode de repli – généralement un mot de passe, un NIP ou un modèle.

  • Certains appareils manquent de capteurs biométriques (modèles plus anciens, tablettes).
  • Les utilisateurs peuvent ne pas pouvoir utiliser la biométrie en raison de conditions temporaires (bandages, doigts mouillés, maquillage lourd).
  • Les paramètres du système peuvent désactiver la biométrie (p. ex. après le redémarrage ou après une longue période sans utilisation).
  • Les exigences réglementaires (comme la DSP2 en Europe) exigent un deuxième facteur.

Votre retour devrait être aussi sécurisé que la biométrie elle-même. Stockez les mots de passe en utilisant un hachage salé (par exemple, bcrypt) sur le serveur, ou utilisez l'enclave sécurisée de périphérique , via React Native Keychain pour l'authentification locale.

Considérations relatives à la sécurité et à la protection des renseignements personnels

Les données biométriques sont extrêmement sensibles. Le projet de sécurité mobile OWASP met l'accent sur les règles suivantes :

  1. Ne jamais stocker de données biométriques brutes sur votre serveur[ – Le système d'exploitation stocke ces données dans une enclave sécurisée isolée et ne retourne qu'un résultat de réussite/échec.
  2. Ne transmettez pas d'informations biométriques sur le réseau[ – L'authentification biométrique doit se produire localement sur l'appareil. Utilisez le résultat (un jeton ou un booléen) pour la vérification côté serveur.
  3. Utilisez le chiffrement pour le stockage local – Si vous cachez un jeton de connexion après le succès biométrique, stockez-le dans la chaîne-clés (iOS) ou dans les préférences partagées encryptées (Android) à l'aide du keystore biométrique.
  4. Limitation du taux d'exécution[ – Pour prévenir les attaques de force brute sur les mots de passe de retour, ajouter un recul exponentiel après des échecs répétés.

Cohérence entre les programmes

Bien que React Native abstienne la plupart des différences, soyez conscient du comportement spécifique à la plateforme:

  • iOS – Face ID ne fonctionne que dans l'orientation du portrait. Touch ID a une interface utilisateur différente. Le système cache le succès biométrique pour un court laps de temps (configurable via .
  • Android – L'invite biométrique exige que l'application soit au premier plan. Sur quelques appareils OEM (comme certains modèles Samsung), la biométrie multimodale (empreinte digitale + visage) peut se comporter de façon incohérente.

Testez votre application sur au moins un appareil physique par plate-forme. Les émulateurs simulent souvent mal les capteurs biométriques (p. ex., le simulateur iOS retourne toujours le succès).

Performance et expérience utilisateur

Les invites biométriques doivent se sentir instantanées. La bibliothèque complète normalement en moins de 300 ms sur les appareils modernes.

  • Appelez une fois lorsque l'application démarre ou que l'écran monte, pas chaque fois que l'utilisateur appuie sur le bouton.
  • Préférez une connexion « à un seul tap » : combinez l'authentification biométrique et la récupération d'un jeton de session stocké à partir d'un stockage sécurisé, de sorte que l'utilisateur se connecte automatiquement après le succès.
  • Fournir une rétroaction visuelle avant et après l'invite (p. ex., modifier l'état du bouton, afficher un spinner de chargement).
  • Ne pas masquer l'invite avec les superpositions – la boîte de dialogue système est modale et ne doit pas être interrompue.

Considérations avancées

Intégration de l'authentification biométrique aux services de sauvegarde

De nombreuses applications doivent authentifier les utilisateurs contre une API backend. Le flux typique est:

  1. L'utilisateur revient à l'identifiant de mot de passe (première fois ou après expiration du jeton).
  2. Entreposez le jeton dans l'appareil avec une protection de la biométrie (p. ex. avec une sécurité biométrique).
  3. Lors des lancements ultérieurs, demandez la biométrie; si vous réussissez, récupérer le jeton et l'utiliser pour appeler l'API.

Les configurations plus avancées utilisent la cryptographie à clé publique : l'appareil génère une paire de clés, stocke la clé privée dans le keystore biométrique protégé et enregistre la clé publique avec le serveur. Plus tard, l'application signe un défi avec la clé privée après vérification biométrique, prouvant l'identité sans jamais partager de secrets. La bibliothèque supporte cette option via les méthodes et , et vous pouvez la combiner avec pour l'authentification locale.

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

Combiner plusieurs modes biométriques

Certains appareils supportent à la fois la reconnaissance des empreintes digitales et faciales. La bibliothèque retourne seulement le capteur le plus prioritaire. Pour offrir un choix, vous pouvez avoir besoin d'utiliser des modules natifs ou de détecter le type de capteur et de présenter une interface utilisateur appropriée.

Considérations juridiques et de conformité

Lors de la mise en oeuvre de la biométrie, il faut tenir compte des règlements suivants :

  • GFRP (EU)[ – Les données biométriques sont considérées comme des données personnelles sensibles. Vous devez obtenir un consentement explicite et permettre aux utilisateurs de révoquer facilement le consentement.
  • CCPA (Californie)[ – Exige la divulgation des pratiques de collecte de données et le droit de s'abstenir.
  • iOS Lignes directrices pour l'identification faciale – Apple exige que l'utilisation de Face ID soit décrite dans le et que vous ne l'utilisez pas pour la commercialisation ou la surveillance.
  • Android BiometricManager – Google , l'API exige que les applications utilisant la biométrie pour l'authentification doivent également fournir un certificat de l'appareil (PIN, pattern, mot de passe).

Consultez votre équipe juridique pour vous assurer que votre politique de confidentialité et les flux de consentement des utilisateurs sont conformes.

Essais d'authentification biométrique

Les tests biométriques peuvent être difficiles car les émulateurs manquent souvent de vrais capteurs.

  • – Mock le module pour vérifier votre logique de composant (p. ex., les changements d'état corrects lors du succès/échec).
  • – Utilisez Detox ou Appium sur des appareils réels. Vous pouvez automatiser les invites biométriques via des commandes spécifiques à un appareil (p. ex. ] pour l'émulation des empreintes digitales Android).
  • Test manuel – Test sur une variété de téléphones, en particulier les appareils Android de moyenne portée où la qualité des capteurs varie.
  • – Test sans capteur biométrique, capteur verrouillé après trop de défaillances, et lorsque l'utilisateur refuse la boîte de dialogue de permission.

Pour les appareils physiques iOS, utilisez la fonction d'inscription biométrique Simulator , mais notez que la simulation de l'ID du visage réussit toujours lors de la première tentative. Pour des tests réalistes, vous avez besoin d'un appareil réel.

Conclusion

En intégrant l'authentification biométrique dans votre application React Native, vous améliorez considérablement la sécurité et l'expérience utilisateur. En tirant parti de bibliothèques comme , vous pouvez ajouter des empreintes digitales et une reconnaissance faciale avec un minimum d'efforts, tout en respectant les règles spécifiques à la plateforme et les meilleures pratiques.

Pour plus de détails, consulter les ressources suivantes: