octobre 17, 2024

Utilisation de l’identification biométrique dans .NET MAUI

Découvrez comment intégrer l’identification biométrique dans vos applications .NET MAUI.

La création d’applications avec une sécurité renforcée pour les informations qu’elles contiennent offre aux utilisateurs une expérience plus sûre. Les méthodes courantes incluent l’identification faciale ou par empreinte digitale, qui vérifie l’identité de l’utilisateur avant d’accorder l’accès. Les applications bancaires en sont un excellent exemple. Ils nécessitent un niveau de sécurité élevé et utilisent généralement ce type d’authentification.

Essentiellement, nous pouvons obtenir une réponse directe quant à savoir si l’empreinte digitale et la reconnaissance faciale correspondent au propriétaire enregistré. Il est crucial de noter que nous n’avons pas accès à ces informations et qu’elles ne peuvent donc pas être manipulées ou modifiées. Nous disposons uniquement des informations nécessaires pour accorder l’accès à l’application souhaitée.

Dans cet article, vous apprendrez comment implémenter l’identification biométrique dans .NET MAUI à l’aide de Plugin.Maui.Biométriquede manière simple.

Configuration initiale

Pour mettre en œuvre correctement Identification biométriqueveuillez suivre ces instructions :

1.Installation : Tout d’abord, assurez-vous d’installer le Plugin.Maui.Biométrique Paquet NuGet.

Plugin.Maui.Biometric - Paquet Nuget

2. Commençons par ajouter quelques paramètres de plate-forme. Pour les mettre en œuvre, veuillez suivre les instructions fournies ci-dessous :

Androïde Sur Androïd : Nous avons deux façons de procéder. Voyons:

UN. Accédez à Plateforme ➖ Android ➖ AndroidManifest.cs ➖ Clic droit ➖ Éditeur de code source et ajoutez le android.permission.USE_BIOMETRIC. Cela indique que notre application nécessite une authentification biométrique.

<uses-permission android:name="android.permission.USE_BIOMETRIC" />

B. Ou accédez simplement à Plateforme ➖ Android ➖ AndroidManifest.cs➖ Double-cliquez pour ouvrir une interface graphique. Faites défiler vers le bas et recherchez la section « Autorisations requises ». Écrivez « biométrique » dans la barre de recherche et l’autorisation « UtiliserBiométrique » apparaîtra. Cochez simplement la case pour appliquer cette autorisation.

Autorisations Android

IOS Sur iOS : accédez à Plateforme ➖ iOS ➖ Info.plist ➖ Double-cliquez pour ouvrir une interface graphique.

Ajoutez le NSFaceIDUsageDescription autorisation.
De plus, fournissez une description de l’autorisation. Pour cet exemple, utilisez « Nous avons besoin de votre visage pour débloquer » comme valeur. Cette description expliquera à l’utilisateur pourquoi l’application a besoin de cette autorisation.

Après avoir terminé ces étapes, l’autorisation « Confidentialité – Description de l’utilisation de Face ID » apparaîtra dans Info.plist, comme illustré dans l’image ci-dessous :

Autorisations iOS

Commençons !

Voyons deux options pour développer ce projet :

La première consiste à mettre en œuvre l’injection de dépendances.
Et la seconde consiste à utiliser une implémentation statique.

Commençons par une introduction sur la façon de préparer l’environnement pour l’injection de dépendances si vous choisissez de procéder de cette manière. Nous continuerons ensuite avec les étapes d’implémentation statiques, que nous utiliserons pour développer l’exemple explicatif de cet article.

Injection de dépendance

1. Accédez au MauiProgram.cs déposer et appliquer les étapes suivantes :

➖ Au début de ce fichier, ajoutez ce qui suit :

using Plugin.Maui.Biometric;

➖ Enregistrons le service d’authentification :

builder.Services.AddSingleton <IBiometric>
(BiometricAuthenticationService.Default);

2. Accédez à votre MauiProgram.cs et accédez à la page où le plugin a été implémenté. Dans cet exemple, référez-vous à Page principale .. Dans le constructeur de page, incluez « IBiometric biometric » comme détaillé ci-dessous :

using Plugin.Maui.Biometric;
namespace BiometricTest;

public partial class MainPage : ContentPage
{

    public MainPage(IBiometric biometric)
    {
	    InitializeComponent();
    }
}

Avec cette implémentation, il vous suffit de faire référence à l’alias « biométrique » que nous avons ajouté à l’étape précédente, au lieu d’utiliser directement BiometricAuthenticationService.Default (l’implémentation statique).

