React Native'de Navigasyon Yollarının Montajını ve Çıkarılmasını İşleme

Bu yazımızda, React Native'de navigasyon rotalarının montajı ve sökülmesi adımlarını inceleyeceğiz. Uygulamanızın beklenen bir davranışı, kimlik doğrulama koşulu karşılandığında, yalnızca oturum açmış kullanıcılar için yeni bir gezinme rotaları kümesinin mevcut olması, kimlik doğrulamadan önce görüntülenen diğer ekranların ise kaldırılmadıkça ve geri döndürülememesidir. kullanıcı uygulamadan çıkış yapar.

Uygulamanızda güvenlik için, korumalı yollar size uygulamanızdaki belirli bilgileri/içeriği belirli kullanıcılara göstermenin bir yolunu sunarken, yetkisiz kişilerin erişimini kısıtlar.

Bu proje için Expo ile birlikte çalışacağız çünkü bu, birçok kurulum hakkında endişelenmek yerine elimizdeki soruna odaklanmamıza yardımcı olacak. Bu makaledeki tam olarak aynı adımlar, çıplak bir React Native uygulaması için izlenebilir.

Bu öğreticiyi takip etmek için JavaScript ve React Native hakkında biraz bilgi sahibi olmanız gerekir. İşte zaten aşina olmanız gereken birkaç önemli şey:

• React Native'de özel bileşenler (bileşenlerin nasıl oluşturulacağı, bir bileşende sahne öğelerinin nasıl alınacağı, iletileceği ve kullanılacağı). Daha fazla oku.
• Tepki Navigasyonu. Daha fazla oku.
• React Native'de Yığın Gezgini. Daha fazla oku.
• React Native Core bileşenleri hakkında temel bilgiler ( <View/> , <Text/> , vb.). Daha fazla oku.
• Yerel AsyncStorage tepki verin. Daha fazla oku.
• Bağlam API'si. Daha fazla oku.

Proje Kurulumu ve Temel Kimlik Doğrulaması

Expo'yu kullanmaya yeni başladıysanız ve fuarın nasıl kurulacağını bilmiyorsanız, resmi belgeleri ziyaret edin. Kurulum tamamlandıktan sonra, komut istemimizden expo ile yeni bir React Native projesini başlatmaya devam edin:

 expo init navigation-project

Temel kurulumun nasıl olmasını istediğinizi seçmeniz için bazı seçenekler sunulacaktır:

Bizim durumumuzda, projemizi boş bir belge olarak kurmak için ilk seçeneği seçelim. Şimdi JavaScript bağımlılıklarının kurulumu tamamlanana kadar bekleyin.

Uygulamamız kurulduktan sonra, dizinimizi yeni proje dizinimize değiştirebilir ve favori kod düzenleyicinizde açabiliriz. AsyncStorage için kullanacağımız kütüphaneyi ve navigasyon kütüphanelerimizi kurmamız gerekiyor. Terminalinizdeki klasör dizininizin içine yukarıdaki komutu yapıştırın ve proje bağımlılıklarımızı yüklemek için bir şablon seçin ( blank işe yarar).

Şimdi bu bağımlılıkların her birinin ne için olduğuna bakalım:

• @react-native-community/async-storage
  Web'deki localStorage gibi, bir cihazda anahtar/değer çiftlerinde kalıcı veriler için bir React Native API'sidir.
• @tepki-yerel-topluluk/maskeli-görünüm, tepki-yerel-ekranlar, tepki-yerel-jest-tutucu
  Bu bağımlılıklar, çoğu gezgin tarafından uygulamada gezinme yapısını oluşturmak için kullanılan temel yardımcı programlardır. (React Native navigasyonunu kullanmaya başlama bölümünde daha fazlasını okuyun.)
• @tepki-navigasyon/yerel
  Bu, React Native navigasyonunun bağımlılığıdır.
• @tepki-navigasyon/yığın
  Bu, React Native'de yığın gezinme bağımlılığıdır.

 npm install @react-native-community/async-storage @react-native-community/masked-view @react-navigation/native @react-navigation/stack react-native-screens react-native-gesture-handle

Uygulamayı başlatmak için terminalinizdeki uygulama dizininden expo start kullanın. Uygulama başlatıldıktan sonra, cep telefonunuzdan expo uygulamasını kullanarak barkodu okutarak uygulamayı görüntüleyebilir veya android emülatör/IOS simülatörünüz varsa, expo geliştirici aracından uygulamayı bunlar üzerinden açabilirsiniz. bir expo uygulamasını başlattığınızda tarayıcınızda açılır. Bu makaledeki resim örnekleri için sonucumuzu görmek için Genymotions kullanacağız. Genymotions'ta nihai sonucumuz şöyle görünecek:

