React Native Expo’da Y\u00fcz Tan\u0131ma ve Dokunmatik Kimlik Do\u011frulama Nas\u0131l Uygulan\u0131r?<\/p>\n
Merhaba! Bu makalede, React Native Expo uygulaman\u0131zda y\u00fcz tan\u0131ma (Face ID) ve dokunmatik kimlik do\u011frulama (Touch ID) nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z. Bu \u00f6zellikler, uygulaman\u0131z\u0131n g\u00fcvenli\u011fini art\u0131rmak ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, giri\u015f ekran\u0131nda, ayarlar ekran\u0131nda veya yeni kullan\u0131c\u0131 kay\u0131t s\u00fcrecinde kullan\u0131labilirler.<\/p>\n
* Expo CLI (https:\/\/docs.expo.dev\/versions\/latest\/cli\/quickstart\/)
\n* React Native Expo projesi
\n* iOS veya Android cihaz<\/p>\n
\u00d6ncelikle, Expo uygulaman\u0131z\u0131 olu\u015fturun veya mevcut bir projeyi kullan\u0131n. Ard\u0131ndan, gerekli paketleri y\u00fcklemeniz gerekiyor:<\/p>\n
“`bash
\nnpx expo install expo-face-detector expo-local-authentication
\n“`<\/p>\n
Y\u00fcz tan\u0131ma ve dokunmatik kimlik do\u011frulamas\u0131n\u0131 uygulamak i\u00e7in \u00f6ncelikle gerekli i\u015flevleri tan\u0131mlamal\u0131y\u0131z. Bu i\u015flevler, cihaz\u0131n biyometrik sens\u00f6rlerinin mevcut olup olmad\u0131\u011f\u0131n\u0131 kontrol etmeli ve do\u011frulama i\u015flemlerini ba\u015flatmal\u0131d\u0131r.<\/p>\n
“`javascript
\nimport { FaceDetector } from ‘expo-face-detector’;
\nimport * as LocalAuthentication from ‘expo-local-authentication’;<\/p>\n
\/\/ Y\u00fcz tan\u0131ma i\u015flevi
\nasync function checkFaceID() {
\n try {
\n const supported = await LocalAuthentication.hasHardwareAsync();
\n if (!supported) {
\n \/\/ Cihazda biyometrik sens\u00f6r yok
\n return false;
\n }<\/p>\n
const isAvailable = await LocalAuthentication.isEnrolledAsync();
\n if (!isAvailable) {
\n \/\/ Cihazda kay\u0131tl\u0131 biyometrik veri yok
\n return false;
\n }<\/p>\n
\/\/ Y\u00fcz tan\u0131ma ba\u015flat\u0131l\u0131r
\n const result = await LocalAuthentication.authenticateAsync({
\n promptMessage: ‘L\u00fctfen y\u00fcz\u00fcn\u00fczle giri\u015f yap\u0131n.’,
\n });
\n return result.success;
\n } catch (error) {
\n console.error(‘Y\u00fcz tan\u0131ma hatas\u0131:’, error);
\n return false;
\n }
\n}<\/p>\n
\/\/ Dokunmatik kimlik do\u011frulama i\u015flevi
\nasync function checkTouchID() {
\n try {
\n const supported = await LocalAuthentication.hasHardwareAsync();
\n if (!supported) {
\n \/\/ Cihazda biyometrik sens\u00f6r yok
\n return false;
\n }<\/p>\n
const isAvailable = await LocalAuthentication.isEnrolledAsync();
\n if (!isAvailable) {
\n \/\/ Cihazda kay\u0131tl\u0131 biyometrik veri yok
\n return false;
\n }<\/p>\n
\/\/ Dokunmatik kimlik do\u011frulama ba\u015flat\u0131l\u0131r
\n const result = await LocalAuthentication.authenticateAsync({
\n promptMessage: ‘L\u00fctfen parmak izinizle giri\u015f yap\u0131n.’,
\n });
\n return result.success;
\n } catch (error) {
\n console.error(‘Dokunmatik kimlik do\u011frulama hatas\u0131:’, error);
\n return false;
\n }
\n}
\n“`<\/p>\n
\u015eimdi, bu i\u015flevleri giri\u015f ekran\u0131na entegre edelim. Kullan\u0131c\u0131 giri\u015f yapmak istedi\u011finde, biyometrik sens\u00f6rlerin mevcut olup olmad\u0131\u011f\u0131 kontrol edilir ve uygun do\u011frulama y\u00f6ntemi kullan\u0131l\u0131r.<\/p>\n
“`javascript
\nimport React, { useState } from ‘react’;
\nimport { View, Text, Button } from ‘react-native’;<\/p>\n
const LoginScreen = () => {
\n const [isAuthenticated, setIsAuthenticated] = useState(false);<\/p>\n
const handleLogin = async () => {
\n try {
\n const isFaceIDAvailable = await checkFaceID();
\n const isTouchIDAvailable = await checkTouchID();<\/p>\n
if (isFaceIDAvailable) {
\n const result = await checkFaceID();
\n setIsAuthenticated(result);
\n } else if (isTouchIDAvailable) {
\n const result = await checkTouchID();
\n setIsAuthenticated(result);
\n } else {
\n \/\/ Geleneksel giri\u015f y\u00f6ntemi kullan\u0131labilir
\n \/\/ …
\n }
\n } catch (error) {
\n console.error(‘Giri\u015f hatas\u0131:’, error);
\n }
\n };<\/p>\n
return ( export default LoginScreen; Biyometrik kimlik do\u011frulama ayr\u0131ca ayarlar ekran\u0131nda kullan\u0131labilir. Kullan\u0131c\u0131 ayarlar ekran\u0131na eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, do\u011frulama y\u00f6ntemi ile eri\u015fim sa\u011flanabilir.<\/p>\n “`javascript const SettingsScreen = () => { const handleSettingsAccess = async () => { if (isFaceIDAvailable) { return ( export default SettingsScreen; Bu makalede, React Native Expo uygulaman\u0131za y\u00fcz tan\u0131ma ve dokunmatik kimlik do\u011frulama nas\u0131l entegre edilece\u011fini \u00f6\u011frendiniz. Bu \u00f6zellikler, kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in daha g\u00fcvenli ve kolay bir deneyim sa\u011flayabilir. Kendi uygulaman\u0131zda biyometrik kimlik do\u011frulamay\u0131 kullanarak, kullan\u0131c\u0131 g\u00fcvenli\u011fini art\u0131rabilir ve kullan\u0131c\u0131 deneyimini iyile\u015ftirebilirsiniz.<\/p>\n * Kullan\u0131c\u0131lar\u0131n biyometrik kimlik do\u011frulamas\u0131n\u0131 kullanmay\u0131 tercih ettikleri durumlarda, uygulaman\u0131zda bu se\u00e7ene\u011fi sunman\u0131z \u00f6nemlidir. * Expo Face Detector: https:\/\/docs.expo.dev\/versions\/latest\/sdk\/face-detector\/ #Etiketler
\n
\n {isAuthenticated ? (
\n
\n ) : (
\n
\n )}
\n <\/View>
\n );
\n};<\/p>\n
\n“`<\/p>\nUygulama \u00d6rne\u011fi: Ayarlar Ekran\u0131<\/h2>\n
\nimport React, { useState } from ‘react’;
\nimport { View, Text, Button } from ‘react-native’;<\/p>\n
\n const [isAuthenticated, setIsAuthenticated] = useState(false);<\/p>\n
\n try {
\n const isFaceIDAvailable = await checkFaceID();
\n const isTouchIDAvailable = await checkTouchID();<\/p>\n
\n const result = await checkFaceID();
\n setIsAuthenticated(result);
\n } else if (isTouchIDAvailable) {
\n const result = await checkTouchID();
\n setIsAuthenticated(result);
\n } else {
\n \/\/ Geleneksel giri\u015f y\u00f6ntemi kullan\u0131labilir
\n \/\/ …
\n }
\n } catch (error) {
\n console.error(‘Ayarlar eri\u015fim hatas\u0131:’, error);
\n }
\n };<\/p>\n
\n
\n {isAuthenticated ? (
\n
\n ) : (
\n
\n )}
\n <\/View>
\n );
\n};<\/p>\n
\n“`<\/p>\nSonu\u00e7<\/h2>\n
\u0130pu\u00e7lar\u0131<\/h2>\n
\n* Kullan\u0131c\u0131lar\u0131n biyometrik kimlik do\u011frulama se\u00e7eneklerini ayarlamalar\u0131na izin verin.
\n* Biyometrik kimlik do\u011frulamas\u0131n\u0131n g\u00fcvenli\u011fini sa\u011flamak i\u00e7in, do\u011frulama ba\u015far\u0131s\u0131zl\u0131k say\u0131s\u0131n\u0131 s\u0131n\u0131rland\u0131rmay\u0131 d\u00fc\u015f\u00fcn\u00fcn.<\/p>\nKaynaklar<\/h2>\n
\n* Expo Local Authentication: https:\/\/docs.expo.dev\/versions\/latest\/sdk\/local-authentication\/
\n* Fatih Soysal: https:\/\/fatihsoysal.com\/<\/p>\n
\nReact Native, Expo, Y\u00fcz Tan\u0131ma, Dokunmatik Kimlik Do\u011frulama, Biyometrik Kimlik Do\u011frulama, Uygulama G\u00fcvenli\u011fi, Kullan\u0131c\u0131 Deneyimi, Giri\u015f Ekran\u0131, Ayarlar Ekran\u0131, Face ID, Touch ID<\/p>\n","protected":false},"excerpt":{"rendered":"React Native Expo’da Y\u00fcz Tan\u0131ma ve Dokunmatik Kimlik Do\u011frulama Nas\u0131l Uygulan\u0131r? Merhaba! Bu makalede, React Native Expo uygulaman\u0131zda…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3913","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n