• laurent@lioncoding.com

Xamarin.Forms FingerPrint


De nos jours, la sécurité d’accès aux données personnelles stockées sur les smartphones est devenue une priorité pour les utilisateurs de smartphones.

Bon nombre d’utilisateurs ont recours au capteur d’empreinte digitale pour verrouiller ou déverrouiller leur smartphone. Les technologies de reconnaissance biométrique présentent de nombreux avantages pour ceux qui souhaitent protéger leurs précieuses données sans avoir à retenir une infinité de mot passe. Nous allons voir aujourd’hui qu’il est possible d’utiliser cette technologie pour sécuriser l’accès à son application Xamarin.Forms.

Les librairies nécessaires

Nous utiliseront le plugin Plugin.Fingerprint pour la gestion de l’authentification par empreinte digitale et Xamarin.Forms.PancakeView pour créer des rendus intéressants de notre vue(présentant de fausses données sensibles).

Configurations

Le plugin Plugin.Fingerprint nécessite quelques configurations avant fonctionnement.

Sur IOS

Ajoutez NSFaceIDUsageDescription au fichier Info.plist pour décrire la raison pour laquelle votre application utilisera l’empreinte digitale.

<key>NSFaceIDUsageDescription</key>
<string>Need your face to unlock secrets!</string>

Android

Définir la version du SDK cible

La version du SDK cible doit être> = 6.0.

Demande d’autorisation dans AndroidManifest.xml

La première ligne concerne l’API Android standard et la seconde, les appareils Samsung utilisant l’API Pass.

<uses-permission android:name="android.permission.USE_FINGERPRINT" />
<uses-permission android:name="com.samsung.android.providers.context.permission.WRITE_USE_APP_FEATURE_SURVEY" />

Code de la vue dont nous voulons protéger

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="FingerPrintXamarin.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
    Title="MY XAM BANK"
    mc:Ignorable="d">

    <ScrollView Orientation="Vertical" VerticalScrollBarVisibility="Never">
        <StackLayout
            x:Name="Content"
            BackgroundColor="White"
            IsVisible="False">
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                    <Image HorizontalOptions="Start" Source="bankbuilding" />
                    <Label
                        FontAttributes="Bold"
                        FontSize="24"
                        HorizontalOptions="Center"
                        Text="XAM Bank"
                        TextColor="White"
                        VerticalOptions="Center" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                    <Image HorizontalOptions="Start" Source="bankcardsc" />
                    <Label
                        FontSize="24"
                        HorizontalOptions="Center"
                        Text="1245678908655433"
                        TextColor="White"
                        VerticalOptions="Center" />
                </StackLayout>
            </Frame>
            <Grid ColumnSpacing="5" HorizontalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <pancake:PancakeView
                    Grid.Row="0"
                    Grid.Column="0"
                    Margin="5,0,0,0"
                    BackgroundColor="#5C72AB"
                    BorderIsDashed="true"
                    CornerRadius="60,0,0,60"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                    <StackLayout
                        HeightRequest="100"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="Center">
                        <Image HorizontalOptions="Center" Source="amount" />
                        <Label
                            FontSize="24"
                            HorizontalOptions="Center"
                            Text="200,000 $"
                            TextColor="White" />
                    </StackLayout>
                </pancake:PancakeView>
                <pancake:PancakeView
                    Grid.Row="0"
                    Grid.Column="1"
                    Margin="0,0,5,0"
                    BackgroundColor="#5C72AB"
                    BorderIsDashed="true"
                    CornerRadius="0,60,60,0"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                    <StackLayout
                        HeightRequest="100"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="Center">
                        <Image HorizontalOptions="Center" Source="deposit" />
                        <Label
                            FontSize="24"
                            HorizontalOptions="Center"
                            Text="130,000 $"
                            TextColor="White" />
                    </StackLayout>
                </pancake:PancakeView>
            </Grid>

            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                    <Image HorizontalOptions="Start" Source="cardsecurityc" />
                    <Label
                        FontAttributes="Bold"
                        FontSize="24"
                        HorizontalOptions="Center"
                        Text="3D Secure"
                        TextColor="White"
                        VerticalOptions="Center" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                    <Image
                        Aspect="AspectFill"
                        HorizontalOptions="Start"
                        Source="payment.png" />
                    <Label
                        FontSize="24"
                        HorizontalOptions="Center"
                        Text="123,000 $"
                        TextColor="White"
                        VerticalOptions="Center" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                    <Image
                        Aspect="AspectFill"
                        HorizontalOptions="Start"
                        Source="wallet.png" />
                    <Label
                        FontSize="24"
                        HorizontalOptions="Center"
                        Text="0,000 $"
                        TextColor="White"
                        VerticalOptions="Center" />
                </StackLayout>
            </Frame>
        </StackLayout>
    </ScrollView>
</ContentPage>

Par défaut, le contenu de notre vue est invisible. Nous afficherons celui-ci si l’utilisateur prouve son empreinte au cours de la phase d’authentification.

Processus d’authentification

Vérifions si le smartphone dispose d’un capteur d’empreinte digitale et est opérationnel

var availableResult = await CrossFingerprint.Current.GetAvailabilityAsync(false);
if (availableResult.HasFlag(FingerprintAvailability.Available))
{
    // Available
}else
{
    // Not available
    Content.IsVisible = true;
}

La meilleur manière de faire est de donner la possibilité à l’utilisateur d’activer ou pas l’authentification par empreinte digitale dans les paramètres de l’application

Si le smartphone en dispose alors forçons l’usage

var result = await CrossFingerprint.Current.AuthenticateAsync("Prove you have fingers!");
if (result.Authenticated)
{
    Content.IsVisible = true;
}
else
{
    // User canceled authentication dialog then close the app
}

Vous remarquerez que le contenu de notre vue ne sera visible que si l’utilisateur a correctement prouvé son empreinte digitale.

Code complet

using Plugin.Fingerprint;
using Plugin.Fingerprint.Abstractions;
using System.ComponentModel;
using Xamarin.Forms;

namespace FingerPrintXamarin
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
            FingerPrintAsync();
        }

        async void FingerPrintAsync()
        {
            var availableResult = await CrossFingerprint.Current.GetAvailabilityAsync(false);

            if (availableResult.HasFlag(FingerprintAvailability.Available))
            {
                var result = await CrossFingerprint.Current.AuthenticateAsync("Prove you have fingers!");
                if (result.Authenticated)
                {
                    Content.IsVisible = true;
                }
                else
                {
                    // Close the App
                }
            }else
            {
                await DisplayAlert("FingerPrint", "Not available", "OK");
                Content.IsVisible = true;
            }


        }


    }
}

L’astuce pour fermer l’application sera décrite dans un futur article mais celle-ci est déjà présente dans le code source de cet exemple de projet(disponible sur Github).

Ressources

👉 https://github.com/egbakou/FingerPrintXamarin le lien vers le projet complet sur Github.

N’hésitez pas à me contacter via le formulaire de contact ou par ou par mail.🙏


Commentaires