كيفية تخزين مفاتيح API والوصول إليها في تطبيق React

تعتمد تطبيقات الويب الحديثة على واجهات برمجة التطبيقات الخارجية للحصول على وظائف إضافية. تستخدم بعض واجهات برمجة التطبيقات معرفات مثل المفاتيح والأسرار لربط الطلبات بتطبيق معين. هذه المفاتيح حساسة ويجب ألا تدفعها إلى 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.

const API_KEY = process.env.REACT_APP_API_KEY 

تأكد من إضافة .env إلى ملف .gitignore لمنع git من تعقبه.

---

---

لماذا لا يجب تخزين المفاتيح السرية بتنسيق env

أي شيء تقوم بتخزينه في ملف .env متاح للجمهور في بناء الإنتاج. تقوم React بتضمينها في ملفات الإصدار ، مما يعني أنه يمكن لأي شخص العثور عليها من خلال فحص ملفات تطبيقك. بدلاً من ذلك ، استخدم الخادم الوكيل الخلفي الذي يستدعي واجهة برمجة التطبيقات نيابة عن تطبيق الواجهة الأمامية الخاص بك.

تخزين متغيرات البيئة في كود الواجهة الخلفية

كما ذكرنا أعلاه ، يجب عليك إنشاء تطبيق خلفي منفصل لتخزين المتغيرات السرية.

---

---

على سبيل المثال ، ملف نقطة نهاية API أدناه لجلب البيانات من عنوان URL سري.

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 ، فلن يكون عنوان URL الخاص بواجهة برمجة التطبيقات مرئيًا في ملفات الإنشاء.

استخدام Next.js لتخزين متغيرات البيئة

بديل آخر هو استخدام Next.js. يمكنك الوصول إلى متغيرات البيئة الخاصة في دالة getStaticProps ().

تعمل هذه الوظيفة أثناء وقت الإنشاء على الخادم. لذا فإن متغيرات البيئة التي تصل إليها داخل هذه الوظيفة ستكون متاحة فقط في بيئة Node.js.

يوجد أدناه مثال.

أفضل HD خلفية حية لالروبوت

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 مجلد. تعمل التعليمات البرمجية في نقاط النهاية هذه على الخادم ، بحيث يمكنك إخفاء الأسرار من الواجهة الأمامية.

على سبيل المثال ، يمكن إعادة كتابة المثال أعلاه في الصفحات / 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

لا يُنصح بدفع واجهات برمجة التطبيقات إلى GitHub. يمكن لأي شخص العثور على المفاتيح الخاصة بك واستخدامها لتقديم طلبات API. باستخدام ملف env. لم يتم تعقبه ، فإنك تمنع حدوث ذلك.

ومع ذلك ، يجب ألا تخزن أبدًا أسرارًا حساسة في ملف .env في كود الواجهة الأمامية لأن أي شخص يمكنه رؤيتها عند فحص الكود الخاص بك. بدلاً من ذلك ، قم بإحضار البيانات من جانب الخادم أو استخدم Next.js لإخفاء المتغيرات الخاصة.