Ajout d'une vérification d'identité à une application React Native ou Flutter

L'intégration de la vérification d'identité dans une application React Native ou Flutter ne nécessite que quelques lignes de code et une configuration native assez conséquente. Toden Les SDK gèrent l'intégralité du processus (consentement, sélection de la pièce d'identité, capture de document, selfie et vérification de présence) et le soumettent pour vous. Vous êtes responsable de la configuration de l'application, de l'autorisation d'accès à la caméra, de la clé que vous distribuez et du comportement de votre application après l'envoi du formulaire par le demandeur.

La méthode la plus durable consiste à créer un flux de travail intégré au tableau de bord, à ne transmettre que les données par utilisateur depuis le code et à lire les résultats sur votre serveur. Ainsi, toute modification du flux se traduit par une simple republication plutôt que par une mise à jour sur l'App Store, et aucune donnée d'identité n'a besoin d'être renvoyée sur le téléphone. La suite de cet article détaille chaque étape et les décisions spécifiques au mobile à prendre.

Qu'ajoutez-vous concrètement à l'application ?

Les deux SDK exploitent la fonctionnalité de présence native sur l'appareil : Apple Vision sur iOS et Google ML Kit sur Android. C'est ce qui justifie la majeure partie de la configuration. La présence, ici, repose sur l'intelligence de présence (un selfie en direct accompagné de défis gestuels aléatoires, d'une séquence de couleurs clignotantes sur l'écran, ou les deux), et elle s'exécute directement sur les images de la caméra, dans le code natif, et non dans une vue web.

Les deux SDK offrent des fonctionnalités équivalentes à celles du web SDK Pour le flux principal, l'intégration du workflow et les modules complémentaires de capture (contact) OTP (preuve de domicile, questionnaire), vérification d'entreprise et tout document international. Ils ajoutent une fonctionnalité que le web ne peut pas utiliser : la lecture de la puce des passeports électroniques et des cartes d'identité à puce. NFC .

De quoi ces configurations ont-elles besoin ?

Les exigences minimales, issues de React Native (s’ouvre dans un nouvel onglet) et Flutter (s’ouvre dans un nouvel onglet) SDK pages :

C'est la ligne React Native qui piège les équipes. SDK Utilise un processeur d'images VisionCamera v5 (Nitro), qui est du code natif ; il ne peut donc pas s'exécuter dans Expo Go. Prévoyez un client de développement personnalisé dès le premier jour d'intégration, et non la veille de la sortie.

Comment l'installer ?

Pour une application Expo sur React Native, installez le SDK et ses homologues, ajoutez le plugin de configuration et créez un client de développement :

npx expo install @myazahq/kyc-sdk-react-native \
  react-native-vision-camera react-native-vision-camera-worklets \
  react-native-worklets react-native-nitro-modules react-native-nitro-image \
  react-native-safe-area-context react-native-svg

// app.json
{
  "expo": {
    "plugins": ["@myazahq/kyc-sdk-react-native"]
  }
}

npx expo prebuild
npx expo run:ios       # or: npx expo run:android

N'ajoutez pas VisionCamera elle-même àpluginsLa version 5 ne fournit aucun plugin de configuration, et son affichage rend la liste difficile.expo prebuildéchouer. Toden Ce plugin ajoute la chaîne d'utilisation de la caméra iOS et AndroidCAMERAetINTERNETautorisations pour vous. Les applications React Native de base ajoutent le module d'exécution Expo avecnpx install-expo-modules@latestet déclarer les autorisations à la main ; SDK Cette page contient les commandes exactes.

Pour Flutter, ajoutez la dépendance et exécutezflutter pub get:

dependencies:
  myaza_kyc_sdk_flutter: ^2.2.0

Ensuite, déclarez vous-même l'autorisation d'accès à la caméra :NSCameraUsageDescriptiondansios/Runner/Info.plist, etCAMERAplusINTERNETdansAndroidManifest.xml.

Quelles autorisations vos utilisateurs verront-ils ?

Caméra, toujours. Localisation, uniquement si un flux de travail utilise l'étape Address Intelligence. Le plugin de configuration React Native ajoute les chaînes de localisation par défaut (passer{ "location": false }pour se désinscrire) ; dans Flutter et React Native pur, vous les ajoutez vous-même. Sur iOS, l'application plante lors de la requête de localisation siNSLocationWhenInUseUsageDescriptionL'élément est manquant ; ajoutez-le donc chaque fois qu'une étape d'adresse est possible. Microphone, jamais : le guidage vocal est une synthèse vocale et le SDK L'application n'enregistre pas le son. Il est important d'inclure ce dernier point dans les réponses relatives à la confidentialité de votre application sur l'App Store.

