Caméra, photos et géolocalisation : les permissions

Une application mobile accède à l'appareil photo, à la position ou aux photos du téléphone par des modules natifs (expo-image-picker, expo-camera, expo-location), et seulement après une permission accordée par l'utilisateur, qu'il peut refuser ou retirer à tout moment. Ce chapitre explique le modèle des permissions d'Android et d'iOS, puis ajoute à AppliFrais la photo du justificatif, son envoi à l'API, la lecture d'un QR code et la commune où se trouve le visiteur, en respectant le RGPD.

Le modèle des permissions

Sur Android depuis la version 6 et sur iOS depuis toujours, une application ne peut pas utiliser un capteur sensible sans l'accord de l'utilisateur, demandé au moment de l'usage. Une permission passe par plusieurs états :

Les bonnes pratiques, que Google et Apple vérifient lors de la publication :

• Demander au moment où la fonction sert, pas toutes les permissions au premier lancement : « Photographier le justificatif » justifie la caméra, un écran d'accueil ne justifie rien.
• Expliquer pourquoi avec un message clair, déclaré dans la configuration.
• Ne pas bloquer l'application en cas de refus : Lucas peut saisir un frais sans photo.
• Demander le minimum : la position approximative plutôt que précise si elle suffit, la position pendant l'utilisation plutôt qu'en permanence.

Déclarer les permissions dans app.json

Chaque module qui utilise un capteur fournit un greffon de configuration (config plugin), déclaré dans la liste plugins d'app.json. Il ajoute les autorisations au manifeste Android et les messages d'explication (usage descriptions) que iOS affiche dans sa fenêtre :

{
  "expo": {
    "plugins": [
      "expo-router",
      "expo-secure-store",
      "expo-sqlite",
      [
        "expo-image-picker",
        {
          "cameraPermission": "AppliFrais utilise l'appareil photo pour photographier les justificatifs de tes frais.",
          "photosPermission": false,
          "microphonePermission": false
        }
      ],
      [
        "expo-location",
        {
          "locationWhenInUsePermission": "AppliFrais utilise ta position, à ta demande, pour indiquer la commune d'un frais."
        }
      ],
      [
        "expo-local-authentication",
        { "faceIDPermission": "AppliFrais utilise Face ID pour déverrouiller l'application." }
      ]
    ]
  }
}

"photosPermission": false retire l'accès à la photothèque, et "microphonePermission": false l'accès au micro, que le module déclare sinon pour filmer des vidéos : AppliFrais ne prend que des photos. Une permission déclarée mais inutile est une collecte excessive, et un motif de questions lors de la publication. Ces réglages s'appliquent quand l'application est compilée (development build ou version publiée) ; dans Expo Go, ce sont les messages génériques d'Expo Go qui s'affichent.

Photographier un justificatif

Pour une photo ponctuelle, expo-image-picker ouvre l'appareil photo du système et renvoie l'image prise : pas d'interface de prise de vue à coder.

npx expo install expo-image-picker expo-file-system

Dans src/lib/appareil.ts :

import { File } from 'expo-file-system';
import * as ImagePicker from 'expo-image-picker';
import * as Location from 'expo-location';
import { Alert, Linking } from 'react-native';

// Photo du justificatif : l'appareil photo du système, compressé (un ticket n'a pas besoin de 12 Mpx).
export async function photographierJustificatif(): Promise<string | null> {
  const permission = await ImagePicker.requestCameraPermissionsAsync();
  if (!permission.granted) {
    if (!permission.canAskAgain) proposerReglages("l'appareil photo");
    return null;
  }
  const resultat = await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: 0.6 });
  if (resultat.canceled) return null;
  return resultat.assets[0].uri;
}

function proposerReglages(ressource: string) {
  Alert.alert('Autorisation refusée', `Pour utiliser ${ressource}, autorise-le dans les réglages du téléphone.`, [
    { text: 'Plus tard', style: 'cancel' },
    { text: 'Ouvrir les réglages', onPress: () => Linking.openSettings() },
  ]);
}

launchCameraAsync renvoie { canceled: true } si Lucas annule, ou { canceled: false, assets: [...] } avec l'image : son uri (l'adresse du fichier dans le cache de l'application), sa largeur, sa hauteur et son type. quality: 0.6 compresse le JPEG : la photo d'un ticket passe de plusieurs mégaoctets à quelques centaines de kilo-octets, ce qui compte pour un envoi en 4G. Pour choisir une photo existante, launchImageLibraryAsync ouvre la photothèque avec les mêmes options.

Dans le formulaire « Nouveau frais », un bouton prend la photo, et un aperçu s'affiche avec expo-image :

const [photo, setPhoto] = useState<string | null>(null);

{photo && <Image source={{ uri: photo }} style={styles.apercu} contentFit="cover" accessibilityLabel="Photo du justificatif" />}
<Bouton
  titre={photo ? 'Reprendre la photo' : 'Photographier le justificatif'}
  variante="secondaire"
  onPress={async () => setPhoto((await photographierJustificatif()) ?? photo)}
/>

Si Lucas annule une nouvelle prise, ?? photo garde la photo précédente au lieu de l'effacer.

Envoyer la photo à l'API

Une photo s'envoie dans une requête multipart/form-data, le format des formulaires HTML avec fichier. Côté application, le File du module expo-file-system représente le fichier pris par l'appareil photo, et se range dans un FormData comme n'importe quel fichier du Web :

