Οι σύγχρονες εφαρμογές Ιστού βασίζονται σε εξωτερικά 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.
συνθ API_KEY = process.env. REACT_APP_API_KEY
Βεβαιωθείτε ότι έχετε προσθέσει .env στο αρχείο .gitignore για να εμποδίσετε το git να το παρακολουθεί.
Γιατί δεν πρέπει να αποθηκεύετε μυστικά κλειδιά στο .env
Οτιδήποτε αποθηκεύετε σε ένα αρχείο .env είναι δημόσια διαθέσιμο στην έκδοση παραγωγής. Το React το ενσωματώνει στα αρχεία κατασκευής, πράγμα που σημαίνει ότι ο καθένας μπορεί να το βρει ελέγχοντας τα αρχεία της εφαρμογής σας. Αντίθετα, χρησιμοποιήστε έναν διακομιστή μεσολάβησης υποστήριξης που καλεί το API για λογαριασμό της εφαρμογής διεπαφής σας.
Αποθήκευση μεταβλητών περιβάλλοντος στον κώδικα υποστήριξης
Όπως αναφέρθηκε παραπάνω, πρέπει να δημιουργήσετε μια ξεχωριστή εφαρμογή backend για την αποθήκευση μυστικών μεταβλητών.
Για παράδειγμα, το Το τελικό σημείο API παρακάτω ανακτά δεδομένα από μια μυστική διεύθυνση URL.
συνθ apiURL = process.env. API_URL
app.get('/data', ασύγχρονος (απαιτ., res) => {
συνθ ανταπόκριση = αναμένω ανάκτηση (apiURL)
συνθ data = answer.json()
res.json({data})
})
Καλέστε αυτό το τελικό σημείο API για ανάκτηση και χρήση των δεδομένων στη διεπαφή.
συνθ δεδομένα = αναμένω fetch('http://backend-url/data')
Τώρα, εκτός και αν ωθήσετε το αρχείο .env στο GitHub, η διεύθυνση URL του API δεν θα είναι ορατή στα αρχεία κατασκευής σας.
Χρήση του Next.js για την αποθήκευση μεταβλητών περιβάλλοντος
Μια άλλη εναλλακτική είναι να χρησιμοποιήσετε το Next.js. Μπορείτε να αποκτήσετε πρόσβαση σε μεταβλητές ιδιωτικού περιβάλλοντος στη συνάρτηση getStaticProps().
Αυτή η λειτουργία εκτελείται κατά τη διάρκεια του χρόνου κατασκευής στον διακομιστή. Έτσι, οι μεταβλητές περιβάλλοντος στις οποίες έχετε πρόσβαση μέσα σε αυτήν τη συνάρτηση θα είναι διαθέσιμες μόνο στο περιβάλλον Node.js.
Παρακάτω είναι ένα παράδειγμα.
εξαγωγήασυγχρονισμόςλειτουργίαgetStaticProps() {
συνθ res = αναμένω fetch (process.env. API_URL)
συνθ data = res.json()
ΕΠΙΣΤΡΟΦΗ {στηρίγματα: { δεδομένα }}
}
Τα δεδομένα θα είναι διαθέσιμα στη σελίδα μέσω props και μπορείτε να αποκτήσετε πρόσβαση σε αυτά ως εξής.
λειτουργίαΣπίτι({ δεδομένα }) {
ΕΠΙΣΤΡΟΦΗ (
<div>
// απόδοση δεδομένων
</div>
);
}
Σε αντίθεση με το React, δεν χρειάζεται να προσαρτήσετε το όνομα της μεταβλητής με τίποτα και μπορείτε να το προσθέσετε στο αρχείο .env ως εξής:
API_URL=https://secret-url/de3ed3f
Το Next.js σάς επιτρέπει επίσης να δημιουργείτε τελικά σημεία API στο σελίδες/api ντοσιέ. Ο κώδικας σε αυτά τα τελικά σημεία εκτελείται στον διακομιστή, ώστε να μπορείτε να κρύψετε μυστικά από το μπροστινό μέρος.
Για παράδειγμα, το παραπάνω παράδειγμα μπορεί να ξαναγραφτεί στο pages/api/getData.js αρχείο ως διαδρομή API.
εξαγωγήΠροκαθορισμένοασυγχρονισμόςλειτουργίαχειριστής(απαίτηση, ανάλογ) {
συνθ ανταπόκριση = αναμένω fetch (process.env. API_URL)
συνθ data = answer.json()
ΕΠΙΣΤΡΟΦΗ res.json({data})
}Τώρα μπορείτε να αποκτήσετε πρόσβαση στα επιστρεφόμενα δεδομένα μέσω του /pages/api/getData.js τελικό σημείο.
Διατήρηση μυστικών κλειδιών API
Δεν συνιστάται η προώθηση API στο GitHub. Οποιοσδήποτε μπορεί να βρει τα κλειδιά σας και να τα χρησιμοποιήσει για να υποβάλει αιτήματα API. Χρησιμοποιώντας ένα μη εντοπισμένο αρχείο .env, αποτρέπετε αυτό να συμβεί.
Ωστόσο, δεν πρέπει ποτέ να αποθηκεύετε ευαίσθητα μυστικά σε ένα αρχείο .env στον κώδικα του frontend σας, επειδή ο καθένας μπορεί να τα δει όταν επιθεωρεί τον κώδικά σας. Αντίθετα, ανακτήστε τα δεδομένα από την πλευρά του διακομιστή ή χρησιμοποιήστε το Next.js για να κρύψετε ιδιωτικές μεταβλητές.
