आधुनिक वेब एप्लिकेशन अतिरिक्त कार्यक्षमता के लिए बाहरी एपीआई पर निर्भर हैं। कुछ एपीआई किसी विशेष एप्लिकेशन के साथ अनुरोधों को जोड़ने के लिए चाबियों और रहस्यों जैसे पहचानकर्ताओं का उपयोग करते हैं। ये कुंजियाँ संवेदनशील हैं और आपको इन्हें GitHub पर नहीं धकेलना चाहिए क्योंकि कोई भी इनका उपयोग आपके खाते का उपयोग करके API को अनुरोध भेजने के लिए कर सकता है।

यह ट्यूटोरियल आपको सिखाएगा कि कैसे रिएक्ट एप्लिकेशन में एपीआई कुंजियों को सुरक्षित रूप से स्टोर और एक्सेस किया जाए।

सीआरए ऐप में पर्यावरण चर जोड़ना

ए रिएक्ट एप्लिकेशन जिसे आप उपयोग करके बनाते हैंक्रिएट-रिएक्शन-ऐप बॉक्स के बाहर पर्यावरण चर का समर्थन करता है। यह उन चरों को पढ़ता है जो REACT_APP से शुरू होते हैं और उन्हें process.env के माध्यम से उपलब्ध कराते हैं। यह इसलिए संभव है क्योंकि dotenv npm पैकेज CRA ऐप में इंस्टाल और कॉन्फिगर हो जाता है।

एपीआई कुंजी को स्टोर करने के लिए, रिएक्ट एप्लिकेशन की रूट डायरेक्टरी में .env नामक एक नई फाइल बनाएं।

फिर, एपीआई कुंजी नाम के साथ उपसर्ग करें REACT_APP इस तरह:

REACT_APP_API_KEY="your_api_key"

अब आप प्रक्रिया.env का उपयोग करके रिएक्ट ऐप में किसी भी फ़ाइल में एपीआई कुंजी का उपयोग कर सकते हैं।

instagram viewer 
स्थिरांक API_KEY = process.env. REACT_APP_API_KEY

सुनिश्चित करें कि आप .env को .gitignore फ़ाइल में जोड़ते हैं ताकि git को इसे ट्रैक करने से रोका जा सके।

आपको सीक्रेट कीज़ को .env. में स्टोर क्यों नहीं करना चाहिए

जो कुछ भी आप .env फ़ाइल में संग्रहीत करते हैं, वह सार्वजनिक रूप से प्रोडक्शन बिल्ड में उपलब्ध होता है। रिएक्ट इसे बिल्ड फाइलों में एम्बेड करता है, जिसका अर्थ है कि कोई भी आपके ऐप की फाइलों का निरीक्षण करके इसे ढूंढ सकता है। इसके बजाय, बैकएंड प्रॉक्सी का उपयोग करें जो आपके फ़्रंट-एंड एप्लिकेशन की ओर से API को कॉल करता है।

बैकएंड कोड में पर्यावरण चर संग्रहीत करना

जैसा कि ऊपर उल्लेख किया गया है, आपको गुप्त चरों को संग्रहीत करने के लिए एक अलग बैकएंड एप्लिकेशन बनाना होगा।

उदाहरण के लिए, एपीआई एंडपॉइंट नीचे डेटा प्राप्त करता है एक गुप्त यूआरएल से।

स्थिरांक apiURL = process.env. एपीआई_यूआरएल
app.get('/data', async (req, res) => {
स्थिरांक प्रतिक्रिया = इंतजार फ़ेच (एपीआईयूआरएल)
स्थिरांक डेटा = प्रतिक्रिया.जेसन ()
	रेस.जेसन ({डेटा})
})

सामने के छोर में डेटा लाने और उपयोग करने के लिए इस एपीआई एंडपॉइंट को कॉल करें।

स्थिरांक डेटा = इंतजार फ़ेच ('http://backend-url/data')

अब, जब तक आप .env फ़ाइल को GitHub पर पुश नहीं करते हैं, तब तक API URL आपकी बिल्ड फ़ाइलों में दिखाई नहीं देगा।

पर्यावरण चर स्टोर करने के लिए Next.js का उपयोग करना

एक अन्य विकल्प Next.js का उपयोग करना है। आप निजी पर्यावरण चर को getStaticProps() फ़ंक्शन में एक्सेस कर सकते हैं।

यह फ़ंक्शन सर्वर पर बिल्ड टाइम के दौरान चलता है। तो इस फ़ंक्शन के अंदर आपके द्वारा एक्सेस किए जाने वाले पर्यावरण चर केवल Node.js वातावरण में उपलब्ध होंगे।

नीचे एक उदाहरण है।

निर्यात करनाअतुल्यकालिकसमारोहgetStaticProps() {
स्थिरांक रेस = इंतजार फ़ेच (प्रक्रिया.env. एपीआई_यूआरएल)
स्थिरांक डेटा = res.json ()
वापसी {रंगमंच की सामग्री: { जानकारी }}
}

डेटा पृष्ठ पर प्रॉप्स के माध्यम से उपलब्ध होगा, और आप इसे निम्नानुसार एक्सेस कर सकते हैं।

समारोहघर({ जानकारी }) {
वापसी (
<डिव>
// डेटा प्रस्तुत करें
</div>
 );
}

रिएक्ट के विपरीत, आपको किसी भी चीज़ के साथ वेरिएबल नाम को उपसर्ग करने की आवश्यकता नहीं है और आप इसे .env फ़ाइल में इस तरह जोड़ सकते हैं:

API_URL=https://secret-url/de3ed3f

Next.js आपको एपीआई एंडपॉइंट बनाने की भी अनुमति देता है पेज/एपीआई फ़ोल्डर। इन समापन बिंदुओं में कोड सर्वर पर चलता है, इसलिए आप सामने के छोर से रहस्यों को छिपा सकते हैं।

उदाहरण के लिए, उपरोक्त उदाहरण में फिर से लिखा जा सकता है पेज/एपीआई/getData.js एक एपीआई मार्ग के रूप में फ़ाइल।

निर्यात करनाचूकअतुल्यकालिकसमारोहहैंडलर(अनुरोध, पुनः) {
स्थिरांक प्रतिक्रिया = इंतजार फ़ेच (प्रक्रिया.env. एपीआई_यूआरएल)
स्थिरांक डेटा = प्रतिक्रिया.जेसन ()
वापसी रेस.जेसन ({डेटा})
}

अब आप लौटाए गए डेटा तक पहुंच सकते हैं /pages/api/getData.js समापन बिंदु

एपीआई कुंजी को गुप्त रखना

एपीआई को गिटहब पर धकेलना उचित नहीं है। कोई भी आपकी कुंजी ढूंढ सकता है और एपीआई अनुरोध करने के लिए उनका उपयोग कर सकता है। ट्रैक न की गई .env फ़ाइल का उपयोग करके, आप ऐसा होने से रोकते हैं।

हालांकि, आपको कभी भी अपने फ़्रंटएंड कोड में .env फ़ाइल में संवेदनशील रहस्यों को संग्रहीत नहीं करना चाहिए क्योंकि कोई भी इसे देख सकता है जब वे आपके कोड का निरीक्षण करते हैं। इसके बजाय, सर्वर साइड पर डेटा प्राप्त करें या निजी वेरिएबल को मास्क करने के लिए Next.js का उपयोग करें।