Klasör Yapıları

Klasör yapımızı baştan oluşturalım, böylece devam ederken onunla daha kolay çalışalım:

Önce iki klasöre ihtiyacımız var:

• bağlam
  Global durum yönetimi için Context API ile çalışacağımızdan, bu klasör tüm uygulamamızın içeriğini tutacaktır.
• Görüntüleme
  Bu klasör, hem gezinme klasörünü hem de farklı ekranların görünümlerini tutacaktır.

Devam edin ve proje dizininizde iki klasör oluşturun.

Bağlam klasörünün içinde authContext adlı bir klasör oluşturun ve authContext klasörünün içinde iki dosya oluşturun:

• AuthContext.js ,
• AuthState.js .

Context API ile çalışmaya başladığımızda bu dosyalara ihtiyacımız olacak.

Şimdi oluşturduğumuz görünümler klasörüne gidin ve içinde iki klasör daha oluşturun, yani:

• navigasyon ,
• ekranlar .

Şimdi, henüz bitirmedik, ekranlar klasörünün içinde şu iki klasörü daha oluşturun:

• postAuthScreens ,
• önAuthScreens .

Klasör kurulumunu doğru takip ettiyseniz, şu anda klasör yapınızın nasıl görünmesi gerektiği:

İlk Ekranımızı Oluşturmak

Şimdi ilk ekranımızı oluşturalım ve buna preAuthScreens klasörünün içindeki karşılamaScreen.js adını verelim .

önAuthScreens > karşılamaScreen.js

İşte karşılamaScreen.js dosyamızın içeriği:

 import React from 'react'; import { View, Text, Button, StyleSheet, TextInput } from 'react-native'; const WelcomeScreen = () => { const onUserAuthentication = () => { console.log("User authentication button clicked") } return ( <View style={styles.container}> <Text style={styles.header}>Welcome to our App!</Text> <View> <TextInput style={styles.inputs} placeholder="Enter your email here.." /> <TextInput style={styles.inputs} secureTextEntry={true} placeholder="Enter your password here.." /> <Button title="AUTHENTICATE" onPress={onUserAuthentication} /> </View> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, header: { fontSize: 25, fontWeight: 'bold', marginBottom: 30 }, inputs: { width: 300, height: 40, marginBottom: 10, borderWidth: 1, } }) export default WelcomeScreen

İşte yukarıdaki kod bloğunda yaptığımız şey:

İlk olarak, React Native kütüphanesinden ihtiyacımız olan şeyleri, yani View , Text , Button , TextInput dosyasını import ettik. Ardından, WelcomeScreen işlevsel bileşenimizi oluşturduk.

StyleSheet React Native'den içe aktardığımızı ve onu başlığımız ve ayrıca <TextInput /> için stilleri tanımlamak için kullandığımızı fark edeceksiniz.

Son olarak, kodun altındaki WelcomeScreen bileşenini dışa aktarıyoruz.

Artık bununla işimiz bittiğine göre, girdilerin değerlerini depolamak için useState kancasını kullanarak ve girdi alanlarında herhangi bir değişiklik olduğunda durumlarını güncelleyerek bu bileşeni beklendiği gibi çalıştıralım. Ayrıca, daha sonra bir işlevi tutmak için ihtiyaç duyacağımızdan, useCallback kancasını React'ten içe aktaracağız.

İlk olarak, hala WelcomeScreen bileşenindeyken, useState'i içe useState ve useCallback useCallback'i almamız gerekiyor.

 import React, { useState, useCallback } from 'react';

Şimdi WelcomeScreen işlevsel bileşeninin içinde, sırasıyla e-posta ve parola için iki durumu oluşturalım:

 ... const WelcomeScreen = () => { const [email, setEmail] = useState('') const [password, setPassword] = useState('') return ( ... ) } ...

