شرح كيفية اضافة بصمة جهازك لتطبيقك وامكانية فتح التطبيق بالبصمه فلاتر
البصمة اصبحت الان موضه شائعه بين التطبيقات الموجوده على متجر جوجل بلاي او غيره ومعظم الهواتف حاليا تتوفر على البصمه وفي كل نسخه من الاجهزة تحاول كل شركة اثبات كفائتها في ناحية سرعة البصمة ولهذا لابد عليك ان تقوم بإضافة البصمة في مشروعك لان هذا يترك طابع جميل لدى المستخدمين وفي مقالة اليوم سوف نساعدك على كيفية اضافة خيار تسجيل الدخول عن طريق البصمة لتطبيقك والبصمة سوف تكون نفس بصمة الهاتف بمعنى البصمة التي تعمل على فتح الهاتف هيا تفسها المسؤوله عن فتح التطبيق .
أصدرت Google Flutter كإطار عمل مفتوح المصدر لترميز وتطوير تطبيقات Android و iOS الأصلية. Flutter هو إطار عمل جديد نسبيًا ، حيث تم الكشف عنه كأول إصدار مستقر 1.0 في حدث Flutter Live في ديسمبر 2018.
يوفر Flutter بساطة البرمجة بأداء يشبه الأصلي ، كل ذلك مع الحفاظ على التناسق البصري عبر الأنظمة الأساسية. تم تصميم Dart ، لغة برمجة Flutter ، لتكون بديلاً لجافا سكريبت. Flutter هو ، قبل كل شيء ، مفتوح المصدر ومجاني تمامًا. على GitHub و Stack Overflow ، أصبح Flutter مرتبطًا الآن بـ React Native من حيث الشعبية. في مقال حديث ، قمنا بمقارنة مزايا وعيوب Flutter vs React Native باستخدام تسعة معايير.
add package's local_auth
dependencies:
local_auth: ^2.1.0
change to FlutterFragmentActivity (MainActivity)
في الخطوة الاولى عليك بالانتقال الى ملف MainActivity الخاص بالاندرويد وجعل الimport يكون FlutterFragmentActivity وايضا الclass عليك ان تجعله FlutterFragmentActivity لكي لا يحدث معك مشاكل اثناء عملية التعديل .
MainActivity.kt
import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() {
}
add permission to manifest
الان عليك بوضع اذن لادخال البصمة وذلك سوف يكون عن طريق ملف manifest ووضع الpermission بداخله .
manifest
<uses-permission android:name="android.permission.USE_FINGERPRINT"/>
create finger class
الان عليك ان تقوم بإنشاء class يحتوي على السماح بالبصمة وايضا التاكد من ان البصمة المدخله نفس بصمة الجهاز .
auth.dart
class FingerPrint {
final LocalAuthentication _localAuthentication = LocalAuthentication();
Future<bool> isFingerPrintEnable() async {
bool fingerPrintEnabled = await _localAuthentication.canCheckBiometrics;
return fingerPrintEnabled;
}
Future<bool> isAuth(String reason) async {
bool auth = await _localAuthentication.authenticate(
localizedReason: reason,
options: const AuthenticationOptions(biometricOnly: true));
return auth;
}
}
save and remove data from finger
الان ياتي دور حفظ وحذف البيانات اثناء تفعيل خيار البصمة في الهاتف , سوف نقوم بعمل صفحة للاعدات ونضع بداخلها switch تكون وظيفته هي تفعيل او الغاء البصمة وبناء على القيمة سوف نحفظ ان نحذف البيانات كما هو موضح .
setting_ui.dart
class SettingPage extends StatefulWidget {
const SettingPage({Key? key}) : super(key: key);
@override
State<SettingPage> createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
late LoginBloc cubit;
final FingerPrint _fingerPrint = FingerPrint();
late bool isSwitch;
@override
void initState() {
super.initState();
cubit = context.read<LoginBloc>();
cubit.getUserDate();
isSwitch = CacheHelper.getData(key: 'finger') ?? false;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Switch(
value:isSwitch,
// switch
inactiveThumbColor: Colors.lightBlue,
// slider
inactiveTrackColor: Colors.indigoAccent,
onChanged: (value) {
enableFinger(value);
},
),
),
);
}
void enableFinger(bool value) async {
if (!value) {
bool isFingerEnabled = await _fingerPrint.isFingerPrintEnable();
if (isFingerEnabled) {
CacheHelper.saveData(key: 'email', value: cubit.userModel!.email);
CacheHelper.saveData(key: 'password', value: '123456');
print('------------------------------ ${cubit.userModel!.email}');
print('------------------------------ 123456');
}
else {
CacheHelper.removeData(key: 'email');
CacheHelper.removeData(key: 'password');
}
}
setState(() {
isSwitch = value;
CacheHelper.saveData(key: 'finger', value: value);
print('------------------------------ $isSwitch');
});
}
}
login with fingerPrint in flutter
الان ياتي دور اخر مرحلة وهيا في اثناء تسجيل الدخول اذا كانت توجد قيمة للبصمة فهذا يعني انه قام بتفعيل البصمه واذا لم تكن فهذا يعني انه لم يفعل البصمة يمكنك فقط تغيير اظهار واخفاء البصمة عن طريق الif الموجود بالاعلى استبدل فقط isFinger بي !isFinger وهذا سوف يعمل على الحصول على قيمة البصمة الصحيحه التي قمنا بتخزينها وبعدها يفتح لك شريط لادخال البصمة وبناء على القيمة المدخله يقوم بإدخالك للتطبيق ام لا .
ui_login.dart
class LoginPage extends StatefulWidget {
const LoginPage({Key? key}) : super(key: key);
@override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
TextEditingController emailController = TextEditingController();
TextEditingController passwordController = TextEditingController();
bool isDisabled = true;
LoginBloc cubit = LoginBloc();
int? _state;
// finger
late bool isFinger;
final FingerPrint _fingerPrint = FingerPrint();
@override
void initState() {
super.initState();
cubit = context.read<LoginBloc>();
isFinger = CacheHelper.getData(key: 'finger');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: if (isFinger)
InkWell(
onTap: (){
fingerLogin();
},
child: Container(
height: 130,
width: 100,
child: Icon(Icons.fingerprint_rounded,color: Colors.white,size: 64),
),
),
TextButton(
onPressed: () {
navigateAndFinish(context, const RegisterPage());
},
child: const Text("you Don't have a account ?"))
);
}
void fingerLogin() async {
bool isFinished = await _fingerPrint.isFingerPrintEnable();
// After placing the hand on the fingerprint
if (isFinished) {
bool isAuth = await _fingerPrint.isAuth('login finger print');
// success .
if (isAuth) {
String mail = CacheHelper.getData(key: 'email');
String pass = CacheHelper.getData(key: 'password');
cubit.userLogin(email: mail, password: pass);
}
}
}
}
لمزيد من الشروحات :
- شرح تمرير البيانات في Flutter اثناء الانتقال بين الصفحات
- تغيير علامة التحميل في فلاتر الى مجموعه من الاشكال الرائعه
- حل مشكلة No application found for TargetPlatform.android_x86.
- التعامل مع التصميم في حالة portrait و landscape باستخدام mediaQuery في Flutter
- كيفية ضبط ابعاد التصميم للعمل بشكل افقي وعمودي بدون مشاكل في فلاتر باستخدام
تعليقات
إرسال تعليق