יישומי אינטרנט מודרניים מסתמכים על ממשקי API חיצוניים לתוספת פונקציונליות. כמה ממשקי API משתמשים במזהים כמו מפתחות וסודות כדי לשייך בקשות לאפליקציה מסוימת. מפתחות אלו רגישים ואין לדחוף אותם ל-GitHub מכיוון שכל אחד עשוי להשתמש בהם כדי לשלוח בקשה ל-API באמצעות החשבון שלך.
מדריך זה ילמד אותך כיצד לאחסן ולגשת בבטחה למפתחות API באפליקציית React.
הוספת משתני סביבה באפליקציית CRA
א יישום תגובה שאתה יוצר באמצעותליצור-להגיב-אפליקציה תומך במשתני סביבה מחוץ לקופסה. הוא קורא משתנים שמתחילים ב-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 מטמיע אותו בקובצי ה-build, מה שאומר שכל אחד יכול למצוא אותו על ידי בדיקת קבצי האפליקציה שלך. במקום זאת, השתמש ב-proxy backend שקורא ל-API בשם היישום הקדמי שלך.
אחסון משתני סביבה בקוד הקצה האחורי
כפי שהוזכר לעיל, עליך ליצור יישום אחורי נפרד לאחסון משתנים סודיים.
לדוגמה, ה נקודת קצה של ממשק API למטה מביאה נתונים מכתובת אתר סודית.
const apiURL = process.env. API_URL
app.get('/data', אסינכרון (req, res) => {
const תגובה = לְהַמתִין אחזר (apiURL)
const data = response.json()
res.json({data})
})
התקשר לנקודת קצה זו של API כדי לאחזר ולהשתמש בנתונים בממשק הקצה.
const נתונים = לְהַמתִין fetch('http://backend-url/data')
כעת, אלא אם תדחף את קובץ ה-.env אל GitHub, כתובת ה-API לא תהיה גלויה בקבצי ה-build שלך.
שימוש ב-Next.js לאחסון משתני סביבה
חלופה נוספת היא להשתמש ב-Next.js. אתה יכול לגשת למשתני סביבה פרטית בפונקציה getStaticProps().
פונקציה זו פועלת במהלך זמן הבנייה בשרת. אז משתני הסביבה שאליהם אתה ניגש בתוך פונקציה זו יהיו זמינים רק בסביבת Node.js.
להלן דוגמה.
יְצוּאאסינכרוןפוּנקצִיָהgetStaticProps() {
const res = לְהַמתִין להביא (process.env. API_URL)
const data = res.json()
לַחֲזוֹר {אביזרים: { נתונים }}
}
הנתונים יהיו זמינים בעמוד באמצעות אביזרים, ותוכלו לגשת אליהם באופן הבא.
פוּנקצִיָהבית({ נתונים }) {
לַחֲזוֹר (
<div>
// עיבוד נתונים
</div>
);
}
שלא כמו ב-React, אינך צריך להוסיף שום דבר לפני שם המשתנה ותוכל להוסיף אותו לקובץ .env כך:
API_URL=https://secret-url/de3ed3f
Next.js גם מאפשר לך ליצור נקודות קצה של API ב- דפים/ממשק API תיקייה. הקוד בנקודות הקצה הללו פועל על השרת, כך שתוכל להסוות סודות מהקצה הקדמי.
לדוגמה, ניתן לשכתב את הדוגמה לעיל ב- pages/api/getData.js קובץ כמסלול API.
יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהמטפל(דרישה, מילואים) {
const תגובה = לְהַמתִין להביא (process.env. API_URL)
const data = response.json()
לַחֲזוֹר res.json({data})
}כעת תוכל לגשת לנתונים המוחזרים דרך ה /pages/api/getData.js נקודת קצה.
שמירת מפתחות API בסוד
לא מומלץ לדחוף ממשקי API ל- GitHub. כל אחד יכול למצוא את המפתחות שלך ולהשתמש בהם כדי לבצע בקשות API. על ידי שימוש בקובץ .env ללא מעקב, אתה מונע את זה לקרות.
עם זאת, לעולם אל תשמור סודות רגישים בקובץ .env בקוד הקצה שלך מכיוון שכל אחד יכול לראות אותו כאשר הוא בודק את הקוד שלך. במקום זאת, אחזר את הנתונים בצד השרת או השתמש ב-Next.js כדי להסוות משתנים פרטיים.
