React Native Expo’da Yüz Tanıma ve Dokunmatik Kimlik Doğrulama Nasıl Uygulanır?
Merhaba! Bu makalede, React Native Expo uygulamanızda yüz tanıma (Face ID) ve dokunmatik kimlik doğrulama (Touch ID) nasıl entegre edileceğini adım adım açıklayacağız. Bu özellikler, uygulamanızın güvenliğini artırmak ve kullanıcı deneyimini iyileştirmek için kullanışlıdır. Örneğin, giriş ekranında, ayarlar ekranında veya yeni kullanıcı kayıt sürecinde kullanılabilirler.
Gereksinimler
* Expo CLI (https://docs.expo.dev/versions/latest/cli/quickstart/)
* React Native Expo projesi
* iOS veya Android cihaz
Proje Kurulumu
Öncelikle, Expo uygulamanızı oluşturun veya mevcut bir projeyi kullanın. Ardından, gerekli paketleri yüklemeniz gerekiyor:
“`bash
npx expo install expo-face-detector expo-local-authentication
“`
Yüz Tanıma ve Dokunmatik Kimlik Doğrulama İşlevleri
Yüz tanıma ve dokunmatik kimlik doğrulamasını uygulamak için öncelikle gerekli işlevleri tanımlamalıyız. Bu işlevler, cihazın biyometrik sensörlerinin mevcut olup olmadığını kontrol etmeli ve doğrulama işlemlerini başlatmalıdır.
“`javascript
import { FaceDetector } from ‘expo-face-detector’;
import * as LocalAuthentication from ‘expo-local-authentication’;
// Yüz tanıma işlevi
async function checkFaceID() {
try {
const supported = await LocalAuthentication.hasHardwareAsync();
if (!supported) {
// Cihazda biyometrik sensör yok
return false;
}
const isAvailable = await LocalAuthentication.isEnrolledAsync();
if (!isAvailable) {
// Cihazda kayıtlı biyometrik veri yok
return false;
}
// Yüz tanıma başlatılır
const result = await LocalAuthentication.authenticateAsync({
promptMessage: ‘Lütfen yüzünüzle giriş yapın.’,
});
return result.success;
} catch (error) {
console.error(‘Yüz tanıma hatası:’, error);
return false;
}
}
// Dokunmatik kimlik doğrulama işlevi
async function checkTouchID() {
try {
const supported = await LocalAuthentication.hasHardwareAsync();
if (!supported) {
// Cihazda biyometrik sensör yok
return false;
}
const isAvailable = await LocalAuthentication.isEnrolledAsync();
if (!isAvailable) {
// Cihazda kayıtlı biyometrik veri yok
return false;
}
// Dokunmatik kimlik doğrulama başlatılır
const result = await LocalAuthentication.authenticateAsync({
promptMessage: ‘Lütfen parmak izinizle giriş yapın.’,
});
return result.success;
} catch (error) {
console.error(‘Dokunmatik kimlik doğrulama hatası:’, error);
return false;
}
}
“`
Uygulama Örneği: Giriş Ekranı
Şimdi, bu işlevleri giriş ekranına entegre edelim. Kullanıcı giriş yapmak istediğinde, biyometrik sensörlerin mevcut olup olmadığı kontrol edilir ve uygun doğrulama yöntemi kullanılır.
“`javascript
import React, { useState } from ‘react’;
import { View, Text, Button } from ‘react-native’;
const LoginScreen = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const handleLogin = async () => {
try {
const isFaceIDAvailable = await checkFaceID();
const isTouchIDAvailable = await checkTouchID();
if (isFaceIDAvailable) {
const result = await checkFaceID();
setIsAuthenticated(result);
} else if (isTouchIDAvailable) {
const result = await checkTouchID();
setIsAuthenticated(result);
} else {
// Geleneksel giriş yöntemi kullanılabilir
// …
}
} catch (error) {
console.error(‘Giriş hatası:’, error);
}
};
return (
{isAuthenticated ? (
) : (
)}
);
};
export default LoginScreen;
“`
Uygulama Örneği: Ayarlar Ekranı
Biyometrik kimlik doğrulama ayrıca ayarlar ekranında kullanılabilir. Kullanıcı ayarlar ekranına erişmeye çalıştığında, doğrulama yöntemi ile erişim sağlanabilir.
“`javascript
import React, { useState } from ‘react’;
import { View, Text, Button } from ‘react-native’;
const SettingsScreen = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const handleSettingsAccess = async () => {
try {
const isFaceIDAvailable = await checkFaceID();
const isTouchIDAvailable = await checkTouchID();
if (isFaceIDAvailable) {
const result = await checkFaceID();
setIsAuthenticated(result);
} else if (isTouchIDAvailable) {
const result = await checkTouchID();
setIsAuthenticated(result);
} else {
// Geleneksel giriş yöntemi kullanılabilir
// …
}
} catch (error) {
console.error(‘Ayarlar erişim hatası:’, error);
}
};
return (
{isAuthenticated ? (
) : (
)}
);
};
export default SettingsScreen;
“`
Sonuç
Bu makalede, React Native Expo uygulamanıza yüz tanıma ve dokunmatik kimlik doğrulama nasıl entegre edileceğini öğrendiniz. Bu özellikler, kullanıcılarınız için daha güvenli ve kolay bir deneyim sağlayabilir. Kendi uygulamanızda biyometrik kimlik doğrulamayı kullanarak, kullanıcı güvenliğini artırabilir ve kullanıcı deneyimini iyileştirebilirsiniz.
İpuçları
* Kullanıcıların biyometrik kimlik doğrulamasını kullanmayı tercih ettikleri durumlarda, uygulamanızda bu seçeneği sunmanız önemlidir.
* Kullanıcıların biyometrik kimlik doğrulama seçeneklerini ayarlamalarına izin verin.
* Biyometrik kimlik doğrulamasının güvenliğini sağlamak için, doğrulama başarısızlık sayısını sınırlandırmayı düşünün.
Kaynaklar
* Expo Face Detector: https://docs.expo.dev/versions/latest/sdk/face-detector/
* Expo Local Authentication: https://docs.expo.dev/versions/latest/sdk/local-authentication/
* Fatih Soysal: https://fatihsoysal.com/
#Etiketler
React Native, Expo, Yüz Tanıma, Dokunmatik Kimlik Doğrulama, Biyometrik Kimlik Doğrulama, Uygulama Güvenliği, Kullanıcı Deneyimi, Giriş Ekranı, Ayarlar Ekranı, Face ID, Touch ID