Πώς να αποθηκεύσετε και να αποκτήσετε πρόσβαση σε κλειδιά API σε μια εφαρμογή React

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

ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

Αυτό το σεμινάριο θα σας διδάξει πώς να αποθηκεύετε με ασφάλεια και να έχετε πρόσβαση σε κλειδιά API σε μια εφαρμογή React.

Προσθήκη μεταβλητών περιβάλλοντος σε μια εφαρμογή CRA

ΕΝΑ React εφαρμογή που δημιουργείτε χρησιμοποιώντας δημιουργία-αντίδραση-εφαρμογή υποστηρίζει μεταβλητές περιβάλλοντος εκτός συσκευασίας. Διαβάζει μεταβλητές που ξεκινούν με REACT_APP και τις καθιστά διαθέσιμες μέσω του process.env. Αυτό είναι δυνατό επειδή το πακέτο dotenv npm είναι εγκατεστημένο και διαμορφωμένο σε μια εφαρμογή CRA.

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

Στη συνέχεια, προσθέστε πρόθεμα στο όνομα του κλειδιού API με REACT_APP σαν αυτό:

REACT_APP_API_KEY="your_api_key"

Τώρα μπορείτε να αποκτήσετε πρόσβαση στο κλειδί API σε οποιοδήποτε αρχείο στην εφαρμογή React χρησιμοποιώντας το process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Βεβαιωθείτε ότι έχετε προσθέσει .env στο αρχείο .gitignore για να εμποδίσετε το git να το παρακολουθεί.

Γιατί δεν πρέπει να αποθηκεύετε μυστικά κλειδιά στο .env

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

Αποθήκευση μεταβλητών περιβάλλοντος στον κώδικα υποστήριξης

Όπως αναφέρθηκε παραπάνω, πρέπει να δημιουργήσετε μια ξεχωριστή εφαρμογή backend για την αποθήκευση μυστικών μεταβλητών.

Για παράδειγμα, το Το τελικό σημείο API παρακάτω ανακτά δεδομένα από μια μυστική διεύθυνση URL.

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => { 
	const response = await fetch(apiURL) 
	const data = response.json() 
	res.json({data}) 
})

Καλέστε αυτό το τελικό σημείο API για ανάκτηση και χρήση των δεδομένων στη διεπαφή.

πώς να κάνετε το φόντο διαφανές

const data = await fetch('http://backend-url/data')

Τώρα, εκτός και αν ωθήσετε το αρχείο .env στο GitHub, η διεύθυνση URL του API δεν θα είναι ορατή στα αρχεία κατασκευής σας.

Χρήση του Next.js για την αποθήκευση μεταβλητών περιβάλλοντος

Μια άλλη εναλλακτική είναι να χρησιμοποιήσετε το Next.js. Μπορείτε να αποκτήσετε πρόσβαση σε μεταβλητές ιδιωτικού περιβάλλοντος στη συνάρτηση getStaticProps().

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

Παρακάτω είναι ένα παράδειγμα.

export async function getStaticProps() { 
    const res = await fetch(process.env.API_URL) 
    const data = res.json() 
    return {props: { data }} 
}

Τα δεδομένα θα είναι διαθέσιμα στη σελίδα μέσω props και μπορείτε να αποκτήσετε πρόσβαση σε αυτά ως εξής.

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </div> 
  ); 
}

Σε αντίθεση με το React, δεν χρειάζεται να προσαρτήσετε το όνομα της μεταβλητής με τίποτα και μπορείτε να το προσθέσετε στο αρχείο .env ως εξής:

API_URL=https://secret-url/de3ed3f

Το Next.js σάς επιτρέπει επίσης να δημιουργείτε τελικά σημεία API στο σελίδες/api ντοσιέ. Ο κώδικας σε αυτά τα τελικά σημεία εκτελείται στον διακομιστή, ώστε να μπορείτε να κρύψετε μυστικά από το μπροστινό μέρος.

Για παράδειγμα, το παραπάνω παράδειγμα μπορεί να ξαναγραφτεί στο pages/api/getData.js αρχείο ως διαδρομή API.

4B479C8FF1390AFADECE0CFFD337D1B5229075

Τώρα μπορείτε να αποκτήσετε πρόσβαση στα επιστρεφόμενα δεδομένα μέσω του /pages/api/getData.js τελικό σημείο.

πώς μπορώ να μάθω την ιστορία του σπιτιού μου

Διατήρηση μυστικών κλειδιών API

Δεν συνιστάται η προώθηση API στο GitHub. Οποιοσδήποτε μπορεί να βρει τα κλειδιά σας και να τα χρησιμοποιήσει για να υποβάλει αιτήματα API. Χρησιμοποιώντας ένα μη εντοπισμένο αρχείο .env, αποτρέπετε αυτό να συμβεί.

Ωστόσο, δεν πρέπει ποτέ να αποθηκεύετε ευαίσθητα μυστικά σε ένα αρχείο .env στον κώδικα του frontend σας, επειδή ο καθένας μπορεί να τα δει όταν επιθεωρεί τον κώδικά σας. Αντίθετα, ανακτήστε τα δεδομένα από την πλευρά του διακομιστή ή χρησιμοποιήστε το Next.js για να κρύψετε ιδιωτικές μεταβλητές.