Quels modules React Native optionnels sont importants ?

Quatreexpo-*Les modules sont des éléments optionnels, et chacun apporte une fonctionnalité. Celle que la plupart des équipes oublient est :expo-document-picker: sans cela, les étapes de vérification de domicile et de documents commerciaux n'acceptent qu'une capture d'écran, donc un PDF Il est impossible de soumettre un relevé bancaire.expo-deviceaméliore l'empreinte digitale de l'appareil utilisée par l'intelligence de l'appareil,expo-applicationenregistre la version de votre application lors de la soumission, etexpo-localizationdonne le SDK la région de l'appareil.

Comment devez-vous monter le flux ?

Montez un workflow publié à partir de son ID. Le workflow contient le pays, les types d'identifiants, les étapes de capture, la marque et le texte, et peut également contenir des règles de décision côté serveur. React Native :

import { MyazaKYC } from "@myazahq/kyc-sdk-react-native";

export default function VerifyScreen() {
  return (
    <MyazaKYC
      apiKey="pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      workflowId="wf_AbC123dEf456"
      userId="user_42"
      userData={{ firstName: "Jane", lastName: "Doe" }}
      metadata={{ requestId: "order_1001" }}
      onSubmit={(submission) => console.log("submitted", submission.verificationId)}
      onError={(err) => console.error(err.code, err.message)}
      onClose={() => console.log("closed")}
    >
      Verify Identity
    </MyazaKYC>
  );
}

Flutter ouvre le même flux qu'une feuille modale. Notez quecontextest un paramètre nommé et les fonctions de rappel se trouvent à côtéconfig, pas à l'intérieur :

MyazaKYC.show(
  context: context,
  config: const MyazaKYCConfig(
    apiKey: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    workflowId: 'wf_AbC123dEf456',
    userId: 'user_42',
    userData: UserData(firstName: 'Jane', lastName: 'Doe'),
    metadata: {'requestId': 'order_1001'},
  ),
  onSubmit: (submission) => debugPrint('Submitted: ${submission.verificationId}'),
  onError: (error) => debugPrint('Error: ${error.code}: ${error.message}'),
  onClose: () => debugPrint('KYC closed'),
);

Trois détails dans ces extraits sont délibérés.

La clé est publiable. Seul unpk_La clé appartient à une application. Flutter déduit l'environnement de son préfixe (pk_test_est un bac à sable,pk_live_(est en production), le passage en production est donc un changement majeur. Une clé publiable peut lancer une vérification, mais ne peut pas en lire le résultat.

userId,userDataetmetadataRestez dans le code. Un flux de travail est un modèle partagé par tous les visiteurs ; il ne peut donc pas contenir de valeurs propres à chaque utilisateur.userDatavaut la peine d'être transmis : il s'agit du nom que vous pensez que l'utilisateur possède, comparé au nom lu sur son document pour produiredataMatchLaissez-le de côté etdataMatchrevientnull.

metadata.requestIdCette clé doit provenir de votre propre enregistrement. Il s'agit de la clé d'idempotence de la soumission ; par conséquent, utilisez-la plutôt que de générer une nouvelle clé à chaque affichage de l'écran.

Pourquoi un workflow plutôt que des props ? Les deux SDK acceptent la configuration complète via les props, ce qui convient pour un workflow fixe. Cependant, sur mobile, chaque modification des props entraîne une nouvelle version de l'application et un cycle de validation, et les anciennes versions restent installées pendant des mois. Avec un workflow, l'ajout d'un type d'identifiant ou le renforcement d'un seuil de reconnaissance faciale s'applique à toutes les versions installées lors de la prochaine exécution du workflow. La page produit Workflows décrit l'outil de création.

Que se passe-t-il après que le candidat a soumis sa candidature ?

onSubmitL'événement se déclenche lorsque le serveur accepte la vérification. Il ne s'agit pas du résultat. Les vérifications s'exécutent de manière asynchrone et le résultat parvient à votre serveur via un webhook ou par un appel avec clé secrète.GET /api/kyc/verifications/:id.onErrorLes déclenchements d'alerte sont réservés aux erreurs techniques (réseau, authentification, crédit, téléchargement), jamais en cas de refus de vérification.

