Comment intégrer l'authentification biométrique dans iOS et Android

Découvrez comment intégrer facilement l'authentification biométrique, comme Face ID et Touch ID, dans vos applications mobiles natives iOS et Android avec NativeScript et Kinvey.

Vous êtes-vous déjà demandé combien d'applications sécurisées utilisaient l'authentification biométrique? Dans cet article, nous verrons comment gérer l'authentification biométrique dans les applications mobiles à l'aide des identificateurs de visage et tactiles. Si vous souhaitez doter votre application d'une fonctionnalité non seulement sécurisée, mais également suffisamment moderne et pratique pour ravir vos utilisateurs, vous pouvez facilement, avec la technologie appropriée, l'ajouter à votre propre application.

Quelques exemples courants de données biométriques. l’authentification sont Face ID et Touch ID.

1. Face ID:

   Face ID est un système de reconnaissance faciale Face Unlock conçu et développé par Apple pour l’iPhone X. Il s’agit d’un type de technologie d’authentification biométrique destiné à réussir Touch ID, un système basé sur les empreintes digitales

2. Touch ID:
   Touch ID est une fonction de reconnaissance des empreintes digitales qui permet aux utilisateurs de déverrouiller des appareils Apple ou Android, de faire des achats et de s'authentifier dans des applications. Il fait partie de tous les iPhones de l'iPhone 5S de 2013 à l'iPhone 8 et 8 Plus de 2017. Il existe sur tous les iPad depuis l'iPad Air 2. Il est également disponible sur les appareils Android (Fingerprint Scanner).

Voyons maintenant comment configurer un exemple d'application à l'aide de NativeScript et Kinvey qui montrera comment intégrer l'authentification biométrique dans les applications natives iOS et Android. De plus, si l'authentification biométrique échoue, nous allons revenir à notre procédure de connexion standard (Connexion et enregistrement).

Configuration de l'environnement

Nous devons d'abord configurer l'environnement pour créer l'application. Il existe quatre étapes:

1. Installez Node.js
2. Installez la CLI de NativeScript
3. Installez les configurations iOS et Android requises pour tester votre application
4. Vérifiez la configuration

Pour une installation facile sur macOS, utilisez homebrew un gestionnaire de paquets pour macOS.

Pour une explication détaillée de ces étapes de démarrage, vous pouvez consulter cette documentation d'installation rapide .

Intégrer l'authentification biométrique

Ajouter le plugin 'nativescript-fingerprint-auth' pour l'authentification biométrique dans votre application NativeScript à l'aide de la commande suivante:

Le plugin tns ajoute nativescript-fingerprint-auth

Le code ci-dessus, responsable de l'intégration du Touch ID et du visage, doit ensuite être ajouté à votre projet. 19659022] Note sur l'identification de visage [1 9659023] Pour Face ID, une chaîne d'utilisation supplémentaire est requise pour expliquer la raison de l'utilisation de Face ID dans l'application. Ce message est stocké en tant que paire de valeurs de clé dans le fichier Info.plist de l'application (AppResources / iOS / Info.plist)

Activer l'identification tactile ou l'identification de visage

Lorsqu'un utilisateur ouvre l'application, un écran de connexion lui est présenté. Une fois qu'il s'est connecté, il peut activer Face. ID ou ID tactile.

Remarque à propos de la modification l'utilisateur

L'application mémorise un “utilisateur d'application”, à savoir l'utilisateur dont les informations biométriques sont stockées dans l'appareil. Si un autre utilisateur se connecte et souhaite activer Touch ID ou Face ID, il lui sera demandé s'il souhaite changer l'utilisateur de l'application.

Pour activer l'identifiant de visage / tactile et afficher un message de confirmation comme indiqué ci-dessus, le code ci-dessous doit être ajouté:

Utilisation de l'authentification biométrique

Face ID, l’utilisateur aura le choix d’utiliser les informations d’identification ou d’identification tactile:

En cas d'échec de Touch ID, l'utilisateur aura la possibilité de revenir à l'utilisation d'un mot de passe dactylographié à l'aide de Option 'Entrer le mot de passe'.

En cas d'échec de l'identifiant de visage, l'utilisateur aura la possibilité de réessayer ou d'annuler l'identifiant de visage et d'essayer une autre option (dans ce cas, la seule autre option consiste à entrer un mot de passe ).

Connexion et enregistrement (en cas d'échec de l'authentification biométrique) [19659010] Tous les périphériques ne sont pas compatibles avec toutes les formes d'authentification biométrique, sinon l'authentification peut tout simplement échouer. Il est important de disposer d’un système de sauvegarde permettant l’utilisation d’un nom d’utilisateur et d’un mot de passe traditionnels. Cette fonctionnalité peut facilement être implémentée en utilisant NativeScript et Kinvey .

Pour créer ce formulaire, nous pouvons simplement suivre le processus en cinq étapes ci-dessous (des liens vers la documentation suivront chaque étape) .

1. Créer une nouvelle application dans Kinvey Console ( voir documentation pour plus ):

   

   Toutes les applications que vous avez créées sont affichées dans l'onglet Kinvey Apps :

   

       

2. Connectez votre projet à cette application à l'aide de la clé et du secret de l'application (voir docs pour plus d'informations ):
       

   

   

       

3. Créez la page d'enregistrement sur laquelle l'utilisateur peut créer un compte (consultez la documentation pour plus d'informations ):

   

   Avec seulement quelques lignes de code, nous pouvons nous assurer qu'après une inscription réussie, l'utilisateur est redirigé vers la page d'accueil de l'application.

   

       

4. Créez la page de connexion sur laquelle l'utilisateur peut s'authentifier à l'aide d'informations d'identification (voir la documentation pour plus d'informations ).
       

   

   Encore une fois, avec seulement quelques lignes de code, nous pouvons nous assurer qu'après une authentification réussie, l'utilisateur est redirigé vers la page d'accueil de l'application. [19659056] Rediriger l'utilisateur après l'authentification "title =" Rediriger l'utilisateur après l'authentification "data-openoriginalimageonclick =" true "/>

       

5. Enfin, nous devons donner à l'utilisateur la possibilité de se déconnecter de la page d'accueil de l'application:

   

   Une fois déconnecté, l'utilisateur est redirigé vers le page de connexion si le périphérique ne prend pas en charge l'authentification biométrique, sinon l'utilisateur est redirigé vers une page d'authentification où l'utilisateur peut choisir d'utiliser un identifiant de connexion ou une authentification biométrique, ce qui prend quelques lignes de code supplémentaires.

   

Intégrez facilement l'authentification biométrique

Dans cet article, nous avons étudié l'intégration de l'authentification biométrique dans les applications mobiles et associez-le à un utilisateur de l'application. Le principal avantage de l'authentification biométrique est que vous pouvez facilement authentifier l'utilisateur sans vous souvenir des mots de passe complexes. Comme vous l'avez vu dans cet article, il est très facile d'intégrer l'authentification biométrique dans vos applications.

Nous l'avons réalisé à l'aide de NativeScript. Pour en savoir plus sur NativeScript avec Angular, cliquez ici ici .

De plus, comme vous pouvez le constater, nous avons utilisé Kinvey pour gérer les fonctionnalités de connexion, d'enregistrement et de déconnexion sans craindre de maintenir des sessions et de stocker les détails de l'utilisateur. dans la base de données. Kinvey fait tout pour vous. Si vous souhaitez commencer à utiliser Kinvey, veuillez créer un compte gratuit .

Bien démarrer avec Kinvey

Vous pouvez consulter le code source complet utilisé dans cet article. sur GitHub ici .