L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Authentification biométrique mobile pour applications d'entreprise
Apprenez à réutiliser facilement votre authentification d'entreprise existante et à intégrer l'authentification biométrique mobile dans vos applications avec NativeScript et Kinvey.
«Ma partie préférée du développement est la création d'écrans de connexion." – Aucun développeur, jamais
"Mon La partie préférée de cette application est l'écran de connexion. ”- Aucun utilisateur, jamais
Les écrans de connexion sont banals à construire, pleins de failles de sécurité potentielles et obligent souvent les développeurs à effectuer des intégrations complexes qu'ils ne veulent pas faire. [19659005] Mais les écrans de connexion sont également importants et la conception d’une expérience de connexion solide peut représenter un énorme gain de productivité pour votre organisation. Dans cet article, nous allons examiner deux fonctionnalités qui peuvent grandement simplifier le processus de connexion:
- Possibilité de réutiliser la configuration d'authentification existante de votre société ce qui vous évite de devoir créer un système entièrement nouveau pour chaque application que vous créez
- Authentification biométrique connexion avec quelque chose comme votre empreinte digitale ou votre visage, ce qui peut grandement simplifier le processus de connexion de vos applications internes
Dans cet article, vous allez créer des écrans de connexion pour les applications d'entreprise répondant ces exigences en utilisant NativeScript et Kinvey en trois étapes.
Voici un gif montrant la dernière application de cet article en action.
Prenons pour commencer sur comment faire fonctionner votre application.
NOTE : Le code source complet de cet article est disponible sur GitHub pour vous permettre de faire référence à à tout moment.
Étape n ° 1: Obtention une application en marche [1 9659013] En tant que développeur d'applications, l'une des premières décisions que vous devez prendre est de décider sur quelle plate-forme votre application doit s'exécuter. En ce qui concerne l'authentification biométrique, cette décision est plutôt simple, car les plates-formes mobiles (alias iOS et Android) sont actuellement les seules à permettre aux développeurs d'accéder aux capteurs d'empreintes digitales et de visage.
Dans cet article, vous allez découvrir: utilisez NativeScript pour rendre la création d'applications iOS et Android multiplates-formes aussi simple que possible. Vous utiliserez également le puissant backend de Kinvey, une plate-forme facile à utiliser, à haute productivité, qui s'intègre bien à NativeScript et qui vous aidera à effectuer certaines des tâches d'authentification les plus délicates que vous allez entreprendre à l'étape suivante.
]: Si vous débutez dans NativeScript et Kinvey, vous voudrez peut-être lire Comment démarrer avec Kinvey et NativeScript – Fast pour un survol de chacune des technologies.
Commençons par examiner les applications de base fournies par NativeScript, puis examinez comment exécuter ces applications localement à l'aide de l'interface de ligne de commande NativeScript.
Recherche d'échantillons NativeScript
NativeScript propose un certain nombre de modèles et d'exemples pour vous aider à créer rapidement des applications. , et vous pouvez les voir sur le Marché NativeScript .
Dans l'exemple de liste, vous verrez une application permettant de créer un «formulaire de connexion de bonne qualité». En cliquant sur cet exemple, l'ouvrira dans NativeScript Playground un environnement basé sur un navigateur permettant de développer des applications NativeScript.
NativeScript Playground est un environnement puissant sur lequel vous pouvez faire des expériences, en particulier si vous souhaitez construire iOS. et applications Android avec JavaScript. Mais pour les besoins actuels, vous souhaiterez utiliser le bouton Download (voir l’image ci-dessous) pour télécharger les fichiers de l’exemple localement.
Une fois le téléchargement terminé, continuez et décompressez le Dossier NSPlayground.zip . (N'hésitez pas à renommer le dossier avec le nom de votre projet.) À ce stade, vous êtes prêt à exécuter cette application sur votre ordinateur de développement. Pour ce faire, vous avez besoin de l'interface de ligne de commande NativeScript. [19659024] Utilisation de la CLI NativeScript
La CLI NativeScript vous permet de créer, d’installer et d’exécuter des applications NativeScript sur des périphériques iOS et Android. Vous pouvez installer l'interface de ligne de commande NativeScript en installant Node.js et en exécutant la commande suivante sur votre terminal ou votre invite de commande.
npm install -g nativescript
CONSEIL : Vous pouvez utiliser l'interface de ligne de commande NativeScript sur Windows, macOS et Linux. Toutefois, pour créer des applications pour les périphériques iOS, vous devez utiliser une machine macOS ou utiliser NativeScript Sidekick qui permet de déployer des applications iOS à partir de machines Windows ou Linux.
Ensuite, vous ' Vous devrez installer les dépendances iOS et Android appropriées qui permettent à NativeScript de créer des versions de vos applications. Les instructions complètes sur la façon de configurer cela sont hors de propos pour cet article, mais vous pouvez trouver un guide complet sur la documentation NativeScript.
Une fois cette configuration terminée, vous pouvez désormais exécuter votre application NativeScript sur iOS ou Appareils Android. Pour ce faire, connectez votre appareil mobile à votre ordinateur via USB, puis exécutez soit tns sous android soit tns sous ios (selon le système d'exploitation de votre appareil) pour déployer votre nouvelle application. .
tns courir android
tns courir ios
Une fois votre application lancée, l'interface utilisateur suivante apparaît sur votre appareil:
À ce stade, votre application est configurée et prête à fonctionner. Cela fait, passons à l'étape suivante et implémentons la première des deux exigences de cet article: réutiliser une configuration d'authentification d'entreprise.
Étape n ° 2: Configuration de l'authentification d'entreprise
Dans cette étape, nous allons regardez comment effectuer la partie authentification du flux de travail de connexion. Bien qu'il existe une multitude de flux de travail de connexion potentiels, il est rare que les applications d'entreprise utilisent des mécanismes d'authentification complètement nouveaux. C'est-à-dire que la plupart des entreprises ont déjà un fournisseur d'authentification tel qu'Active Directory en place.
Pour faciliter la connexion à votre fournisseur d'authentification existant le plus facilement possible, pour cette étape, nous allons utiliser Progress Kinvey. Kinvey propose une fonctionnalité appelée Mobile Identity Connect, qui vous permet de vous connecter à un grand nombre de fournisseurs d'authentification existants, tels qu'Active Directory, Facebook ou tout fournisseur prenant en charge des protocoles courants tels que SAML, OpenID ou OAuth.
Découvrez comment configurer une connexion avec votre fournisseur existant, puis implémenter cette connexion dans votre application NativeScript.
Configuration de Mobile Identity Connect
Le service Mobile Identity Connect (MIC) est un service qui permet aux applications mobiles d'utiliser identité d'entreprise existante et solutions d'authentification unique. MIC permet aux applications mobiles de s’intégrer à diverses solutions d’identité à l’aide d’une interface unique basée sur OAuth2.
Pour configurer MIC pour vos propres applications. vous devez d’abord configurer un nouveau service dans la Kinvey Console votre tableau de bord permettant de tout faire à Kinvey.
CONSEIL : Si vous êtes nouveau chez Kinvey, vous pouvez vous inscrire. un compte gratuit à l'adresse console.kinvey.com/signup .
Ensuite, vous souhaiterez utiliser les deux guides suivants pour configurer la connexion à votre fournisseur existant.
- Documentation de Kinvey sur MIC – Commencez ici, car la documentation vous explique les étapes à suivre pour configurer votre connexion et couvre un certain nombre de fournisseurs que vous pourriez utiliser.
- Authentification d'entreprise avec Kinvey – Lisez cette information. Ensuite, il s’agit d’un didacticiel qui vous explique comment configurer MIC avec un exemple d’instance Azure Active Directory. C'est une bonne référence à suivre lorsque vous suivez le processus.
Une fois votre service MIC configuré et prêt à fonctionner, examinons maintenant comment connecter votre backend Kinvey à votre application NativeScript.
Connexion de votre application à Kinvey
La connexion d'applications NativeScript à Kinvey est simple, en particulier si vos applications proviennent de NativeScript Playground (ce que notre exemple de connexion, si vous vous en souvenez bien, avait déjà installé), puisque Kinvey est déjà installé par défaut dans les applications Playground.
De ce fait, la seule chose à faire pour connecter votre application NativeScript à votre instance Kinvey consiste à ajouter une clé App Key et App Secret à l'emplacement approprié. Pour ce faire, ouvrez le fichier de votre application NativeScript [app/packagejson] et une nouvelle clé "pluginsData" avec le contenu suivant.
"pluginsData": {
"kinvey-nativescript-sdk": {
"config": {
"appKey": "VOTRE CLÉ D'APP ICI",
"appSecret": "VOTRE APP SECRET ICI",
"redirectUri": "sde: //"
}
}
}
Ensuite, vous devez remplacer les deux valeurs de substitution de la configuration ci-dessus par vos propres valeurs. Pour les obtenir, visitez la console Kinvey pour votre application et appuyez sur les trois points verticaux dans le coin supérieur gauche (voir l'image ci-dessous). Vous y trouverez à la fois les valeurs App Key et App Secret dont vous avez besoin.
Une fois que vous avez terminé, votre complète app / Le fichier package.json devrait ressembler à ceci:
{
"Android": {
"v8Flags": "--expose_gc",
"forceLog": vrai
},
"main": "main.js",
"name": "tns-template-blank-ng",
"version": "3.1.1",
"pluginsData": {
"kinvey-nativescript-sdk": {
"config": {
"appKey": "kid_rkDJUINIQ",
"appSecret": "17282f9d91da4af7b398855e32ea4dd0",
"redirectUri": "sde: //"
}
}
}
}
Pour voir à quoi ressemble cette configuration d'authentification, passons à la dernière étape de cet article et ajoutons du code pour lier le tout.
Étape n ° 3: Lier l'authentification biométrique
Dans cette étape, vous ' Basculez l'écran de connexion de votre application pour utiliser votre configuration MIC Kinvey, ainsi que pour ajouter un flux de travail d'authentification biométrique permettant aux utilisateurs de se connecter avec leur empreinte digitale ou leur visage. Commençons par faire fonctionner le processus d'authentification, puis passons à la pièce biométrique.
Câblage du processus de connexion
L'application par défaut que vous avez téléchargée à partir de NativeScript Playground est configurée pour un processus de connexion dans lequel l'utilisateur fournit une Le nom d'utilisateur et le mot de passe ressemblent à ceci:
Dans l'exemple d'application biométrique de cet article, toutefois, vous déléguez le processus de connexion à votre propre mécanisme d'authentification d'entreprise, ce qui vous permet de simplifier considérablement le code de connexion actuel. Pour ce faire, commencez par ouvrir votre fichier app / login / login.component.html et remplacez son contenu par le code suivant.
Ouvrez ensuite votre fichier app / login / login.component.css et remplacez son contenu par le code suivant:
.form {
marge gauche: 30;
marge droite: 30;
alignement vertical: milieu;
}
.logo {
marge inférieure: 12;
hauteur: 90;
poids de police: gras;
}
.entête {
alignement horizontal: centre;
taille de police: 25;
poids de police: 600;
marge inférieure: 70;
text-align: center;
couleur: # D51A1A;
}
.btn-primary {
marge: 30 5 15 5;
}
Si votre application NativeScript est toujours en cours d'exécution, vous devriez voir ces modifications immédiatement. Si ce n'est pas le cas, rendez-vous à votre terminal ou à l'invite de commande et utilisez la commande tns run ios ou tns run android pour redéployer l'application sur votre appareil. Lorsque vous avez terminé, vous constaterez que l’application a désormais un aspect simplifié.
REMARQUE : le logo en losange et l’en-tête "NOM APP" sont des espaces réservés. N'hésitez pas à les remplacer par le logo et le nom de votre société.
Ensuite, ouvrez votre fichier app / shared / user.service.ts et remplacez son contenu par le code suivant, qui ajoute quelques nouveaux méthodes dont vous aurez besoin pour MIC et pour l'authentification biométrique. Plus précisément, la fonction Kinvey.User.loginWithMIC () intègre réellement cette application au service d'authentification Kinvey que vous avez créé pour vous connecter à votre fournisseur d'authentification.
import {Injectable} from "@ angular / core ";
importer {Kinvey} de "kinvey-nativescript-sdk";
importer {getBoolean, setBoolean} de "tns-core-modules / application-settings";
@Injectable ()
classe d'exportation UserService {
isLoggedIn () {
return !! Kinvey.User.getActiveUser ();
}
s'identifier() {
retourne Kinvey.User.loginWithMIC ()
.catch (this.handleErrors);
}
Connectez - Out() {
retourne Kinvey.User.logout ()
.catch (this.handleErrors);
}
handleErrors (erreur: Kinvey.BaseError) {
console.error (error.message);
renvoyer Promise.reject (error.message);
}
setBiometricAuthOptIn (isOptedIn: boolean) {
setBoolean ("biometricAuthOptIn", isOptedIn);
}
getBiometricAuthOptIn () {
return getBoolean ("biometricAuthOptIn");
}
}
Enfin, ouvrez votre fichier app / login / login.component.ts et remplacez son contenu par le code suivant, qui supprime un tas d'exemples de code inutiles et appelle le de UserService ] login () méthode
import {Component} from "@ angular / core";
importer {alert, confirmer} depuis "tns-core-modules / ui / dialogs";
importer {page} de "tns-core-modules / ui / page";
importer {RouterExtensions} de "nativescript-angular / router";
importer {UserService} de "../shared/user.service";
const APP_NAME = "NOM APP";
@Composant({
sélecteur: "app-login",
moduleId: module.id,
templateUrl: "./login.component.html",
styleUrls: ['./login.component.css']
})
classe d'exportation LoginComponent {
constructeur (page privée: page, private userService: UserService, private routerExtensions: RouterExtensions) {
this.page.actionBarHidden = true;
}
s'identifier() {
this.userService.login ()
.catch (() => {
alerte({
titre: APP_NAME,
okButtonText: "OK",
message: "Malheureusement, nous n'avons pas trouvé votre compte."
});
})
.then (() => {
this.routerExtensions.navigate (["/home"]{clearHistory: true});
});
}
}
Lorsque vous enregistrez ces modifications, l'interface de ligne de commande NativeScript doit mettre automatiquement votre application à jour sur votre appareil. Quand cela se produit, essayez votre nouvelle application. Si tout se passe bien, vous devriez maintenant avoir une application mobile qui exploite votre fournisseur d'authentification existant.
Vous disposez maintenant d'une application multiplateforme pour iOS et Android qui réutilise votre système d'authentification d'entreprise existant.
Voyons comment vous pouvez ajouter encore plus de puissance à cette configuration en intégrant l'authentification biométrique.
Ajout de l'authentification biométrique
L'un des gros avantages de NativeScript est que vous avez accès à une énorme bibliothèque de plugins gratuits et open source dans NativeScript Marketplace. Chaque plugin permet aux développeurs NativeScript de se connecter aux fonctionnalités natives via des API JavaScript ou TypeScript.
Pour l'authentification biométrique iOS et Android vous souhaiterez rechercher le NativeScript. Le plug-in “Fingerprint Auth” est un plug-in qui vous donne accès à des capteurs d'empreinte digitale, à Touch ID et à Face ID. Une fois la page du plug-in affichée, copiez la commande d'installation à droite de l'écran.
NOTE : Le plug-in Fingerprint Auth utilise l'identifiant de visage pour l'authentification sur iPhone X et XS.
Cette commande copiée, retournez à votre terminal ou à une invite de commande, utilisez la commande Ctrl + C pour arrêter la commande existante (si elle est existante). toujours en cours), collez la commande tns plugin puis appuyez sur Entrez pour lancer l’installation.
Une fois le plug-in installé, continuez et recommencez. -exécuter soit tns exécuter ios ou tns exécuter android pour que l'application s'exécute à nouveau sur votre appareil. Lorsque l'application est prête à fonctionner, rouvrez votre fichier app / login / login.component.ts et remplacez son contenu par le code suivant. (Nous verrons ce qui se passe ici dans une minute.)
importer {Component} de "@ angular / core";
importer {alert, confirmer} depuis "tns-core-modules / ui / dialogs";
importer {page} de "tns-core-modules / ui / page";
importer {RouterExtensions} de "nativescript-angular / router";
importer {FingerprintAuth, BiometricIDAvailableResult} de "nativescript-fingerprint-auth";
importer {UserService} de "../shared/user.service";
const APP_NAME = "NOM APP";
@Composant({
sélecteur: "app-login",
moduleId: module.id,
templateUrl: "./login.component.html",
styleUrls: ['./login.component.css']
})
classe d'exportation LoginComponent {
fingerprintAuth: FingerprintAuth;
constructeur (page privée: page, private userService: UserService, private routerExtensions: RouterExtensions) {
this.page.actionBarHidden = true;
this.fingerprintAuth = new FingerprintAuth ();
}
s'identifier() {
if (this.userService.getBiometricAuthOptIn () && this.userService.isLoggedIn ()) {
this.biometricAuth ();
revenir;
}
this.userService.login ()
.catch (() => {
alerte({
titre: APP_NAME,
okButtonText: "OK",
message: "Malheureusement, nous n'avons pas trouvé votre compte."
});
})
.then (() => {
this.fingerprintAuth.available ()
.then ((result: BiometricIDAvailableResult)) => {
// L'authentification biométrique n'est pas disponible. Il suffit de les naviguer vers la page d'accueil.
if (! result.any) {
this.navigateHome ();
revenir;
}
var authName = result.face? "Identité faciale": "votre empreinte digitale";
confirmer({
titre: APP_NAME,
message: `Voulez-vous utiliser $ {authName} pour vous authentifier lors de vos prochaines visites?`,
okButtonText: "Oui",
cancelButtonText: "Non"
}). then ((result) => {
this.userService.setBiometricAuthOptIn (résultat);
si (résultat) {
this.biometricAuth ();
} autre {
// L'utilisateur ne veut pas utiliser l'authentification biométrique. Il suffit de les naviguer vers la page d'accueil.
this.navigateHome ();
}
});
});
});
}
navigation privéeHome () {
this.routerExtensions.navigate (["/home"]{clearHistory: true});
}
biometricAuth privé () {
renvoie this.fingerprintAuth.verifyFingerprint ({
titre: APP_NAME,
message: ""
}). then ((entryPassword: string) => {
if (entryPassword === non défini) {
this.navigateHome ();
}
});
}
}
Décrivons ce qui se passe dans ce fichier, en commençant par ce nouveau bloc de code qui survient après la connexion d’un utilisateur.
this.fingerprintAuth.available ()
.then ((result: BiometricIDAvailableResult)) => {
// L'authentification biométrique n'est pas disponible. Il suffit de les naviguer vers la page d'accueil.
if (! result.any) {
this.navigateHome ();
revenir;
}
...
});
Vous utilisez ici la méthode available () du plug-in d'authentification des empreintes digitales, qui vérifie si un capteur biométrique est disponible sur le périphérique de l'utilisateur. S'il n'y a pas (! Result.any ), il vous suffit de naviguer l'utilisateur vers la page d'accueil de votre application. Toutefois, si l'utilisateur dispose d'un capteur quelconque, vous devez ensuite exécuter le code suivant:
var authName = result.face? "Identité faciale": "votre empreinte digitale";
confirmer({
titre: APP_NAME,
message: `Voulez-vous utiliser $ {authName} pour vous authentifier lors de vos prochaines visites?`,
okButtonText: "Oui",
cancelButtonText: "Non"
}). then ((result) => {
this.userService.setBiometricAuthOptIn (résultat);
si (résultat) {
this.biometricAuth ();
} autre {
// L'utilisateur ne veut pas utiliser l'authentification biométrique. Il suffit de les naviguer vers la page d'accueil.
this.navigateHome ();
}
});
Vous utilisez ici la méthode confirm () de NativeScript pour demander à l’utilisateur s’il souhaite utiliser son capteur biométrique pour s’authentifier lors de ses prochaines visites. Vous devez d’abord enregistrer la préférence de l’utilisateur ( this.userService.setBiometricAuthOptIn () ), car vous utiliserez cette préférence dans une minute. Ensuite, si l'utilisateur souhaite utiliser l'authentification biométrique ( si (résultat) ), vous appelez une méthode this.biometricAuth () (ci-dessous). Sinon, vous n'avez plus de travail à faire, il vous suffit donc de naviguer vers l'écran d'accueil ( this.navigateHome () ).
private biometricAuth () {
renvoie this.fingerprintAuth.verifyFingerprint ({
titre: APP_NAME,
message: ""
}). then ((entryPassword: string) => {
if (entryPassword === non défini) {
this.navigateHome ();
}
});
}
Enfin, si vous atteignez ce point dans votre code, vous savez que l’utilisateur souhaite utiliser l’authentification biométrique pour l’authentification. Vous devez donc appeler la méthode verifyFingerprint () du plugin d’authentification d’empreinte digitale pour effectuer le contrôle. Si l'utilisateur réussit la vérification si (ENTREPASSWORD === non défini) vous poursuivez et accédez à la page d'accueil. Si l'utilisateur échoue à la vérification, il devra se réauthentifier pour continuer.
Pour voir à quoi cela ressemble, retournez à votre application et relancez la procédure de connexion. Une fois la connexion établie, le message de confirmation vous demandant si vous souhaitez utiliser un capteur d'empreintes digitales ou un visage doit s'afficher.
Lorsque vous répondez Oui vous devez être invité à vous authentifier à l'aide d'un capteur biométrique. et, une fois cela fait, vous devriez être redirigé vers l'écran d'accueil de l'application.
Comme vous pouvez le constater, NativeScript facilite la connexion aux capteurs biométriques via des API JavaScript faciles à utiliser. Mais avant de terminer, couvrons une dernière fonctionnalité de cette application. Si vous regardez le début de la méthode de login () du composant de connexion, vous verrez le bloc de code suivant:
if (this.userService.getBiometricAuthOptIn () && this.userService.isLoggedIn () ) {
this.biometricAuth ();
revenir;
}
N'oubliez pas que vous avez précédemment indiqué si l'utilisateur souhaitait s'authentifier à l'aide de l'authentification biométrique. À présent, vous vérifiez deux choses: premièrement, si l'utilisateur a activé l'authentification biométrique et, deuxièmement, si l'utilisateur est toujours connecté (c'est-à-dire qu'il a toujours un jeton valide).
Pourquoi faire cela? Supposons que l'utilisateur ferme votre application et revienne plusieurs heures plus tard. Lorsque l'utilisateur clique sur Login il doit normalement passer par le processus d'authentification de l'entreprise, ce qui peut s'avérer fastidieux. Au lieu de cela, ici, vous utilisez le capteur biométrique de l’utilisateur pour vérifier son identité. S'il y a correspondance, l'utilisateur peut ignorer le processus d'autorisation de l'entreprise et accéder directement à l'écran d'accueil.
Vous pouvez modifier le code de plusieurs manières pour répondre aux besoins de votre application. ou les exigences de l'entreprise. Par exemple, vous pouvez stocker un horodatage chaque fois que l'utilisateur s'authentifie avec succès. Vous pouvez ensuite utiliser cet horodatage pour déterminer le moment où l'utilisateur doit s'authentifier à nouveau. Vous pouvez également demander aux utilisateurs de s’authentifier à nouveau à l’aide de capteurs biométriques avant toute action importante, telle que le chargement d’une carte de crédit ou la suppression de gros morceaux de données.
Dans l’ensemble, le plug-in NativeScript fingerprint auth plugin facilite l’exploitation des données biométriques. capteur disponible sur les appareils iOS et Android actuels, vous permettant de créer la meilleure expérience d'authentification possible pour vos utilisateurs.
Conclusion
Dans cet article, vous avez appris à utiliser NativeScript et Kinvey pour créer un écran de connexion qui exploite à la fois votre mécanisme d'authentification existant et vos capteurs biométriques. Ensemble, vous disposez maintenant des outils nécessaires pour créer un processus de connexion puissant pour votre organisation.
Vous pouvez trouver le code complet pour cet article sur GitHub . Et si vous avez des questions, n'hésitez pas à vous adresser à vous dans les commentaires.
Source link