تعتمد تطبيقات الويب الحديثة على واجهات برمجة التطبيقات الخارجية للحصول على وظائف إضافية. تستخدم بعض واجهات برمجة التطبيقات معرفات مثل المفاتيح والأسرار لربط الطلبات بتطبيق معين. هذه المفاتيح حساسة ويجب ألا تدفعها إلى GitHub لأن أي شخص قد يستخدمها لإرسال طلب إلى واجهة برمجة التطبيقات باستخدام حسابك.
سيعلمك هذا البرنامج التعليمي كيفية تخزين مفاتيح 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.
مقدار ثابت API_KEY = process.env. REACT_APP_API_KEY
تأكد من إضافة .env إلى ملف .gitignore لمنع git من تعقبه.
لماذا لا يجب عليك تخزين المفاتيح السرية بتنسيق env
أي شيء تقوم بتخزينه في ملف .env متاح للجمهور في بناء الإنتاج. تقوم React بتضمينها في ملفات الإصدار ، مما يعني أنه يمكن لأي شخص العثور عليها من خلال فحص ملفات تطبيقك. بدلاً من ذلك ، استخدم الخادم الوكيل الخلفي الذي يستدعي واجهة برمجة التطبيقات نيابة عن تطبيق الواجهة الأمامية الخاص بك.
تخزين متغيرات البيئة في كود الواجهة الخلفية
كما ذكرنا أعلاه ، يجب عليك إنشاء تطبيق خلفي منفصل لتخزين المتغيرات السرية.
على سبيل المثال ، ملف نقطة نهاية API أدناه لجلب البيانات من عنوان URL سري.
مقدار ثابت apiURL = process.env. API_URL
app.get ('/data'، غير متزامن (مطلوب ، الدقة) => {
مقدار ثابت استجابة = انتظر جلب (apiURL)
مقدار ثابت data = response.json ()
res.json ({data})
})
اتصل بنقطة نهاية API هذه لجلب واستخدام البيانات الموجودة في الواجهة الأمامية.
مقدار ثابت البيانات = انتظر جلب ("http://backend-url/data')
الآن ، ما لم تدفع ملف .env إلى GitHub ، فلن يكون عنوان URL الخاص بواجهة برمجة التطبيقات مرئيًا في ملفات الإنشاء.
استخدام Next.js لتخزين متغيرات البيئة
بديل آخر هو استخدام Next.js. يمكنك الوصول إلى متغيرات البيئة الخاصة في دالة getStaticProps ().
تعمل هذه الوظيفة أثناء وقت الإنشاء على الخادم. لذا فإن متغيرات البيئة التي تصل إليها داخل هذه الوظيفة ستكون متاحة فقط في بيئة Node.js.
يوجد أدناه مثال.
يصدّرغير متزامنوظيفةgetStaticProps() {
مقدار ثابت الدقة = انتظر إحضار (process.env. API_URL)
مقدار ثابت data = res.json ()
إرجاع {الدعائم: { بيانات }}
}
ستكون البيانات متاحة على الصفحة عبر الدعائم ، ويمكنك الوصول إليها على النحو التالي.
وظيفةمسكن({ بيانات }) {
إرجاع (
<شعبة>
// تقديم البيانات
</div>
);
}
على عكس React ، ليس عليك أن تسبق اسم المتغير بأي شيء ويمكنك إضافته إلى ملف .env مثل هذا:
API_URL = https://secret-url/de3ed3f
يتيح لك Next.js أيضًا إنشاء نقاط نهاية API بتنسيق الصفحات / api مجلد. تعمل التعليمات البرمجية في نقاط النهاية هذه على الخادم ، بحيث يمكنك إخفاء الأسرار من الواجهة الأمامية.
على سبيل المثال ، يمكن إعادة كتابة المثال أعلاه في الصفحات / api / getData.js ملف كمسار API.
يصدّرإفتراضيغير متزامنوظيفةمعالج(مطلوب ، الدقة) {
مقدار ثابت استجابة = انتظر إحضار (process.env. API_URL)
مقدار ثابت data = response.json ()
إرجاع res.json ({data})
}يمكنك الآن الوصول إلى البيانات التي تم إرجاعها من خلال ملف /pages/api/getData.js نقطة النهاية.
الحفاظ على سرية مفاتيح API
لا يُنصح بدفع واجهات برمجة التطبيقات إلى GitHub. يمكن لأي شخص العثور على المفاتيح الخاصة بك واستخدامها لتقديم طلبات API. باستخدام ملف env. لم يتم تعقبه ، فإنك تمنع حدوث ذلك.
ومع ذلك ، يجب ألا تخزن أبدًا أسرارًا حساسة في ملف .env في كود الواجهة الأمامية لأن أي شخص يمكنه رؤيتها عند فحص الكود الخاص بك. بدلاً من ذلك ، قم بإحضار البيانات من جانب الخادم أو استخدم Next.js لإخفاء المتغيرات الخاصة.