Ardından, <TextInput /> alanlarımızı kendi durumlarından değerlerini alacak ve girişin değeri güncellendiğinde durumlarını güncelleyecek şekilde değiştirmemiz gerekiyor:

 import React, { useState, useCallback } from 'react'; import { View, Text, Button, StyleSheet, TextInput } from 'react-native'; const WelcomeScreen = () => { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const onInputChange = (value, setState) => { setState(value); } return ( <View> ... <View> <TextInput style={styles.inputs} placeholder="Enter your email here.." value={email} onChangeText={(value) => onInputChange(value, setEmail)} /> <TextInput style={styles.inputs} secureTextEntry={true} placeholder="Enter your password here.." value={password} onChangeText={(value) => onInputChange(value, setPassword)} /> ... </View> </View> ) } ...

Yukarıdaki kodda, yaptığımız şey:

• Metin girdilerinin her birinin value kendi durumlarına işaret edecek şekilde yaptık.
• Metin girişlerimize onChangeText işleyicisini ekledik. Bu, giriş alanlarından yeni bir değer girildiğinde veya silindiğinde tetiklenir.
• İki argümanı kabul eden onInputChange fonksiyonumuzu çağırdık:
  • Geçerli value , onChangeText işleyicisi tarafından sağlanır.
  • Güncellenmesi gereken durumun ayarlayıcısı (ilk giriş alanı için setEmail ve ikincisini setPassword .
  • Son olarak onInputChange fonksiyonumuzu yazıyoruz ve fonksiyonumuz tek bir şey yapıyor: İlgili durumları yeni değerle güncelliyor.

Üzerinde çalışmamız gereken bir sonraki şey, form gönderme düğmesine her tıklandığında çağrılan onUserAuthentication() işlevidir.

İdeal olarak, kullanıcının zaten bir hesap oluşturmuş olması gerekir ve oturum açma, kullanıcının var olduğunu kontrol etmek ve ardından kullanıcıya bir simge atamak için bir tür arka uç mantığını içerecektir. Bizim durumumuzda, herhangi bir arka uç kullanmadığımız için, doğru kullanıcı oturum açma ayrıntısını tutan bir nesne oluşturacağız ve ardından yalnızca girilen değerler, gireceğimiz email ve password oturum açma nesnesindeki sabit değerlerimizle eşleştiğinde bir kullanıcının kimliğini doğrulayacağız. oluşturmak.

Bunu yapmak için ihtiyacımız olan kod:

 ... const correctAuthenticationDetails = { email: '[email protected]', password: 'password' } const WelcomeScreen = () => { ... // This function gets called when the `AUTHENTICATE` button is clicked const onUserAuthentication = () => { if ( email !== correctAuthenticationDetails.email || password !== correctAuthenticationDetails.password ) { alert('The email or password is incorrect') return } // In here, we will handle what happens if the login details are // correct } ... return ( ... ) } ...

Yukarıdaki kodda ilk fark edeceğiniz şeylerden biri, WelcomeScreen() işlevsel bileşeninin dışında bir correctAuthenticationDetails (bir kullanıcının sağlamasını beklediğimiz doğru oturum açma ayrıntılarını tutan bir nesnedir) tanımlamış olmamızdır.

Ardından, onUserAuthentication() işlevinin içeriğini yazdık ve ilgili durumlarda tutulan email veya password nesnemizde sağladığımız parolayla eşleşmediğini kontrol etmek için koşullu bir ifade kullandık.

Şimdiye kadar neler yaptığımızı görmek istiyorsanız, WelcomeScreen bileşenini App.js'nize şu şekilde içe aktarın:

App.js dosyasını açın ve şunu koyun, kodun tamamını şununla değiştirin:

 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { View } from 'react-native'; import WelcomeScreen from './views/screens/preAuthScreens/welcomeScreen'; export default function App() { return ( <View> <StatusBar /> <WelcomeScreen /> </View> ); }

Yukarıdaki koda yakından baktığınızda, yaptığımızın WelcomeScreen bileşenini içe aktardığını ve ardından onu App() işlevinde kullandığımızı göreceksiniz.

WelcomeScreen sonucu şöyle görünür:

Artık WelcomeScreen bileşenini oluşturmayı bitirdiğimize göre, devam edelim ve küresel durumumuzu yönetmek için Context API ile çalışmaya başlayalım.

Neden Bağlam API'si?

Context API kullanarak, ReactJS'ye herhangi bir ek kitaplık yüklememize gerek yoktur, kurulumu daha az streslidir ve ReactJS'de küresel durumu ele almanın en popüler yollarından biridir. Hafif durum yönetimi için iyi bir seçimdir.

Bağlamımızı Yaratmak

Hatırlarsanız, daha önce bir bağlam klasörü oluşturmuştuk ve bunun içinde authContext adında bir alt klasör oluşturmuştuk.

Şimdi authContext klasöründeki AuthContext.js dosyasına gidelim ve bağlamımızı oluşturalım:

bağlam > authContext > AuthContext.js

 import React, { createContext } from 'react'; const AuthContext = createContext(); export default AuthContext;

Az önce oluşturduğumuz AuthContext , loading durumu değerini ve userToken durum değerlerini tutar. Şu anda, yukarıdaki kod bloğunda bildirdiğimiz createContext , burada herhangi bir varsayılan değer başlatmadık, bu nedenle bağlamımız şu anda undefined . Yetkilendirme bağlamının örnek bir değeri {loading: false, userToken: 'abcd} olabilir.

AuthState.js dosyası, Context API mantığımızı ve durum değerlerini içerir. Burada yazılan fonksiyonlar, uygulamamız içerisinde herhangi bir yerden çağrılabilir ve durum olarak değerleri güncellediklerinde global olarak da güncellenir.

İlk olarak, ihtiyacımız olacak tüm importları bu dosyaya getirelim:

bağlam > AuthContext > AuthState.js

 import React, { useState } from 'react'; import AuthContext from './AuthContext'; import AsyncStorage from '@react-native-community/async-storage';

Durumlarımızı tutmak için useState() kancasını ReactJS'den içe aktardık, yukarıda oluşturduğumuz AuthContext dosyasını içe aktardık çünkü bu, kimlik doğrulama için boş bağlamımızın başlatıldığı ve daha sonra göreceğiniz gibi, ilerlememiz sırasında onu kullanmamız gerekecek. , son olarak AsyncStorage paketini içe aktarıyoruz (web için localStorage'a benzer).

AsyncStorage , verileri bir React Native uygulamasında cihaz üzerinden çevrimdışı olarak sürdürmenize olanak tanıyan bir React Native API'sidir.

 ... const AuthState = (props) => { const [userToken, setUserToken] = useState(null); const [isLoading, setIsLoading] = useState(true); const onAuthentication = async() => { const USER_TOKEN = "drix1123q2" await AsyncStorage.setItem('user-token', USER_TOKEN); setUserToken(USER_TOKEN); console.warn("user has been authenticated!") } return ( <AuthContext.Provider value={{ onAuthentication, }} > {props.children} </AuthContext.Provider> ) } export default AuthState;

Yukarıdaki kod bloğunda yaptığımız şey:

• userToken ve isLoading için iki durum bildirdik. userToken durumu, AsyncStorage kaydedilen belirteci depolamak için kullanılırken isLoading durumu, yükleme durumunu izlemek için kullanılır (başlangıçta true olarak ayarlanır). İlerledikçe bu iki durumun kullanımı hakkında daha fazla şey öğreneceğiz.

• Daha sonra onAuthentication() fonksiyonumuzu yazdık. Bu işlev, welcomeScreen.jsx dosyasından oturum açma düğmesine tıklandığında çağrılan bir zaman async işlevdir. Bu işlev yalnızca, kullanıcının sağladığı e-posta ve parola, sağladığımız doğru kullanıcı ayrıntısı nesnesiyle eşleşirse çağrılır. Genellikle kimlik doğrulama sırasında olan şey, kullanıcının JWT gibi bir paket kullanılarak arka uçta kimliği doğrulandıktan sonra kullanıcı için bir belirteç oluşturulması ve bu belirtecin ön uca gönderilmesidir. Bu eğitimde bunların hepsine girmeyeceğimiz için, statik bir belirteç oluşturduk ve onu USER_TOKEN adlı bir değişkende tuttuk.

• Ardından, kullanıcı belirtecimizi user-token adıyla await ayarlamak için wait anahtar sözcüğünü kullanırız. console.warn() ifadesi sadece her şeyin yolunda gittiğini kontrol etmek için kullanılır, istediğiniz zaman kaldırabilirsiniz.

• Son olarak, onAuthenticated işlevimizi <AuthContext.Provider> içinde bir değer olarak iletiyoruz, böylece uygulamamızdaki herhangi bir yerden işleve erişebilir ve onu çağırabiliriz.

ekranlar > ön Yetkilendirme > karşılamaScreen.js

İlk olarak, useContext ReactJS'den içe aktarın ve AuthContext AuthContext.js dosyasından içe aktarın.

 import React, { useState, useContext } from 'react'; import AuthContext from '../../../context/authContext/AuthContext' ...

Şimdi, welcomeScreen() işlevsel bileşeninin içinde, oluşturduğumuz bağlamı kullanalım:

 ... const WelcomeScreen = () => { const { onAuthentication } = useContext(AuthContext) const onUserAuthentication = () => { if ( email !== correctAuthenticationDetails.email || password !== correctAuthenticationDetails.password ) { alert('The email or password is incorrect') return } onAuthentication() } return ( ... ) } ...

Yukarıdaki kod bloğunda, onAuthentication fonksiyonunun AuthContext ve sonra onu onUserAuthentication() fonksiyonumuzun içinde çağırdık ve daha önce orada olan console.log() deyimini kaldırdık.

Şu anda, AuthContext henüz erişimimiz olmadığı için bu bir hata verecektir. AuthContext uygulamanızın herhangi bir yerinde kullanmak için, uygulamamızdaki en üst düzey dosyayı AuthState ile AuthState (bizim durumumuzda bu App.js dosyasıdır).

App.js dosyasına gidin ve oradaki kodu şununla değiştirin:

 import React from 'react'; import WelcomeScreen from './views/screens/preAuthScreens/welcomeScreen'; import AuthState from './context/authContext/AuthState' export default function App() { return ( <AuthState> <WelcomeScreen /> </AuthState> ); }

Buraya kadar geldik ve bu bölümü bitirdik. Yönlendirmemizi kuracağımız sonraki bölüme geçmeden önce yeni bir ekran oluşturalım. Oluşturacağımız ekran HomeScreen.js dosyası olacak ve ancak başarılı bir doğrulamadan sonra görünmesi gerekiyor.

Şuraya gidin: ekranlar > postAuth .

HomeScreen.js adlı yeni bir dosya oluşturun. HomeScreen.js dosyasının kodu:

ekranlar > postAuth > HomeScreen.js

 import React from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; const HomeScreen = () => { const onLogout = () => { console.warn("Logout button cliked") } return ( <View style={styles.container}> <Text>Now you're authenticated! Welcome!</Text> <Button title="LOG OUT" onPress={onLogout} /> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }) export default HomeScreen

Şimdilik, çıkış düğmesinin boş bir console.log() ifadesi vardır. Daha sonra, çıkış fonksiyonunu oluşturacağız ve bağlamımızdan ekrana aktaracağız.

Rotalarımızı Ayarlamak

Navigasyon klasörümüzün içinde üç (3) dosya oluşturmamız gerekiyor:

• postAuthNavigator.js ,
• preAuthNavigator.js ,
• AppNavigator.js .

Bu üç dosyayı oluşturduktan sonra, az önce oluşturduğunuz preAuthNaviagtor.js dosyasına gidin ve şunu yazın:

navigasyon > preAuthNavigator.js

 import React from "react"; import { createStackNavigator } from "@react-navigation/stack"; import WelcomeScreen from "../screens/preAuthScreens/welcomeScreen"; const PreAuthNavigator = () => { const { Navigator, Screen } = createStackNavigator(); return ( <Navigator initialRouteName="Welcome"> <Screen name="Welcome" component={WelcomeScreen} /> </Navigator> ) } export default PreAuthNavigator;

Yukarıdaki dosyada yaptığımız şey:

• Yığın navigasyonumuz için kullandığımız @react-navigation/stack createStackNavigator içe aktardık. createStackNavigator , uygulamanızın her yeni ekranın bir yığının üzerine yerleştirildiği ekranlar arasında geçiş yapması için bir yol sağlar. Varsayılan olarak yığın gezgini, tanıdık iOS ve Android görünümüne ve hissine sahip olacak şekilde yapılandırılmıştır: iOS'ta yeni ekranlar sağdan kayar, Android'de alttan kaybolur. React Native'deki yığın gezgini hakkında daha fazla bilgi edinmek istiyorsanız buraya tıklayın.
• Navigator ve Screen createStackNavigator() 'dan bozduk.
• Return <Navigator/> ile navigasyonumuzu, <Screen/> ile ekranımızı oluşturduk. bu, kimlik doğrulamadan önce erişilebilen birden fazla ekranımız varsa, burada onları temsil eden birden çok <Screen/> etiketine sahip olacağımız anlamına gelir.
• Son olarak, PreAuthNavigator bileşenimizi dışa aktarıyoruz.

Benzer bir şeyi postAuthNavigator.js dosyası için yapalım.

navigasyon > postAuthNavigator.js

 import React from "react"; import { createStackNavigator } from "@react-navigation/stack"; import HomeScreen from "../screens/postAuthScreens/HomeScreen"; const PostAuthNavigator = () => { const { Navigator, Screen} = createStackNavigator(); return ( <Navigator initialRouteName="Home"> <Screen name="Home" component={HomeScreen} /> </Navigator> ) } export default PostAuthNavigator;

Yukarıdaki kodda gördüğümüz gibi, preAuthNavigator.js ve postAuthNavigator.js arasındaki tek fark, oluşturulan ekrandır. HomeScreen WelcomeScreen'i alırken, WelcomeScreen HomeScreen'i alır.

AppNavigator.js'mizi oluşturmak için birkaç şey yaratmamız gerekiyor.

AppNavigator.js , kullanıcı tarafından erişim için hangi rotanın mevcut olacağını değiştireceğimiz ve kontrol edeceğimiz yer olduğundan, bunun düzgün çalışması için birkaç ekrana ihtiyacımız var, önce oluşturmamız gereken şeyleri özetleyelim:

1. TransitionScreen.js
   Uygulama hangi navigasyona bağlanacağına karar verirken, bir geçiş ekranının görünmesini istiyoruz. Tipik olarak, geçiş ekranı bir yükleme döndürücü veya uygulama için seçilen diğer herhangi bir özel animasyon olacaktır, ancak bizim durumumuzda, yüklemeyi görüntülemek için temel bir <Text/> etiketi kullanacağız loading… .
2. checkAuthenticationStatus()
   Bu fonksiyon, hangi navigasyon yığınının monte edileceğini belirleyecek olan kimlik doğrulama durumunu kontrol etmek için çağıracağımız fonksiyondur. Bu işlevi bağlamımızda oluşturacağız ve Appnavigator.js içinde kullanacağız.

Şimdi devam edelim ve TransitionScreen.js dosyamızı oluşturalım.

ekranlar > TransitionScreen.js

 import React from 'react'; import { Text, View } from 'react-native'; const TransitionScreen = () => { return ( <View> <Text>Loading...</Text> </View> ) } export default TransitionScreen

Geçiş ekranımız, yükleme metnini gösteren basit bir ekrandır. Bu yazıda ilerledikçe bunu nerede kullanacağımızı göreceğiz.

Ardından, AuthState.js'mize gidelim ve checkAuthenticationStatus() :

bağlam > authContext > AuthState.js

 import React, { useState, useEffect } from 'react'; import AuthContext from './AuthContext'; import AsyncStorage from '@react-native-community/async-storage'; const AuthState = (props) => { const [userToken, setUserToken] = useState(null); const [isLoading, setIsLoading] = useState(true); ... useEffect(() => { checkAuthenticationStatus() }, []) const checkAuthenticationStatus = async () => { try { const returnedToken = await AsyncStorage.getItem('user-toke n'); setUserToken(returnedToken); console.warn('User token set to the state value) } catch(err){ console.warn(`Here's the error that occured while retrievin g token: ${err}`) } setIsLoading(false) } const onAuthentication = async() => { ... } return ( <AuthContext.Provider value={{ onAuthentication, userToken, isLoading, }} > {props.children} </AuthContext.Provider> ) } export default AuthState;

Yukarıdaki kod bloğunda checkAuthenticationStatus() fonksiyonunu yazdık. Fonksiyonumuzda, yaptığımız şey şu:

• AsyncStorage await için wait anahtar sözcüğünü kullandık. AsyncStorage ile sağlanan belirteç yoksa, null değerini döndürür. İlk userToken da null olarak ayarlandı.
• setUserToken döndürülen değerimizi yeni AsyncStorage olarak ayarlamak için userToken . Döndürülen değer null ise, bu, userToken null kaldığı anlamına gelir.
• try{}…catch(){} bloğundan sonra, kimlik doğrulama durumunu kontrol etme işlevi tamamlandığından isLoading false olarak ayarladık. TransitionScreen hala görüntüleyip görüntülemeyeceğimizi bilmek için isLoading değerine ihtiyacımız olacak. Hatayla karşılaşıldığında kullanıcıya "Yeniden Dene" veya "Yeniden Dene" düğmesini gösterebilmemiz için jeton alınırken bir hata varsa bir hata ayarlamayı düşünmeye değer.
• AuthState , kimlik doğrulama durumunu kontrol etmek isteriz, bu yüzden bunu yapmak için useEffect() ReactJS kancasını kullanırız. useEffect() checkAuthenticationStatus() isLoading değerini false olarak ayarlıyoruz.
• Son olarak, Context API kapsamındaki uygulamamızın herhangi bir yerinden erişebilmemiz için durumlarımızı <AuthContext.Provider/> değerlerimize ekleriz.

Artık fonksiyonumuza kavuştuğumuza göre, AppNavigator.js'ye geri dönme ve kimlik doğrulama durumuna göre belirli bir yığın gezgini kurmak için kodu yazma zamanı:

navigasyon > AppNavigator.js

İlk olarak, AppNavigator.js için ihtiyacımız olan her şeyi içe aktaracağız.

 import React, { useEffect, useContext } from "react"; import PreAuthNavigator from "./preAuthNavigator"; import PostAuthNavigator from "./postAuthNavigator"; import { NavigationContainer } from "@react-navigation/native" import { createStackNavigator } from "@react-navigation/stack"; import AuthContext from "../../context/authContext/AuthContext"; import TransitionScreen from "../screens/TransitionScreen";

Artık tüm içe aktarmalarımız olduğuna göre, AppNavigator() işlevini oluşturalım.

 ... const AppNavigator = () => { } export default AppNavigator

Ardından, AppNavigator() fonksiyonumuzun içeriğini yazmaya devam edeceğiz:

 import React, { useState, useEffect, useContext } from "react"; import PreAuthNavigator from "./preAuthNavigator"; import PostAuthNavigator from "./postAuthNavigator"; import { NavigationContainer } from "@react-navigation/native" import { createStackNavigator } from "@react-navigation/stack"; import AuthContext from "../../context/authContext/AuthContext"; import TransitionScreen from "../screens/transition"; const AppNavigator = () => { const { Navigator, Screen } = createStackNavigator(); const authContext = useContext(AuthContext); const { userToken, isLoading } = authContext; if(isLoading) { return <TransitionScreen /> } return ( <NavigationContainer> <Navigator> { userToken == null ? ( <Screen name="PreAuth" component={PreAuthNavigator} options={{ header: () => null }} /> ) : ( <Screen name="PostAuth" component={PostAuthNavigator} options={{ header: () => null }} /> ) } </Navigator> </NavigationContainer> ) } export default AppNavigator

Yukarıdaki kod bloğunda, yaptığımız şeyin bir taslağı var:

• Bir yığın gezgini oluşturduk ve Navigator ve Screen ondan bozduk.
• UserToken ve isLoading userToken içe AuthContext
• AuthState , buradaki useEffecct kancasında checkAuthenticationStatus() çağrılır. if deyimini isLoading true olup olmadığını kontrol etmek için kullanırız, eğer true ise geri döndüğümüz ekran, checkAuthenticationStatus() işlevi henüz tamamlanmadığı için daha önce oluşturduğumuz <TransitionScreen /> ekranımızdır.
• checkAuthenticationStatus() tamamlandıktan sonra isLoading false olarak ayarlanır ve ana Navigasyon bileşenlerimizi döndürürüz.
• NavigationContainer , @react-navigation/native içe aktarıldı. Ana üst düzey gezginde yalnızca bir kez kullanılır. Bunu preAuthNavigator.js'de veya postAuthNavigator.js'de kullanmadığımıza dikkat edin .
• AppNavigator() 'da hala bir yığın gezgini oluşturuyoruz. Context PreAuthNavigator alınan userToken null ise, değeri başka bir şeyse (yani AsyncStorage.getItem() içindeki checkAuthenticationStatus() gerçek bir değer döndürdüğü) PreAuthNavigator öğesini bağlarız, sonra PostAuthNavigator öğesini bağlarız. Koşullu oluşturma işlemimiz üçlü operatör kullanılarak yapılır.

Şimdi AppNavigator.js dosyamızı kurduk . Ardından, AppNavigator App.js dosyamıza geçirmemiz gerekiyor.

AppNavigator App.js dosyasına aktaralım:

App.js

 ... import AppNavigator from './views/navigation/AppNavigator'; ... return ( <AuthState> <AppNavigator /> </AuthState> );

Şimdi uygulamamızın şu anda nasıl göründüğüne bakalım:

Oturum açmaya çalışırken yanlış bir kimlik bilgisi girdiğinizde şunlar olur:

Oturum Kapatma İşlevini Ekleme

Bu noktada kimlik doğrulama ve rota seçim sürecimiz tamamlanmıştır. Uygulamamız için geriye kalan tek şey, oturum kapatma işlevini eklemektir.

Çıkış düğmesi HomeScreen.js dosyasındadır. Düğmenin onPress niteliğine bir onLogout() işlevi ilettik. Şimdilik fonksiyonumuzda basit bir console.log() deyimi var, ancak kısa bir süre sonra bu değişecek.

Şimdi AuthState.js'mize gidelim ve çıkış için fonksiyonu yazalım. Bu işlev, kullanıcı belirtecinin kaydedildiği AsyncStorage temizler.

bağlam > authContext > AuthState.js

 ... const AuthState = (props) => { ... const userSignout = async() => { await AsyncStorage.removeItem('user-token'); setUserToken(null); } return ( ... ) } export default AuthState;

userSignout() , user-token AsyncStorage kaldıran eşzamansız bir işlevdir.

Şimdi, çıkış düğmesine her tıklandığında HomeScreen.js'deki userSignout() işlevini çağırmamız gerekiyor.

HomeScreen.js'mize gidelim ve userSignout() ' AuthContext .

ekranlar > postAuthScreens > HomeScreen.js

 import React, { useContext } from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; import AuthContext from '../../../context/authContext/AuthContext' const HomeScreen = () => { const { userSignout } = useContext(AuthContext) const onLogout = () => { userSignout() } return ( <View style={styles.container}> <Text>Now you're authenticated! Welcome!</Text> <Button title="LOG OUT" onPress={onLogout} /> </View> ) } ...

Yukarıdaki kod bloğunda, ReactJS'den useContext kancasını içe aktardık, ardından AuthContext'imizi içe aktardık. Ardından, userSignout işlevinin AuthContext ve bu userSignout() onLogout() çağrılır.

Artık çıkış düğmemiz her tıklandığında, AsyncStorage kullanıcı belirteci temizleniyor.

işte! tüm sürecimiz bitti.

Giriş yaptıktan sonra geri düğmesine bastığınızda şunlar olur:

Oturumu kapattıktan sonra geri düğmesine bastığınızda şunlar olur:

Gezinme yığını değiştirme işlemimizde bu kalıbı kullanırken fark ettiğimiz bazı farklı davranışlar şunlardır:

1. Oturum açtıktan sonra başka bir rotaya gitmek için navigation.navigate() veya navigation.push() kullanmamız gereken hiçbir yer olmadığını fark edeceksiniz. Durumumuz kullanıcı belirteci ile güncellendiğinde, oluşturulan gezinme yığını otomatik olarak değiştirilir.
2. Giriş başarılı olduktan sonra cihazınızdaki geri düğmesine basmak sizi giriş sayfasına geri götürmez, bunun yerine uygulamayı tamamen kapatır. Bu davranış önemlidir, çünkü kullanıcının uygulamadan çıkış yapması dışında oturum açma sayfasına geri dönmesini istemezsiniz. Aynı şey oturumu kapatmak için de geçerlidir - kullanıcı oturumu HomeScreen sonra Ana Ekran ekranına dönmek için geri düğmesini kullanamaz, bunun yerine uygulama kapanır.

Çözüm

Pek çok Uygulamada, kimlik doğrulama en önemli kısımlardan biridir çünkü korunan içeriğe erişmeye çalışan kişinin bilgiye erişim hakkına sahip olduğunu onaylar. Nasıl doğru yapılacağını öğrenmek, harika, sezgisel ve kullanımı/uygulamada gezinmeyi kolaylaştırmak için önemli bir adımdır.

Bu kodu temel alarak, eklemeyi düşünebileceğiniz birkaç şey şunlardır:

• Giriş alanlarını doğrulamak için form doğrulama. Formik ve Yup ile React Native form doğrulamasını kontrol edin.
• Kimlik doğrulamayı Gmail, Github, Facebook, Twitter veya özel arayüzünüzle entegre etmek için Firebase kimlik doğrulaması. React Native Firebase'e göz atın.
• Tasarımcılar için kod kavramları: Doğrulama ve Yetkilendirme.

Kimlik doğrulama, güvenlik ve bunu nasıl doğru yapacağınız konusunda sizi daha fazla aydınlatacak bulduğum bazı önemli kaynaklar da burada:

Kaynaklar

• React Native: Kullanıcı Doğrulama Akışı Açıklaması
• 10 React Security En İyi Uygulamaları
• Sonraki İhlali Önleyebilecek Kimlik Doğrulama Yöntemleri
• Uygulamamızın canlı derlemesini/önizlemesini buradan görüntüleyin;
• Projeyi GitHub'da görüntüleyin.