Πώς να προσθέσετε έλεγχο ταυτότητας για να αντιδράσετε εγγενείς σε τρία βήματα χρησιμοποιώντας το Firebase

Ο έλεγχος ταυτότητας σάς επιτρέπει να προστατεύουμε τις εφαρμογές μας ή να περιορίζουμε την πρόσβαση για μέλη που δεν είναι χρήστες. Ο έλεγχος ταυτότητας μπορεί επίσης να χρησιμοποιηθεί, για παράδειγμα, για τον περιορισμό της πρόσβασης σε υπηρεσία επί πληρωμή ή σε συγκεκριμένη υπηρεσία.

Αυτό είναι ένα μόνο παράδειγμα για το πώς μπορεί να είναι ο έλεγχος ταυτότητας στην εφαρμογή σας. Σήμερα θα προσθέσουμε έλεγχο ταυτότητας σε μια εφαρμογή React Native χρησιμοποιώντας το Firebase.

1 Εγκατάσταση react-native-firebase

Το πρώτο πράγμα που κάνουμε είναι να εγκαταστήσουμε και να προετοιμάσουμε το Firebase μέσα στην εφαρμογή μας. Στο React Native πρέπει να χρησιμοποιήσουμε ένα Firebase Container για το React Native. Θα χρησιμοποιήσουμε το react-native-firebase.

Εάν πρόκειται να ξεκινήσετε μια νέα εφαρμογή React Native από το μηδέν και θέλετε να χρησιμοποιήσετε το Firebase, είστε τυχεροί - μπορείτε να εγκαταστήσετε το react-native-firebase που είναι ενσωματωμένο χρησιμοποιώντας το React Native CLI.

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

Στη συνέχεια, απλώς εγκαταστήστε το pod για iOS εκτελώντας την ακόλουθη εντολή στον ριζικό κατάλογο της εφαρμογής σας.

cd ios && pod install 

Εάν αντιμετωπίζετε προβλήματα κατά την εγκατάσταση ενός νέου έργου με το Firebase, ανατρέξτε στα έγγραφα react-native-firebase

Προσθήκη του react-native-firebase σε ένα υπάρχον έργο

Εγκαταστήστε το react-native-firebaseπακέτο χρησιμοποιώντας νήματα ή npm

 yarn add @react-native-firebase/app 

ή:

 npm install @react-native-firebase/app 

Στη συνέχεια, εγκαταστήστε λοβό για iOS.

shell cd ios && pod install

Εκτέλεση της εφαρμογής

Για το iOS, υπάρχουν δύο τρόποι για να το κάνω: Χρησιμοποιώ προσωπικά το Xcode, καθώς μου δίνει μια σαφή ιδέα εάν κάτι πήγε στραβά και η κατασκευή απέτυχε.

Πάντα βεβαιωθείτε ότι το πακέτο εκτελείται - πατήστε yarn startγια να ξεκινήσετε την εφαρμογή.

Ο δεύτερος τρόπος για να εκτελέσετε την εφαρμογή στο iOS είναι να εκτελέσετε την εντολή react-native run-ios - και έτσι.

Προσθήκη διαπιστευτηρίων firebase

Αυτό το βήμα απαιτεί να δημιουργήσουμε ένα νέο έργο στην κονσόλα Firebase.

Αφού δημιουργήσετε ένα νέο έργο στη σελίδα του πίνακα ελέγχου, επιλέξτε προσθήκη Firebase στην εφαρμογή iOS . Αυτό θα σας δείξει τα βήματα για να προσθέσετε διαπιστευτήρια στο iOS όπως παρακάτω.

Αποτελείται από μερικά βήματα:

  • Κατεβάστε το GoogleService-info.plistαρχείο και τοποθετήστε το μέσα στο φάκελο iOS στο έργο σας.

    add-firebase-ios

  • Αρχικοποιήστε το Firebase

αρχικοποίηση-firebase

Για αντρόιντ

Το Android διαθέτει διαφορετική ρύθμιση για το Firebase. Στις ρυθμίσεις έργου στην κονσόλα Firebase επιλέξτε Προσθήκη Firebase σε Android .

firebase-to-android

Μπορείτε να βάλετε οποιοδήποτε όνομα θέλετε στην καταχώριση ονόματος εφαρμογής - απλώς βεβαιωθείτε ότι συμμορφώνεται με τις απαιτήσεις του Firebase. Στη συνέχεια, κάντε κλικ στο Εγγραφή .

Μετά από αυτό, πρέπει να κατεβάσετε το google-services.jsonαρχείο και να το βάλετε στο φάκελο Android / app.

Στη συνέχεια, το επόμενο βήμα είναι να αρχικοποιήσετε το Android SDK.

προσθήκη-android-sdk

Το τελευταίο βήμα είναι να εφαρμόσει το πρόσθετο εσωτερικό firebase: android/app/build.gradle .

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

