எதிர்வினை பயன்பாட்டில் API விசைகளை எவ்வாறு சேமிப்பது மற்றும் அணுகுவது

நவீன வலை பயன்பாடுகள் கூடுதல் செயல்பாட்டிற்கு வெளிப்புற APIகளை நம்பியுள்ளன. சில APIகள் விசைகள் மற்றும் ரகசியங்கள் போன்ற அடையாளங்காட்டிகளைப் பயன்படுத்தி கோரிக்கைகளை ஒரு குறிப்பிட்ட பயன்பாட்டுடன் இணைக்கின்றன. இந்த விசைகள் உணர்திறன் வாய்ந்தவை மற்றும் உங்கள் கணக்கைப் பயன்படுத்தி API க்கு கோரிக்கையை அனுப்ப எவரும் அவற்றைப் பயன்படுத்தலாம் என்பதால் அவற்றை GitHub க்கு தள்ள வேண்டாம்.

அன்றைய வீடியோவை உருவாக்கவும்

ரியாக்ட் பயன்பாட்டில் API விசைகளை எவ்வாறு பாதுகாப்பாக சேமிப்பது மற்றும் அணுகுவது என்பதை இந்தப் பயிற்சி உங்களுக்குக் கற்பிக்கும்.

---

---

CRA பயன்பாட்டில் சுற்றுச்சூழல் மாறிகளைச் சேர்த்தல்

ஏ நீங்கள் பயன்படுத்தி உருவாக்கும் எதிர்வினை பயன்பாடு உருவாக்க-எதிர்வினை-பயன்பாடு பெட்டிக்கு வெளியே சூழல் மாறிகளை ஆதரிக்கிறது. இது REACT_APP உடன் தொடங்கும் மாறிகளைப் படிக்கிறது மற்றும் அவற்றை process.env மூலம் கிடைக்கும். dotenv npm தொகுப்பு CRA பயன்பாட்டில் நிறுவப்பட்டு கட்டமைக்கப்படுவதால் இது சாத்தியமாகும்.

API விசைகளைச் சேமிக்க, ரியாக்ட் பயன்பாட்டின் ரூட் கோப்பகத்தில் .env என்ற புதிய கோப்பை உருவாக்கவும்.

ஐடியூன்ஸ் காப்பு இருப்பிடத்தை எப்படி மாற்றுவது

பின்னர், API முக்கிய பெயரை முன்னொட்டுடன் இணைக்கவும் REACT_APP இது போன்ற:

REACT_APP_API_KEY="your_api_key" 

நீங்கள் இப்போது process.env ஐப் பயன்படுத்தி ரியாக்ட் பயன்பாட்டில் உள்ள எந்த கோப்பிலும் API விசையை அணுகலாம்.

const API_KEY = process.env.REACT_APP_API_KEY 

Gitஐக் கண்காணிப்பதைத் தடுக்க, .gitignore கோப்பில் .env ஐச் சேர்ப்பதை உறுதிசெய்யவும்.

---

---

நீங்கள் ஏன் ரகசிய விசைகளை .env இல் சேமிக்கக்கூடாது

.env கோப்பில் நீங்கள் சேமித்து வைக்கும் அனைத்தும் தயாரிப்பு உருவாக்கத்தில் பொதுவில் கிடைக்கும். ரியாக்ட் அதை உருவாக்க கோப்புகளில் உட்பொதிக்கிறது, அதாவது உங்கள் பயன்பாட்டின் கோப்புகளை ஆய்வு செய்வதன் மூலம் எவரும் அதைக் கண்டறியலாம். அதற்கு பதிலாக, உங்கள் முன்-இறுதி பயன்பாட்டின் சார்பாக API ஐ அழைக்கும் பின்தள ப்ராக்ஸியைப் பயன்படுத்தவும்.

கூகிள் வீட்டில் கேட்க வேடிக்கையான விஷயங்கள்

பின்புலக் குறியீட்டில் சுற்றுச்சூழல் மாறிகளை சேமிப்பது

மேலே குறிப்பிட்டுள்ளபடி, ரகசிய மாறிகளை சேமிக்க நீங்கள் ஒரு தனி பின்தளத்தில் பயன்பாட்டை உருவாக்க வேண்டும்.

---

---

உதாரணமாக, தி கீழே உள்ள 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 க்கு தள்ளும் வரை, உங்கள் உருவாக்கக் கோப்புகளில் API URL தெரியாது.

சூழல் மாறிகளை சேமிக்க 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> 
  ); 
} 

ரியாக்ட் போலல்லாமல், நீங்கள் மாறி பெயரை எதனுடனும் முன்னொட்டாக வைக்க வேண்டியதில்லை, மேலும் இதை .env கோப்பில் சேர்க்கலாம்:

API_URL=https://secret-url/de3ed3f 

Next.js இல் API இறுதிப்புள்ளிகளை உருவாக்கவும் உங்களை அனுமதிக்கிறது பக்கங்கள்/ஏபிஐ கோப்புறை. இந்த எண்ட் பாயிண்டுகளில் உள்ள குறியீடு சர்வரில் இயங்குகிறது, எனவே நீங்கள் முன் முனையிலிருந்து ரகசியங்களை மறைக்க முடியும்.

உங்கள் கணினியில் போகிமொனை எப்படி விளையாடுவது

எடுத்துக்காட்டாக, மேலே உள்ள உதாரணத்தை மீண்டும் எழுதலாம் pages/api/getData.js கோப்பு API வழி.

4B479C8FF1390AFADECE0CFFD337D1B5229075

நீங்கள் இப்போது திரும்பிய தரவை அணுகலாம் /pages/api/getData.js இறுதிப்புள்ளி.

API விசைகளை ரகசியமாக வைத்திருத்தல்

APIகளை GitHub க்கு தள்ளுவது நல்லதல்ல. உங்கள் விசைகளை எவரும் கண்டுபிடித்து, API கோரிக்கைகளை உருவாக்க அவற்றைப் பயன்படுத்தலாம். கண்காணிக்கப்படாத .env கோப்பைப் பயன்படுத்துவதன் மூலம், இது நடப்பதைத் தடுக்கிறீர்கள்.

எவ்வாறாயினும், உங்கள் முன்னோட்டக் குறியீட்டில் உள்ள முக்கிய ரகசியங்களை .env கோப்பில் ஒருபோதும் சேமிக்க வேண்டாம், ஏனெனில் உங்கள் குறியீட்டை ஆய்வு செய்யும் போது எவரும் அதைப் பார்க்க முடியும். அதற்கு பதிலாக, சர்வர் பக்கத்தில் தரவைப் பெறவும் அல்லது தனிப்பட்ட மாறிகளை மறைக்க Next.js ஐப் பயன்படுத்தவும்.