export function formulaireJustificatif(uri: string): FormData {
  const formulaire = new FormData();
  formulaire.append('fichier', new File(uri)); // File d'expo-file-system est un Blob ; « fichier » : le champ qu'attend l'API
  return formulaire;
}

Le client d'API l'envoie avec PUT /v1/frais-hors-forfait/{id}/justificatif, sans en-tête Content-Type : fetch le calcule lui-même, avec la frontière (boundary) qui sépare les parties du formulaire. Écrire 'Content-Type': 'multipart/form-data' à la main casse la requête, car la frontière manque.

Côté serveur, la route est celle du cours Node.js (upload de fichier avec Multer) : la bibliothèque Multer (version 2) lit le champ fichier du formulaire, refuse un fichier de plus de 2 Mo (413) ou d'un autre type que PDF, JPEG ou PNG (415), vérifie que le frais appartient au visiteur connecté, puis range le fichier sous un nom aléatoire, hors du dossier public du serveur. Le nom du champ doit être le même des deux côtés : avec formulaire.append('photo', …), Multer répondrait 400. Vérifie aussi la taille des photos de ton téléphone : si elles dépassent 2 Mo, baisse quality.

Le type annoncé (mimetype) vient du client et se falsifie : une API sérieuse vérifie en plus la signature du fichier (les premiers octets d'un JPEG valent FF D8 FF), pour qu'un script déguisé en image ne soit jamais accepté.

Scanner un QR code avec expo-camera

Quand l'application a besoin de l'image en direct plutôt que d'une photo (lire un QR code, cadrer un document), le composant CameraView d'expo-camera affiche l'aperçu de la caméra dans l'écran. Exemple : lire le QR code imprimé sur la carte d'un professionnel de santé visité.

import { CameraView, useCameraPermissions } from 'expo-camera';

export function ScannerQr({ surCode }: { surCode: (valeur: string) => void }) {
  const [permission, demanderPermission] = useCameraPermissions();
  const dejaLu = useRef(false);

  if (!permission) return null; // chargement de l'état de la permission
  if (!permission.granted) {
    return <Bouton titre="Autoriser la caméra" onPress={demanderPermission} />;
  }
  return (
    <CameraView
      style={{ flex: 1 }}
      facing="back"
      barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
      onBarcodeScanned={({ data }) => {
        if (dejaLu.current) return; // l'événement arrive plusieurs fois par seconde
        dejaLu.current = true;
        surCode(data);
      }}
    />
  );
}

useCameraPermissions renvoie l'état de la permission et la fonction qui la demande. Le contenu d'un QR code est une entrée externe : n'importe qui peut en imprimer un. Valide-le (format attendu, longueur) avant de l'utiliser, et n'ouvre jamais aveuglément une adresse qu'il contient.

La géolocalisation avec expo-location

AppliFrais propose d'ajouter au libellé d'un frais la commune où se trouve Lucas (« Repas client à Villeurbanne »), à sa demande. expo-location donne la position, puis la convertit en adresse (géocodage inverse) :

// La commune où se trouve le visiteur, pour compléter le libellé d'un frais.
export async function communeActuelle(): Promise<string | null> {
  const { granted } = await Location.requestForegroundPermissionsAsync();
  if (!granted) return null;
  const position = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
  const [adresse] = await Location.reverseGeocodeAsync(position.coords);
  return adresse?.city ?? null;
}

La position en arrière-plan (requestBackgroundPermissionsAsync) est une autre affaire : une permission distincte, que Google et Apple n'acceptent que pour des usages justifiés (navigation, suivi de livraison), avec une déclaration spéciale lors de la publication.

Tester les capteurs sur un émulateur

Pas besoin d'aller à Villeurbanne pour tester la commune. L'émulateur Android, dans ses Extended controls (les trois points de sa barre latérale), permet de fixer une position GPS ou de rejouer un trajet. Sa caméra montre une scène virtuelle, ou la webcam de l'ordinateur si tu la configures dans Device Manager. Le simulateur iOS propose une position simulée dans son menu, mais pas de caméra : pour la photo, teste sur un téléphone.

Teste systématiquement les refus : refuse la permission, puis refuse-la définitivement, et vérifie que l'application reste utilisable et propose d'ouvrir les réglages. Pour revenir à l'état « pas encore demandée », désinstalle l'application ou réinitialise ses autorisations dans les réglages du téléphone.

export async function positionActuelle(): Promise<Location.LocationObject | null> {
  const permission = await Location.requestForegroundPermissionsAsync();
  // à compléter
}

export async function positionActuelle(): Promise<Location.LocationObject | null> {
  const permission = await Location.requestForegroundPermissionsAsync();
  if (!permission.granted) {
    if (!permission.canAskAgain) {
      Alert.alert('Position refusée', 'Autorise la position dans les réglages pour utiliser cette fonction.', [
        { text: 'Plus tard', style: 'cancel' },
        { text: 'Ouvrir les réglages', onPress: () => Linking.openSettings() },
      ]);
    }
    return null;
  }
  return Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
}

const formulaire = new FormData();
formulaire.append('fichier', new File(uri));
await fetch(`${URL_API}/frais-hors-forfait/${id}/justificatif`, {
  method: 'PUT',
  headers: { 'Content-Type': 'multipart/form-data', Authorization: `Bearer ${jeton}` },
  body: formulaire,
});