Εάν αντιμετωπίζετε προβλήματα με την εκτέλεση των παραπάνω βημάτων, μπορείτε πάντα να ανατρέξετε στα έγγραφα του Firebase ή στους ιστότοπους του re-native-firebase.

Τώρα που έχουμε ολοκληρώσει την ενσωμάτωση, το επόμενο βήμα είναι να εφαρμόσουμε τις λειτουργίες του Firebase για να δημιουργήσουμε χρήστες και να συνδεθούμε στο React Native.

Προσθήκη εισόδου, σύνδεση

Αυτή η φάση είναι απλή: μόνο κάποιος κωδικός React και JavaScript για να καλέσετε τις λειτουργίες του Firebase. Θα δημιουργήσω ένα απλό περιβάλλον χρήστη για σύνδεση και είσοδο (αυτό δεν είναι απαραίτητο για αυτό το σεμινάριο, ώστε να μπορείτε να παραλείψετε αυτό το βήμα).

στοιχείο σύνδεσης

Θα βάλω τον πλήρη πηγαίο κώδικα στο τέλος του άρθρου *

Θα χρησιμοποιήσουμε τη createUserWithEmailAndPasswordλειτουργία για να εγγραφούμε σε έναν νέο χρήστη. Έχω ήδη εφαρμόσει όλη την επικύρωση στη φόρμα - πρέπει απλώς να καλέσουμε αυτήν τη συνάρτηση για να δημιουργήσω έναν χρήστη.

επικύρωση φόρμας

Όταν ο χρήστης πατήσει το κουμπί Συνέχεια, __doSignUpθα κληθεί και ο κωδικός μοιάζει με αυτόν:

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

Βεβαιωθείτε ότι έχετε εγκαταστήσει @react-native-firebase/authγια να μπορείτε να καλείτεauth().createUserWithEmailAndPassword(email, password)

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

Η λειτουργία που δημιουργεί έναν νέο χρήστη στο Firebase μοιάζει με αυτήν:

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

Εάν η συνάρτηση προκαλέσει σφάλμα, βεβαιωθείτε ότι έχετε ενεργοποιήσει τη μέθοδο email / κωδικού πρόσβασης στην ενότητα ελέγχου ταυτότητας στην κονσόλα Firebase.

ενεργοποίηση-email-auth

Εάν όλα πάνε καλά και τα δεδομένα που εισήχθησαν (email, κωδικός πρόσβασης) είναι έγκυρα, θα εμφανιστεί μια ειδοποίηση. Εάν ελέγξετε την ενότητα ελέγχου ταυτότητας στην κονσόλα Firebase, θα παρατηρήσετε ότι έχει δημιουργηθεί ένας νέος χρήστης.

signUpSuccess

Εδώ είναι ο πηγαίος κώδικας του 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     ) } 

Γιατί LoginComponentείναι κυρίως το ίδιο, το μόνο που πρέπει να αλλάξουμε είναι να χρησιμοποιήσουμε τη signInWithEmailAndPasswordμέθοδο.

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

Και ο έλεγχος ταυτότητας έχει εφαρμοστεί με επιτυχία στην εφαρμογή μας ;;

Ένα τελευταίο πράγμα: εάν πρέπει να επαληθεύσουμε εάν ο χρήστης είναι ήδη συνδεδεμένος, πρέπει να εμφανίσουμε κάτι άλλο αντί για τις οθόνες σύνδεσης ή εισόδου. Για παράδειγμα, μπορούμε να εμφανίσουμε την Αρχική οθόνη.

Μπορούμε να χρησιμοποιήσουμε μια λειτουργική μονάδα Firebase για να επαληθεύσουμε μια περίοδο σύνδεσης. Μπορεί να εισαχθεί από τη μονάδα ελέγχου.

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

Και μπορούμε να αλλάξουμε τη διεπαφή χρήστη βάσει του εάν ο χρήστης έχει πιστοποιηθεί ή όχι. Μπορούμε να εμφανίσουμε πληροφορίες χρήστη χρησιμοποιώντας μόνο την ίδια μέθοδο.

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

Και για να αποσυνδεθείτε, μπορείτε απλώς να καλέσετε await firebase.auth().signOut().

Είμαι βέβαιος ότι η ενσωμάτωση της πλοήγησης όπως η αντίδραση πλοήγησης θα ήταν καταπληκτική, αλλά δεν ήταν το επίκεντρό μας σε αυτό το άρθρο. Μη διστάσετε να προσθέσετε πλοήγηση, ώστε να μπορείτε να πλοηγηθείτε με βάση την κατάσταση του χρήστη.

Μη διστάσετε να δείτε τον πλήρη πηγαίο κώδικα; στο GitHub

Ευχαριστώ για την ανάγνωση .

Αρχικά δημοσιεύτηκε στο saidhayani.com

Μάθετε περισσότερα για το React εγγενές.

  • Κελάδημα
  • GitHub
  • Ίνσταγκραμ
  • Εγγραφείτε στη λίστα αλληλογραφίας