Le modèle sur mobile est donc le suivant : suronSubmit, envoyez leverificationIdCôté serveur, affichez un écran « Nous vérifions vos informations » et laissez-le indiquer à l'application ce qu'elle doit afficher ensuite à la réception du webhook. Ne récupérez pas le résultat complet de l'application : cela nécessite une clé secrète, et une clé secrète dans le binaire d'une application est une clé secrète détenue par un tiers.

Quand NFC La lecture de la puce est-elle logique ?

Lorsque vos candidats possèdent des passeports électroniques ou des cartes d'identité à puce et que vous souhaitez le niveau d'assurance le plus élevé, les SDK mobiles lisent la puce via son canal sécurisé et le serveur effectue une authentification passive : il revérifie le hachage de chaque groupe de données par rapport à l'objet de sécurité signé de la puce et vérifie que le signataire est lié à un certificat d'état émetteur de confiance ( CSCA Une puce qui s'avère avoir été trafiquée échoue à la vérification avecchip_not_authentic.

Quatre limites à prendre en compte lors de la conception, du point de vue de NFC Documentation de la puce (s’ouvre dans un nouvel onglet) :

• La couverture est soumise à certification. La lecture de puce n’est proposée que pour les pays figurant dans la liste de certificats de Toden : 138 pays, dont le Nigéria, le Ghana, le Kenya, l’Égypte, l’Éthiopie et le Sénégal.GET /configrapportssupportsNfcpar type d'identifiant pour votre compte.

• Certaines puces sont illisibles par tous. La carte d'identité sans fil sud-africaine, la carte d'identité des Émirats arabes unis et la MyKad malaisienne utilisent des applications propriétaires pour leurs puces. Ces documents sont néanmoins vérifiés par un contrôle papier.

• Téléphones sans NFC Ignorer cette étape n'entraîne jamais d'échec de la vérification. En cas de puce manquante ou illisible, le processus se limite à la vérification des documents et des registres gouvernementaux.

• L'étape de la puce s'exécute après la numérisation du document , car la clé qui ouvre le canal sécurisé de la puce est dérivée de la zone lisible par machine du document.

Les cartes d'identité compatibles avec les puces qui proposent cette étape, et la possibilité pour les utilisateurs de l'ignorer, sont des paramètres de flux de travail dans l'interface du concepteur. NFC panneau.

Comment faire pour que la taille de l'application reste raisonnable ?

Sur Android, la détection des visages et la reconnaissance de texte utilisent Google ML Kit, et le SDK Cela dépend des variantes des services Google Play qui téléchargent leurs modèles lors de la première utilisation plutôt que de les intégrer. Les intégrer ajoute un téléchargement important à chaque appareil, c'est pourquoi les variantes téléchargées sont celles par défaut. En contrepartie, les variantes des services Google Play ne fonctionnent pas sur les appareils sans ces services, comme les appareils Huawei. Si vous effectuez des livraisons vers ces appareils, configurezext { myazaKycBundledMlKit = true }dans votre racinebuild.gradleregrouper les modèles à la place.

Distribuer un ensemble d'applications Android plutôt qu'une application universelle APK et en activant R8 avec réduction des ressources, on réduit encore davantage le téléchargement. SDK étend ses propres règles de consommation pour R8.

Liste de vérification avant la mise en circulation

• React Native : un client de développement ou une version minimale dans l’intégration continue, jamais Expo Go ; nouvelle architecture activée.

• Autorisation d'accès à la caméra déclarée ; chaîne de localisation déclarée si un flux de travail collecte une adresse ; aucune autorisation d'accès au microphone.

• expo-document-pickerinstallé si un flux de travail collecte des documents sous forme de fichiers.

• Un flux de travail publié monté par ID ;userId,userDataet une stabilitémetadata.requestIdtransmis par le code.

• UNpk_test_clé dans les constructions de développement et unpk_live_Clé utilisée dans les versions finales, jamais une clé secrète.

• onSubmitmains lesverificationIdà votre serveur ; les résultats proviennent de webhooks.

• NFC La couverture a été vérifiée par rapport àsupportsNfcpour les pays que vous servez.

Testez d'abord l'intégralité du chemin dans l'environnement de test (Sandbox) avec les identifiants de test publiés, puis remplacez la clé. Le hub pour développeurs propose les deux. SDK guides.