Android Fingerprint Auth no Flutter
A utilização do leitor biométrico como forma de autenticação está cada vez mais comum na vida dos usuários mobile, seja pela praticidade de utilização, seja pela segurança que o método transmite. Vamos aprender a integrar a autenticação biométrica em um app Flutter? Simbooooora
Criando o projeto do aplicativo
Vamos criar o projeto do aplicativo Fingerprint Auth, se você utiliza o Android Studio basta selecionar no menu principal a opção “start a new Flutter project”. Ou se preferir, digite no terminal :
flutter create fingerprint_authApós criado o projeto é so abrir na sua IDE preferida
Adicionando o plugin local_auth nas dependências
Para utilizarmos o recurso de autenticação biométrica devemos utilizar o plugin local_auth. Esse plugin é responsável por facilitar a utilização do sensor biométrico no IOS e no Android.
Para adicionar o plugin, abra o arquivo pubspec.yaml e insira:
dependencies:
local_auth: ^0.4.0+1O resultado final deve ficar semelhante a isso:
dependencies:
local_auth: ^0.4.0+1
flutter:
sdk: flutter
cupertino_icons: ^0.1.2Após a adição, execute o comando a seguir para baixar a dependência
$ flutter packages getAdicionando permissão no Android
Para que possamos garantir acesso ao recurso de biometria em um dispositivo Android devemos solicitar a permissão do mesmo. Para isso, abra o arquivo android manifest.xml do projeto e adicione a seguinte permissão abaixo de outra já existente.
<uses-permission android:name="android.permission.USE_FINGERPRINT"/>Criando estrutura para o desenvolvimento
Vamos preparar a classe main.dart para desenvolvermos , para isso, apagamos o código default que é gerado e colocamos o abaixo. Esse código contém apenas a estrutura básica para que possamos iniciar a aplicação a partir da tela home e algumas variáveis que serão utilizadas mais a frente.
import 'package:flutter/material.dart';void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fingerprint Authentication',
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> { var _title = "Pronto";
var _message = "Toque no botão para iniciar a autenticação";
var _icone = Icons.settings_power;
var _colorIcon = Colors.yellow;
var _colorButton = Colors.blue;
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Importando no main.dart
Para utilizarmos as funcionalidades do local_auth, precisamos importa-la no main.
import 'package:local_auth/local_auth.dart';Além do local_auth precisaremos importar o error_codes que vem no proprio local_auth para nos ajudar a tratar erros no sensor biométrico
import 'package:local_auth/error_codes.dart' as auth_error;E por fim a biblioteca services do Core do Flutter para nos auxiliar a capturar erros no android
import 'package:flutter/services.dart';Implementando lógica para o sensor biométrico
Na classe _HomeState presente no main.dart, vamos criar uma função responsável por checar 3 casos possíveis: usuário validado, usuário não validado e o caso em que sensor não é suportado no dispositivo.
1) Instanciamos uma variável do tipo LocalAuthentication, ou seja, uma instância da biblioteca local_auth. Usaremos ela na função que criaremos a seguir.
final LocalAuthentication _localAuth = LocalAuthentication();2) Criamos uma função assincrona para fazer a verificação no sensor
Future<void> _checkBiometricSensor() async { --ações futuras--
}
3) Tentaremos autenticar ou invalidar o usuário levando em consideração que sensor exista no dispositivo. Então adicionaremos o seguinte codigo dentro da função _checkBiometricSensor. Dependendo de qual bloco If/else entrar, alterará um conjunto de variáveis que serão mostradas visualmente
try {
var authenticate = await _localAuth.authenticateWithBiometrics(
localizedReason: 'Por favor autentique-se para continuar');
setState(() {
if (authenticate) {
_title = "Ótimo";
_message = "Verificação biométrica funcionou!!";
_icone = Icons.beenhere;
_colorIcon = Colors.green;
_colorButton = Colors.green;
} else {
_title = "Ops";
_message = "Tente novamente!";
_icone = Icons.clear;
_colorIcon = Colors.red;
_colorButton = Colors.red;
}
});
}4)Caso o dispositivo não possua o sensor, completamos o try com um catch
on PlatformException catch (e) {
if (e.code == auth_error.notAvailable) {
setState(() {
_title = "Desculpe";
_message = "Não conseguimos encontrar o sensor biométrico :(";
_icone = Icons.clear;
_colorIcon = Colors.red;
_colorButton = Colors.red;
});
}
}Criando visual do aplicativo
Agora para o grand finale, precisamos mostrar algo para o usuário e acionar a função que acabamos de criar. Para isso cole o código abaixo no Scaffold que criamos em branco anteriormente.
return Scaffold(
appBar: AppBar(
title: Text("Fingerprint Auth"),
),
backgroundColor: Colors.grey,
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50),
child: Center(
child: Card(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 40, 10, 40),
child: ListTile(
leading: Icon(
_icone,
color: _colorIcon,
),
title: Text(
_title,
style: TextStyle(fontSize: 30),
),
subtitle: Text(
_message,
style: TextStyle(fontSize: 18),
),
),
)
],
),
),
)),
Padding(
padding: EdgeInsets.only(top: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 100,
height: 50, // specific value
child: RaisedButton(
color: _colorButton,
child: Icon(Icons.fingerprint),
onPressed: _checkBiometricSensor,
)),
],
),
),
],
),
);Espero que tenha ajudado vocês :), até a próxima.
O código fonte do projeto criado nesse tutorial pode ser encontrado no link abaixo:
