Kā pievienot autentifikāciju React Native trīs darbībās, izmantojot Firebase

Autentifikācija ļauj mums nodrošināt mūsu lietotņu drošību vai ierobežot piekļuvi lietotājiem, kas nav lietotāji. Autentifikāciju var izmantot arī, piemēram, lai ierobežotu piekļuvi apmaksātam pakalpojumam vai noteiktam pakalpojumam.

Tas ir tikai viens piemērs tam, kā autentifikācija var būt jūsu lietotnē. Šodien mēs pievienosim autentifikāciju lietotnei React Native, izmantojot Firebase.

1 Instalējiet reaģēšanas-native-firebase

Pirmā lieta, ko mēs darām, ir instalēt un inicializēt Firebase mūsu lietotnē. React Native mums ir jāizmanto Firebase konteiners React Native. Mēs izmantosim reag-native-firebase.

Ja jūs gatavojaties sākt jaunu lietotni React Native no sākuma un vēlaties izmantot Firebase, jums ir paveicies - jūs varat instalēt reaģēšanas vietējo Firebase iepriekš integrētu, izmantojot React Native CLI.

// npx @react-native-community/cli init [email protected]/template authenticationFirebase //** source: //invertase.io/oss/react-native-firebase/quick-start/new-project 

Pēc tam vienkārši instalējiet iOS pod, palaižot šo komandu savas lietotnes saknes direktorijā.

cd ios && pod install 

Ja rodas problēmas ar jauna projekta instalēšanu, izmantojot Firebase, lūdzu, skatiet Reaģēšanas-native-Firebase dokumentus

Reaģēšanas-native-firebase pievienošana esošam projektam

Instalējiet react-native-firebasepaketi, izmantojot dziju vai npm

 yarn add @react-native-firebase/app 

vai:

 npm install @react-native-firebase/app 

Pēc tam instalējiet pākstis iOS.

shell cd ios && pod install

Lietotnes palaišana

Operētājsistēmai iOS ir divi veidi, kā to izdarīt: es personīgi izmantoju Xcode, jo tas dod man skaidru priekšstatu, ja kaut kas noiet greizi un izveidošana neizdevās.

Vienmēr pārliecinieties, vai pakete darbojas - nospiediet, yarn startlai palaistu lietotni.

Otrais veids, kā palaist lietotni operētājsistēmā iOS, ir palaist komandu reaģēt - Run-ios

Firebase akreditācijas datu pievienošana

Lai veiktu šo darbību, Firebase konsolē mums jāizveido jauns projekts.

Pēc jauna projekta izveidošanas informācijas paneļa lapā atlasiet Pievienot Firebase iOS lietotnei . Tas parādīs darbības, kā pievienot akreditācijas datus iOS, piemēram, zemāk.

Tas sastāv no dažiem soļiem:

  • Lejupielādējiet GoogleService-info.plistfailu un ievietojiet to projekta iOS mapē.

    add-firebase-ios

  • Inicializējiet Firebase

inicializēt-firebase

Android ierīcēm

Android ir atšķirīga Firebase iestatīšana. Firebase konsoles projekta iestatījumos atlasiet Pievienot Firebase Android .

firebase-to-android

Lietotnes nosaukuma ievadē varat ievietot jebkuru vēlamo vārdu - vienkārši pārliecinieties, vai tas atbilst Firebase prasībām. Pēc tam noklikšķiniet uz Reģistrēties .

Pēc tam jums ir nepieciešams lejupielādēt google-services.jsonfailu un ievietot to mapē android / app.

Pēc tam nākamais solis ir Android SDK inicializēšana.

add-android-sdk

Pēdējais solis ir piemērot Firebase spraudnis iekšpusi: android/app/build.gradle .

apply plugin: 'com.google.gms.google-services' 

Ja, veicot iepriekš norādītās darbības, rodas kādas problēmas, vienmēr varat atsaukties uz Firebase dokumentiem vai reaģēšanas vietējās Firebase vietnēm.

Tagad, kad integrācija ir pabeigta, nākamais solis ir ieviest Firebase funkcijas, lai izveidotu lietotājus un pierakstītos pakalpojumā React Native.

Pievienojot pierakstīšanos, pieteikšanos

Šī fāze ir vienkārša: lai izsauktu Firebase funkcijas, pietiek ar nelielu React un JavaScript kodu. Es izveidošu vienkāršu lietotāja saskarni Login un SignUp (tas nav nepieciešams šai apmācībai, lai jūs varētu izlaist šo darbību).

loginComponent

Raksta beigās ievietošu pilnu pirmkodu *

Mēs izmantosim createUserWithEmailAndPasswordfunkciju, lai reģistrētos jaunam lietotājam. Es jau ieviesu visu veidlapā esošo validāciju - lai izveidotu lietotāju, mums vienkārši jāizsauc šī funkcija.

formas apstiprināšana

Kad lietotājs nospiež pogu Turpināt, __doSignUptiks izsaukts un kods izskatās šādi:

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) } } 

Pārliecinieties, vai esat instalējis, @react-native-firebase/authlai varētu zvanītauth().createUserWithEmailAndPassword(email, password)

// import auth import auth from "@react-native-firebase/auth" 

Funkcija, kas Firebase izveido jaunu lietotāju, izskatās šādi:

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); } 

Ja funkcija rada kļūdu, noteikti iespējojiet e-pasta / paroles metodi Firebase konsoles autentifikācijas sadaļā.

iespējot-e-pastu autorizēt

Ja viss ir izdevies un ievadītie dati (e-pasts, parole) ir derīgi, tiks parādīts brīdinājums. Pārbaudot Firebase konsoles sadaļu Autentifikācija, pamanīsit, ka ir izveidots jauns lietotājs.

signUpSuccess

Šeit ir 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     ) } 

Jo LoginComponenttas galvenokārt ir vienīgais, kas jāmaina, ir signInWithEmailAndPasswordtā vietā, lai izmantotu metodi.

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

Un autentifikācija ir veiksmīgi ieviesta mūsu lietotnē?

Vēl tikai viena lieta: ja mums ir jāpārbauda, ​​vai lietotājs jau ir pieteicies, mums pieteikšanās vai pierakstīšanās ekrānu vietā jāparāda kaut kas cits. Piemēram, mēs varam parādīt sākuma ekrānu.

Sesijas verificēšanai mēs varam izmantot Firebase moduli. To var importēt no auth moduļa.

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 }); } }; 

Un mēs varam mainīt lietotāja saskarni, pamatojoties uz to, vai lietotājs ir autentificēts vai nē. Mēs varam parādīt lietotāja informāciju, izmantojot tikai to pašu metodi.

firebase.auth().currentUser.email // [email protected] 

Lai atteiktos, varat vienkārši piezvanīt await firebase.auth().signOut();

Esmu pārliecināts, ka navigācijas integrēšana, piemēram, reaģēšanas navigācija, būtu lieliska, taču šajā rakstā tas nebija mūsu uzmanības centrā. Tāpēc droši pievienojiet navigāciju, lai jūs varētu vienkārši pārvietoties, pamatojoties uz lietotāja statusu.

Jūtieties brīvi pārbaudīt pilnu avota kodu vietnē GitHub

Paldies, ka lasījāt .

Sākotnēji publicēts saidhayani.com

Uzziniet vairāk par React native.

  • Twitter
  • GitHub
  • Instagram
  • Pievienojieties pasta sarakstam