כיצד לאחסן ולגשת למפתחות API ביישום React

יישומי אינטרנט מודרניים מסתמכים על ממשקי 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', 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, כתובת ה-API לא תהיה גלויה בקבצי ה-build שלך.

שימוש ב-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 }} 
}

הנתונים יהיו זמינים בעמוד באמצעות אביזרים, ותוכלו לגשת אליהם באופן הבא.

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 בקוד הקצה שלך מכיוון שכל אחד יכול לראות אותו כאשר הוא בודק את הקוד שלך. במקום זאת, אחזר את הנתונים בצד השרת או השתמש ב-Next.js כדי להסוות משתנים פרטיים.