Par exemple, vous pouvez effectuer les opérations suivantes :

biomeetric.GetAuthenticationStatusAsync();

Vous êtes maintenant prêt à accéder à la méthode ou à la propriété dont vous avez besoin ! 🚀

Implémentation statique

Dans ce cas, vous devez utiliser le préfixe « BiometricAuthenticationService.Default » à chaque fois que vous accédez à une méthode ou une propriété. Par exemple:

BiometricAuthenticationService.Default.GetAuthenticationStatusAsync();

La méthode AuthenticateAsync

Nous nous concentrerons sur le AuthenticateAsync méthode, qui est au cœur de cette API. Je vous encourage à explorer d’autres méthodes pour acquérir une compréhension plus profonde.

Dans cet exemple, nous utiliserons le projet par défaut créé par Visual Studio, qui inclut le OnCounterClicked méthode.

Pour commencer, veuillez convertir cette méthode en méthode asynchrone, comme indiqué ci-dessous :

private async void OnCounterClicked(object sender, EventArgs e)
{

}

Vous pourrez maintenant voir les étapes et le code que vous devez ajouter dans le OnCounterClicked méthode expliquée en détail. Regardons d’abord la définition des éléments qui le composent.

Obtenons le résultat de l’authentification.

Utilisons le AuthenticateAsync méthode pour déterminer si l’authentification a réussi. Cela nécessite deux paramètres :

🔹 La demande d’authentification : Cela nous permet de préciser les détails de la demande d’authentification biométrique. Il possède diverses propriétés telles que le titre, la description, le sous-titre, le texte négatif et bien plus encore que je vous encourage à explorer directement. Pour cet exemple, nous ajouterons le titre et le texte négatif.

🔹 Jeton d’annulation : Propage une notification indiquant que les opérations doivent être annulées. Le CancellationToken nous permet d’annuler une action en cours en fonction de certains scénarios que nous établissons dans le code. Par exemple, si un utilisateur appuie sur le bouton d’authentification mais ne vérifie pas son empreinte digitale ou n’interagit pas avec l’application pendant plusieurs secondes, nous pouvons supposer qu’il ne souhaite plus continuer. Nous pouvons alors annuler cette exécution spécifique, comme un timeout.

Cependant, si vous ne souhaitez pas utiliser cette fonctionnalité, vous pouvez désactiver le jeton d’annulation en le définissant sur CancellationToken.None.

Ici, nous fournissons un exemple de variable stockant ces résultats. Notez qu’il faut le faire précéder de await.

var result = await BiometricAuthenticationService.Default.AuthenticateAsync(

new AuthenticationRequest()
{
    Title = "Biometric Request",
    NegativeText = "Cancel authentication"
    },
    CancellationToken.None
);

    //// The following code block goes here
}

Vérifions l’état d’authentification. Si l’authentification réussit, le bouton commencera à compter le nombre de clics. (Insérez ce bloc de code exactement à l’endroit où il est écrit « Le bloc de code suivant va ici », comme indiqué dans le bloc précédent.)

if (result.Status == BiometricResponseStatus.Success)
{
    count++;
    if (count == 1)
	    CounterBtn.Text = $"Clicked {count} time";
	    else
	    CounterBtn.Text = $"Clicked {count} times";
	    SemanticScreenReader.Announce(CounterBtn.Text);
} else {
    await DisplayAlert("Error", "Authentication failed.", "Ok");
}

✍️ Nous avons utilisé le BiometricResponseStatus énumération avec le Success valeur pour un résultat satisfaisant. Si vous souhaitez gérer un résultat insatisfaisant, utilisez le Failure valeur.

Notre mise en œuvre est terminée ! Voyons maintenant comment le tester à l’aide de l’émulateur Android pour la dernière étape. 😍

Test dans un émulateur Android

Si l’authentification échouel’exemple d’application affichera un message d’erreur comme indiqué ci-dessous :

L'authentification échoue

Enfin, examinons comment tester les résultats en cas d’authentification réussie.

Pour ce faire, nous devons configurer une empreinte digitale dans l’émulateur. Suivez ces étapes :

Avant de commencer :

Localisez les trois points sur le côté droit de l’émulateur et cliquez dessus. Cette action ouvrira une boîte de dialogue avec plusieurs options. Recherchez et sélectionnez l’option FingerPrint sur le côté gauche. Gardez cette boîte de dialogue ouverte car nous en aurons besoin plus tard.