Hitelesítés hozzáadása a React Native-hoz három lépésben a Firebase használatával

A hitelesítés lehetővé teszi számunkra, hogy biztonságossá tegyük alkalmazásainkat, vagy korlátozzuk a nem felhasználó tagok hozzáférését. A hitelesítés használható például egy fizetős szolgáltatáshoz vagy egy meghatározott szolgáltatáshoz való hozzáférés korlátozásához is.

Ez csak egy példa arra, hogy a hitelesítés miként lehet az alkalmazásában. Ma hitelesítést adunk a React Native alkalmazáshoz a Firebase használatával.

1 A reakt-native-firebase telepítése

Az első dolog, amit telepítünk és inicializálunk a Firebase alkalmazásunkban. A React Native alkalmazásban Firebase tárolót kell használnunk a React Native számára. A reak-native-firebase-t fogjuk használni.

Ha egy új React Native alkalmazást szeretne elindítani a nulláról, és szeretné használni a Firebase alkalmazást, akkor szerencséje van - telepítheti a React Native CLI segítségével előre integrált reakció-native-firebase alkalmazást.

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

Ezután csak telepítse az iOS rendszert tartalmazó podot az alkalmazás gyökérkönyvtárában lévő következő parancs futtatásával.

cd ios && pod install 

Ha problémái adódnak egy új projekt telepítésével a Firebase programmal, kérjük, olvassa el a reag-native-firebase dokumentumokat

Reagál-native-firebase hozzáadása egy meglévő projekthez

Telepítse a react-native-firebasecsomagot fonal vagy npm segítségével

 yarn add @react-native-firebase/app 

vagy:

 npm install @react-native-firebase/app 

Ezután telepítse a hüvelyeket az iOS rendszerhez.

shell cd ios && pod install

Az alkalmazás futtatása

Az iOS esetében kétféleképpen lehet ezt megtenni: Én személy szerint használom az Xcode-ot, mivel ez világos elképzelést ad nekem, ha valami rosszul esett, és az összeállítás nem sikerült.

Mindig ellenőrizze, hogy fut-e a csomag - nyomja yarn startmeg az alkalmazás indításához.

Az alkalmazás iOS rendszeren történő futtatásának második módja a reakció-natív run-ios parancs futtatása - és ez az.

Firebase hitelesítő adatok hozzáadása

Ehhez a lépéshez új projektet kell létrehoznunk a Firebase konzolon.

Miután létrehozott egy új projektet az irányítópult oldalán, válassza a Firebase hozzáadása az iOS alkalmazáshoz lehetőséget . Ez megmutatja a hitelesítő adatok iOS-hez való hozzáadásának lépéseit, mint az alábbiak.

Néhány lépésből áll:

  • Töltse le a GoogleService-info.plistfájlt, és helyezze a projekt iOS-mappájába.

    add-firebase-ios

  • Inicializálja a Firebase-t

inicializál-tűzbázis

Androidra

Az Android más beállítással rendelkezik a Firebase számára. A Firebase konzol projektbeállításaiban válassza a Firebase hozzáadása Androidhoz lehetőséget .

firebase-android

Bármelyik nevet felveheti az alkalmazásnév bevitelébe - csak ellenőrizze, hogy megfelel-e a Firebase követelményeinek. Ezután kattintson a Regisztráció gombra .

Ezt követően le kell töltenie a google-services.jsonfájlt, és be kell helyeznie az android / app mappába.

Ezután a következő lépés az Android SDK inicializálása.

add-android-sdk

Az utolsó lépés az, hogy alkalmazza a Firebase bővítmény belül: android/app/build.gradle .

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

Ha bármilyen problémája van a fenti lépések futtatásával, bármikor hivatkozhat a Firebase-dokumentumokra vagy a reakció-natív-Firebase webhelyekre.

Most, hogy végeztünk az integrációval, a következő lépés a Firebase-funkciók megvalósítása a felhasználók létrehozása és a React Native alkalmazásba történő bejelentkezés céljából.

Bejelentkezés, bejelentkezés hozzáadása

Ez a fázis egyszerű: csak néhány React és JavaScript kód hívja meg a Firebase funkciókat. Létrehozok egy egyszerű felhasználói felületet a bejelentkezéshez és a feliratkozáshoz (ez nem szükséges ehhez az oktatóanyaghoz, így kihagyhatja ezt a lépést).

loginComponent

A teljes forráskódot a cikk végére teszem *

A createUserWithEmailAndPasswordfunkciót egy új felhasználó regisztrálásához fogjuk használni . Az űrlapon már végrehajtottam az összes érvényesítést - a felhasználó létrehozásához csak meg kell hívnunk ezt a függvényt.

forma-érvényesítés

Amikor a felhasználó megnyomja a Folytatás gombot, __doSignUpfelhívják, és a kód így néz ki:

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

Győződjön meg arról, hogy telepítette @react-native-firebase/autha hívástauth().createUserWithEmailAndPassword(email, password)

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

A Firebase-ben új felhasználót létrehozó függvény így néz ki:

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

Ha a funkció hibát dob, győződjön meg róla, hogy engedélyezte az e-mail / jelszó módszert a Firebase konzol hitelesítési szakaszában.

enable-email-auth

Ha minden jól sikerült, és a megadott adatok (e-mail, jelszó) érvényesek, akkor egy figyelmeztetés jelenik meg. Ha bejelöli a Hitelesítés részt a Firebase konzolon, észreveszi, hogy új felhasználó jött létre.

signUpSuccess

Itt található a 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     ) } 

Mert LoginComponenttöbbnyire ugyanaz az egyetlen dolog, amin változtatnunk kell, hogy signInWithEmailAndPasswordinkább a módszert használjuk.

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

És a hitelesítést sikeresen megvalósítottuk az alkalmazásunkban ??

Csak egy utolsó dolog: ha ellenőriznünk kell, hogy a felhasználó már be van-e jelentkezve, akkor a Bejelentkezés vagy a Bejelentkezés lehetőségek helyett valami mást kell megjelenítenünk. Megjeleníthetjük például a Kezdőképernyőt.

Használhatunk egy Firebase modult a munkamenet ellenőrzéséhez. Importálható az auth modulból.

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

És megváltoztathatjuk a felhasználói felületet annak alapján, hogy a felhasználó hitelesített-e vagy sem. A felhasználói információkat csak ugyanazon módszerrel jeleníthetjük meg.

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

A kijelentkezéshez pedig csak hívhat await firebase.auth().signOut();

Biztos vagyok benne, hogy a navigáció, például a reakció-navigáció integrálása fantasztikus lenne, de ebben a cikkben nem erre összpontosítottunk. Tehát nyugodtan adjon hozzá navigációt, hogy csak a felhasználói állapot alapján navigálhasson.

Nézze meg nyugodtan a teljes forráskódot? A GitHub-on

Köszönöm, hogy elolvastad .

Eredetileg a saidhayani.com oldalon jelent meg

Tudjon meg többet a React native-ről.

  • Twitter
  • GitHub
  • Instagram
  • Csatlakozzon a levelezőlistához