React Native ve Expo'da Touch ID ile Kimlik Doğrulama

Herkese selamlar, mobiler.dev'deki ilk yazımda Expo ve React Native CLI projelerinde biyometrik kimlik doğrulamadan bahsedeceğim.

Görsel Referansı


Mobil uygulamalardaki en önemli konuladan birisi hiç şüphesiz ki güvenlik. Özellikle de mobil bankacılık, e-ticaret uygulamaları gibi içerisinde kişisel bilgilerin ve paranın olduğu uygulamalarda kullanıcının hesap bilgileri ve tabii ki en çok da şifreleri büyük tehdit oluşturuyor.


Güvenliğin yanı sıra oturumun sürekli açık tutulamayacağı bu tür uygulamalarda her seferinde kullanıcı adı ve şifre girmek, kullanıcı tarafından bakılınca çok kullanışlı bir yöntem olarak gözükmüyor. Özellikle de şifresini sık sık unutan birisi için bu durum bazen eziyet haline geliyor. Bu gibi durumlarda kullanıcılar Touch ID veya Face ID ile oturum açmayı tercih ediyor. Günümüzde çoğu iPhone ve Android cihazda Face ID veya Touch ID desteği bulunuyor. Bu özellikler, mobil uygulamaları daha güvenli hale getirerek kullanıcı etkileşimini artırıyor.


Biyometrik kimlik doğrulama olarak adlandırılan bu yöntem yukarıda bahsettiğimiz nedenlerden dolayı oldukça yaygın kullanılıyor. React Native'de de bu yöntemi uygulamamıza entegre edebileceğimiz birçok üçüncü parti kütüphaneler bulunuyor.



npm trendlerinden de göreceğimiz üzere bu kütüphanelerden en çok tercih edileni expo-local-authentication kütüphanesidir.


Bu kütüphane hem Expo hem de React-Native CLI projelerimize kolay bir şekilde entegre edebileceğimiz oldukça kullanışlı bir kütüphanedir. Genelde isminden dolayı bu modüllerin yalnızca Expo projelerinde kullanıldığı düşünülüyor ancak bir Expo modülünü react-native-unimodules kütüphanesini projemize kurarak kullanabiliyoruz. Bu konuda detaylı bilgi için expo dökümanlarını inceleyebilirsiniz.


Şimdi hep beraber kütüphanenin bize sunduğu methodları inceleyelim ve kurulumunu gerçekleştirelim.



Kurulum


Yarn veya npm paket yöneticilerini kullanarak paketi kurabiliriz.

yarn add expo-local-authentication 

npm i —save expo-local-authentication

Ve paketi projemize dahil ediyoruz.


Cihazda kullanılabilirliğini kontrol edelim.

LocalAuthentication.hasHardwareAsync()

Bu method, cihazda yüz veya parmak izi tarayıcısının bulunup bulunmadığını belirten boolean bir değer döndürüyor. Buradan dönen değere göre kullanıcılarınıza farklı giriş seçenekleri sunabiliyorsunuz.


Bu seçenekleri belirleyebilmemiz için de bir method bulunuyor.

LocalAuthentication.supportedAuthenticationTypesAsync()

Cihazda ne tür kimlik doğrulamaları olduğunu bu method sayesinde öğrenebiliyoruz. Buradan dönen "1" değeri parmak izi desteğini, "2" değeri yüz tanıma desteğini, "3" değeri ise iris tanıma desteğini temsil ediyor. Ancak üçüncü seçenek yalnızca Android cihazlar için geçerli olarak bulunuyor. Cihazlar birden fazla kimlik tanıma yöntemini destekleyebiliyor. Bu durumda değerler bir dizi içerisinde döndürülüyor.


Eğer ilk methodumuzdan dönen değer true ise ve ikinci methoddan da birden fazla kimlik tanıma yönteminin desteklendiğini öğrendiysek şimdi sıra kullanıcının cihazında bu yöntemlerden birisini kullanıp kullanmadığını, eğer kullanıyorsa hangi yöntemi kullandığını (cihazda kayıtlı olan Touch ID veya Face ID bilgileri) öğrenmekte.

LocalAuthentication.isEnrolledAsync()  

ve

LocalAuthentication.getEnrolledLevelAsync()

methodları ile de bu sorularımızın cevaplarını alabiliyoruz.


Örnek Kullanım


Kütüphanenin methodlarını öğrendiğimize göre uygulamamızda dilediğimiz gibi kimlik tanımayı kullanabiliriz.

Biyometrik kimlik doğrulamasını uygulamamıza başarıyla entegre ettik, biyometrik kimliğin doğru olması durumunda kullanıcının oturum açmasını sağlayabilirsiniz. Yazının en başında da bahsettiğim sebeplerden ve kullanıcı deneyimi açısından mobil uygulamanız için artı bir özellik olacaktır.


Okuduğunuz için teşekkür ederim, görüşmek üzere :)


GitHub: https://github.com/Mbbahar/sampleLocalAuthentication


Referanslar:

https://docs.expo.io/versions/latest/sdk/local-authentication/

https://medium.com/swlh/how-to-use-face-id-with-react-native-or-expo

https://medium.com/swlh/integrate-biometric-authentication-to-your-expo-app


#cross #reactnative #expo #touchid #localauthentication

0 yorum

Son Paylaşımlar

Hepsini Gör