شما می توانید کارهای زیادی با API ها انجام دهید، اما مطمئن شوید که کلیدها و رمزهای عبور خود را ایمن و ایمن نگه دارید.
برنامه‌های کاربردی وب مدرن برای عملکرد بیشتر به APIهای خارجی متکی هستند. برخی از APIها از شناسه هایی مانند کلیدها و رازها برای مرتبط کردن درخواست ها با یک برنامه خاص استفاده می کنند. این کلیدها حساس هستند و نباید آنها را به GitHub فشار دهید زیرا ممکن است هر کسی با استفاده از حساب شما از آنها برای ارسال درخواست به API استفاده کند.
این آموزش به شما یاد می دهد که چگونه به طور ایمن کلیدهای API را در یک برنامه React ذخیره کرده و به آنها دسترسی داشته باشید.
اضافه کردن متغیرهای محیطی در یک برنامه CRA
یک برنامه React که با استفاده از create-react-app ایجاد می‌کنید، از متغیرهای محیطی خارج از جعبه پشتیبانی می‌کند. متغیرهایی که با REACT_APP شروع می شوند را می خواند و آنها را از طریق process.env در دسترس قرار می دهد. این امکان پذیر است زیرا بسته dotenv npm در یک برنامه CRA نصب و پیکربندی شده است.
برای ذخیره کلیدهای API، یک فایل جدید به نام .env در فهرست اصلی برنامه React ایجاد کنید.
سپس، نام کلید API را با REACT_APP مانند این پیشوند قرار دهید:
REACT_APP_API_KEY="your_api_key"
اکنون می توانید با استفاده از process.env به کلید API در هر فایلی در برنامه React دسترسی داشته باشید.
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(&apos/data&apos, async (req, res) => {
const response = await fetch(apiURL)
const data = response.json()
res.json({data})
})
این نقطه پایانی API را برای واکشی و استفاده از داده ها در قسمت جلویی صدا کنید.
const data = await fetch(&aposhttp://backend-url/data&apos)
اکنون، مگر اینکه فایل .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 را در پوشه pages/api ایجاد کنید. کد در این نقاط پایانی بر روی سرور اجرا می شود، بنابراین می توانید اسرار را از قسمت جلویی پنهان کنید.
به عنوان مثال، مثال بالا را می توان در فایل pages/api/getData.js به عنوان یک مسیر API بازنویسی کرد.
export default async function handler(req, res) {
const response = await fetch(process.env.API_URL)
const data = response.json()
return res.json({data})
}
اکنون می توانید از طریق /pages/api/getData.js به داده های برگشتی دسترسی داشته باشید.
مخفی نگه داشتن کلیدهای API
فشار دادن APIها به GitHub توصیه نمی شود. هر کسی می تواند کلیدهای شما را پیدا کند و از آنها برای درخواست API استفاده کند. با استفاده از یک فایل .env ردیابی نشده، از این اتفاق جلوگیری می کنید.
با این حال، هرگز نباید اسرار حساس را در یک فایل .env در کد frontend خود ذخیره کنید زیرا هر کسی می تواند آن را هنگام بازرسی کد شما ببیند. در عوض، داده ها را در سمت سرور واکشی کنید یا از Next.js برای پوشاندن متغیرهای خصوصی استفاده کنید.