Biométrie
Ajouter l'authentification Face ID et empreinte digitale à votre app mobile avec expo-local-authentication.
Biométrie
ScaleRocket Mobile inclut expo-local-authentication pour l'authentification biométrique — Face ID sur iPhone, empreinte digitale sur Android et Touch ID sur les anciens appareils Apple.
Vérifier la disponibilité
Avant de demander la biométrie, vérifiez si l'appareil la supporte et si l'utilisateur l'a configurée :
import * as LocalAuthentication from "expo-local-authentication";
async function checkBiometrics() {
// Vérifier si le matériel supporte la biométrie
const compatible = await LocalAuthentication.hasHardwareAsync();
if (!compatible) return false;
// Vérifier si l'utilisateur a enregistré ses données biométriques
const enrolled = await LocalAuthentication.isEnrolledAsync();
if (!enrolled) return false;
return true;
}Vous pouvez aussi vérifier quels types de biométrie sont disponibles :
const types = await LocalAuthentication.supportedAuthenticationTypesAsync();
// Retourne : [1] pour empreinte digitale, [2] pour reconnaissance faciale, ou les deuxAuthentifier l'utilisateur
Demandez à l'utilisateur de s'authentifier par biométrie :
async function authenticateWithBiometrics() {
const result = await LocalAuthentication.authenticateAsync({
promptMessage: "Authenticate to continue",
fallbackLabel: "Use passcode",
cancelLabel: "Cancel",
disableDeviceFallback: false, // Autoriser le code comme solution de repli
});
if (result.success) {
// Utilisateur authentifié avec succès
return true;
} else {
// Authentification échouée ou annulée
console.log(result.error);
return false;
}
}Flux de ré-authentification
Utilisez la biométrie comme garde secondaire après la vérification de session. Par exemple, exigez la biométrie quand l'app revient de l'arrière-plan :
import { useEffect, useRef } from "react";
import { AppState } from "react-native";
function useBiometricLock() {
const appState = useRef(AppState.currentState);
const [isLocked, setIsLocked] = useState(false);
useEffect(() => {
const subscription = AppState.addEventListener("change", (nextState) => {
if (
appState.current.match(/inactive|background/) &&
nextState === "active"
) {
setIsLocked(true);
authenticateWithBiometrics().then((success) => {
if (success) setIsLocked(false);
});
}
appState.current = nextState;
});
return () => subscription.remove();
}, []);
return isLocked;
}Cas d'utilisation
| Scénario | Implémentation |
|---|---|
| Verrouillage de l'app | Ré-authentifier quand l'app revient de l'arrière-plan |
| Actions sensibles | Exiger la biométrie avant de supprimer un compte ou changer le mot de passe |
| Connexion rapide | Proposer la connexion biométrique au lieu de taper les identifiants |
| Confirmation de paiement | Vérifier l'identité avant de traiter les paiements |
Notes importantes
- La biométrie nécessite un build de développement (pas Expo Go)
- Les simulateurs iOS supportent Face ID simulé (Features > Face ID dans le menu du simulateur)
- Les émulateurs Android supportent l'empreinte simulée (Extended controls > Fingerprint)
- Fournissez toujours une solution de repli (code) pour l'accessibilité
- Sur iOS, ajoutez
NSFaceIDUsageDescriptiondansapp.jsonsousios.infoPlist:
{
"expo": {
"ios": {
"infoPlist": {
"NSFaceIDUsageDescription": "We use Face ID to secure your account"
}
}
}
}