Olá, neste artigo irei demonstrar como implementar autenticação biométrica em suas aplicações Xamarin.Forms.
ADICIONANDO O NUGET PACKAGE
Para o exemplo será utilizado o plugin Fingerprint, instale o plugin em todos os seus projetos.
Android
Em seu projeto .Android, instale o Plugin CurrentActivity.
MainActivity.cs
No arquivo MainActivity, atribua a Activity para SetCurrentActivityResolver e inicialize o plugin CrossCurrentActivity como demonstrado a seguir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using Android.App; | |
using Android.Content.PM; | |
using Android.Runtime; | |
using Android.OS; | |
using Plugin.Fingerprint; | |
using Plugin.CurrentActivity; | |
namespace BiometricDemo.Droid | |
{ | |
[Activity(Label = "BiometricDemo", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] | |
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity | |
{ | |
protected override void OnCreate(Bundle savedInstanceState) | |
{ | |
TabLayoutResource = Resource.Layout.Tabbar; | |
ToolbarResource = Resource.Layout.Toolbar; | |
base.OnCreate(savedInstanceState); | |
Xamarin.Essentials.Platform.Init(this, savedInstanceState); | |
global::Xamarin.Forms.Forms.Init(this, savedInstanceState); | |
CrossFingerprint.SetCurrentActivityResolver(() => CrossCurrentActivity.Current.Activity); | |
CrossCurrentActivity.Current.Init(this, savedInstanceState); | |
LoadApplication(new App()); | |
} | |
public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults) | |
{ | |
Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults); | |
base.OnRequestPermissionsResult(requestCode, permissions, grantResults); | |
} | |
} | |
} |
AndroidManifest.xml
Adicione as seguintes permissões no arquivo AndroidManifest.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.julianocustodio.biometricdemo"> | |
<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="27" /> | |
<application android:label="BiometricDemo.Android"></application> | |
<uses-permission android:name="android.permission.USE_FINGERPRINT" /> | |
<uses-permission android:name="com.samsung.android.providers.context.permission.WRITE_USE_APP_FEATURE_SURVEY" /> | |
</manifest> |
iOS
Info.plist
Adicione a permissão para que dispositivos que utilizem o iOS 11.3 ou superior, possam utilizar o Face ID.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<key>NSFaceIDUsageDescription</key> | |
<string>Need your face to unlock secrets!</string> |
XAML
Crie uma Label para demonstrar uma mensagem de resultado e um Button para chamar o método de autenticação.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" | |
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
xmlns:local="clr-namespace:BiometricDemo" | |
x:Class="BiometricDemo.MainPage" Padding="10"> | |
<StackLayout VerticalOptions="Center"> | |
<Button Clicked="Autenticar" Text="Autenticar" BackgroundColor="#F3F3F3"/> | |
<Label x:Name="Resultado" Text="" HorizontalTextAlignment="Center"/> | |
</StackLayout> | |
</ContentPage> |
C#
Primeiro utilize o método IsAvailableAsync para verificar se o dispositivo possui o sensor de biometria. Depois utilize o AuthenticateAsync para ativar o sensor como demonstrado no exemplo a seguir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System; | |
using System.ComponentModel; | |
using Plugin.Fingerprint; | |
using Xamarin.Forms; | |
namespace BiometricDemo | |
{ | |
[DesignTimeVisible(true)] | |
public partial class MainPage : ContentPage | |
{ | |
public MainPage() | |
{ | |
InitializeComponent(); | |
} | |
private async void Autenticar(object sender, EventArgs e) | |
{ | |
var result = await CrossFingerprint.Current.IsAvailableAsync(true); | |
if (result) | |
{ | |
var auth = await CrossFingerprint.Current.AuthenticateAsync("Toque no sensor"); | |
if (auth.Authenticated) | |
{ | |
Resultado.Text = "Autenticado com sucesso! 🙂"; | |
} | |
else | |
{ | |
Resultado.Text = "Impressão digital não reconhecida"; | |
} | |
} | |
else | |
{ | |
await DisplayAlert("Ops","Dispositivo não suportado","OK"); | |
} | |
} | |
} | |
} |
Resultado
iOS
Android
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Boa noite Juliano, como está?
Atualmente meu app, está autenticando no web-service com usuário e senha. Gostaria de adicionar o recurso de autenticação por biometria, porém, ainda não tenho certeza do fluxo correto. Pois para chegar ao web-service preciso necessariamente do usuário e senha.
O correto seria na primeira autenticação usar os mesmos e depois armazenar no security storage, para quando a biometria passar mandar o mesmos?
CurtirCurtir
Olá Jackson, estou bem e você ?
Exatamente, a primeira vez você solicita usuário e senha e pede para configurar a biometria. Assim, na sequencia você faz uma validação apenas na biometria, quando ela for compativel, você envia ao servidor o usuário e senha.
Espero ter ajudado.
CurtirCurtido por 1 pessoa
Esclareceu minhas dúvidas. Muito obrigado.
CurtirCurtir