Autentifikacija nam omogućuje da zaštitimo svoje aplikacije ili ograničimo pristup za korisnike koji nisu korisnici. Autentifikacija se također može koristiti, na primjer, za ograničavanje pristupa plaćenoj usluzi ili određenoj usluzi.
To je samo jedan primjer kako provjera autentičnosti može biti u vašoj aplikaciji. Danas ćemo dodati provjeru autentičnosti u aplikaciju React Native pomoću Firebasea.
1 Instaliranje response-native-firebase
Prvo što napravimo je instaliranje i inicijalizacija Firebasea unutar naše aplikacije. U React Nativeu moramo koristiti Firebase spremnik za React Native. Koristit ćemo reakciju-izvorni-firebase.
Ako namjeravate pokrenuti novu React Native aplikaciju od nule i želite koristiti Firebase, imate sreće - možete instalirati reagirani nativni-firebase unaprijed integriran pomoću React Native CLI.
// npx @react-native-community/cli init [email protected]/template authenticationFirebase //** source: //invertase.io/oss/react-native-firebase/quick-start/new-project Zatim jednostavno instalirajte pod za iOS pokretanjem sljedeće naredbe unutar korijenskog direktorija vaše aplikacije.
cd ios && pod install Ako imate poteškoća s instalacijom novog projekta s Firebaseom, obratite se dokumentima response-native-firebase
Dodavanje reakcije-nativni-firebase postojećem projektu
Instalirajte react-native-firebasepaket pomoću pređe ili npm
yarn add @react-native-firebase/app ili:
npm install @react-native-firebase/app Zatim instalirajte mahune za iOS.
shell cd ios && pod install
Pokretanje aplikacije
Za iOS postoje dva načina: osobno koristim Xcode jer mi daje jasnu predodžbu ako je nešto pošlo po zlu i gradnja nije uspjela.
Uvijek provjerite je li paket pokrenut - pritisnite yarn startza pokretanje aplikacije.
Drugi način pokretanja aplikacije na iOS-u je pokretanje naredbe response-native run-ios - i to je to.
Dodavanje vjerodajnica za firebase
Ovaj korak zahtijeva stvaranje novog projekta u Firebase konzoli.
Nakon stvaranja novog projekta na stranici nadzorne ploče odaberite dodajte Firebase u iOS aplikaciju . Ovo će vam pokazati korake za dodavanje vjerodajnica na iOS kao u nastavku.
Sastoji se od nekoliko koraka:
Preuzmite
GoogleService-info.plistdatoteku i stavite je u mapu iOS-a unutar vašeg projekta.
Inicijalizirajte Firebase
Za Android
Android ima drugačije postavke za Firebase. U postavkama projekta na Firebase konzoli odaberite dodaj Firebase na Android .
U unos imena aplikacije možete staviti bilo koje ime koje vam se sviđa - samo provjerite je li u skladu s Firebaseovim zahtjevima. Zatim kliknite Registriraj se .
Nakon toga morate preuzeti google-services.jsondatoteku i staviti je u mapu android / app.
Tada je sljedeći korak inicijalizacija Android SDK-a.
Posljednji korak je primijeniti Firebase čep iznutra: android/app/build.gradle .
apply plugin: 'com.google.gms.google-services' Ako imate bilo kakvih problema s pokretanjem gore navedenih koraka, uvijek možete pogledati Firebaseove dokumente ili web stranice s reaktivnim izvornim Firebaseom.
Sad kad smo završili s integracijom, sljedeći je korak implementacija Firebase funkcija za stvaranje korisnika i prijava u React Native.
Dodavanje prijave, prijave
Ova je faza jednostavna: samo neki React i JavaScript kôd za pozivanje Firebase funkcija. Stvorit ću jednostavno korisničko sučelje za prijavu i prijavu (ovo nije potrebno za ovaj vodič, tako da možete preskočiti ovaj korak).
Potpuni izvorni kod stavit ću na kraj članka *
Funkcijom ćemo createUserWithEmailAndPasswordse prijaviti za novog korisnika. Već sam implementirao sve provjere valjanosti na obrascu - samo trebamo pozvati ovu funkciju da stvorimo korisnika.
When the user presses the Continue button, __doSignUp will be called and the code looks like this:
const __doSignUp = () => { if (!email) { setError("Email required *") setValid(false) return } else if (!password && password.trim() && password.length > 6) { setError("Weak password, minimum 5 chars") setValid(false) return } else if (!__isValidEmail(email)) { setError("Invalid Email") setValid(false) return } __doCreateUser(email, password) } const __doCreateUser = async (email, password) => { try { let response = await auth().createUserWithEmailAndPassword(email, password) if (response) { console.log(tag, "?", response) } } catch (e) { console.error(e.message) } } Make sure you installed @react-native-firebase/authto be able to call auth().createUserWithEmailAndPassword(email, password)
// import auth import auth from "@react-native-firebase/auth" The function that creates a new user in Firebase looks like this:
const __doCreateUser = async (email, password) =>{ try { let response = await auth().createUserWithEmailAndPassword(email, password); if(response){ console.log(tag,"?",response) } } catch (e) { console.error(e.message); } If the function throws an error, make sure to enable the email / password method in the authentication section in the Firebase console.
If everything went well, and the data entered (email, password) is valid, an alert will show up. If you check the Authentication section in the Firebase console you will notice that a new user has been created.
Here is the source code of SignInComponent.
const SigInComponent = () => { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [fetching, setFetching] = useState(false) const [error, setError] = useState("") const [isValid, setValid] = useState(true) const __doSignUp = () => { if (!email) { setError("Email required *") setValid(false) return } else if (!password && password.trim() && password.length > 6) { setError("Weak password, minimum 5 chars") setValid(false) return } else if (!__isValidEmail(email)) { setError("Invalid Email") setValid(false) return } __doCreateUser(email, password) } const __doCreateUser = async (email, password) => { try { let response = await auth().createUserWithEmailAndPassword( email, password ) if (response && response.user) { Alert.alert("Success ✅", "Account created successfully") } } catch (e) { console.error(e.message) } } return ( {!!fetching && } Sign Up { setError setEmail(text) }} error={isValid} /> setPassword(text)} /> {error ? ( {error} ) : null} Continue ) } For LoginComponent it’s mostly the same the only thing we need to change is we use signInWithEmailAndPassword method instead.
const __doSingIn = async (email, password) => { try { let response = await auth().signInWithEmailAndPassword(email, password) if (response && response.user) { Alert.alert("Success ✅", "Authenticated successfully") } } catch (e) { console.error(e.message) } } ![loginSuccess](loginSuccess.gif
And the authentication has been successfully implemented in our app ??
Just one last thing: if we have to verify if the user is already logged in, we need to display something else instead of the Login or SignIn screens. For example, we can display the Home screen.
We can use a Firebase module to verify a session. It can be imported from the auth module.
import auth, { firebase } from "@react-native-firebase/auth" componentDidMount() { // this.register("[email protected]", "123456"); this.__isTheUserAuthenticated(); } __isTheUserAuthenticated = () => { let user = firebase.auth().currentUser.uid; if (user) { console.log(tag, user); this.setState({ authenticated: true }); } else { this.setState({ authenticated: false }); } }; And we can change the UI based on if the user is authenticated or not. We can display user info by just using the same method.
firebase.auth().currentUser.email // [email protected] And to logout, you can just call await firebase.auth().signOut();
I’m sure integrating navigation like react-navigation would be awesome, but it was not our focus in this article. So feel free to add navigation so you can just navigate based on the user status.
Feel free to check out the full source code ?on GitHub
Thanks for reading.
Originally published on saidhayani.com
Learn more about React native.
- GitHub
- Pridružite se popisu pošte