Home-theater-designers
ఆధునిక వెబ్ అప్లికేషన్‌లు అదనపు కార్యాచరణ కోసం బాహ్య APIలపై ఆధారపడతాయి. కొన్ని APIలు నిర్దిష్ట అప్లికేషన్‌తో అభ్యర్థనలను అనుబంధించడానికి కీలు మరియు రహస్యాలు వంటి ఐడెంటిఫైయర్‌లను ఉపయోగిస్తాయి. ఈ కీలు సున్నితమైనవి మరియు మీరు వాటిని GitHubకి నెట్టకూడదు ఎందుకంటే ఎవరైనా మీ ఖాతాను ఉపయోగించి APIకి అభ్యర్థనను పంపడానికి వాటిని ఉపయోగించవచ్చు.
రోజు యొక్క వీడియోను తయారు చేయండి
ఈ ట్యుటోరియల్ రియాక్ట్ అప్లికేషన్‌లో 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
మీరు .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 ముగింపు పాయింట్‌లను సృష్టించడానికి కూడా అనుమతిస్తుంది పేజీలు/api ఫోల్డర్. ఈ ఎండ్ పాయింట్స్‌లోని కోడ్ సర్వర్‌లో నడుస్తుంది, కాబట్టి మీరు ఫ్రంట్ ఎండ్ నుండి రహస్యాలను దాచవచ్చు.
ఉదాహరణకు, పై ఉదాహరణను లో తిరిగి వ్రాయవచ్చు pages/api/getData.js API మార్గంగా ఫైల్.
4B479C8FF1390AFADECE0CFFD337D1B5229075మీరు ఇప్పుడు ద్వారా తిరిగి వచ్చిన డేటాను యాక్సెస్ చేయవచ్చు /pages/api/getData.js ముగింపు బిందువు.
API కీలను రహస్యంగా ఉంచడం
APIలను GitHubకి నెట్టడం మంచిది కాదు. ఎవరైనా మీ కీలను కనుగొనవచ్చు మరియు API అభ్యర్థనలను చేయడానికి వాటిని ఉపయోగించవచ్చు. అన్‌ట్రాక్ చేయని .env ఫైల్‌ని ఉపయోగించడం ద్వారా, మీరు ఇలా జరగకుండా నిరోధిస్తారు.
అయినప్పటికీ, మీరు మీ ఫ్రంటెండ్ కోడ్‌లోని .env ఫైల్‌లో సున్నితమైన రహస్యాలను ఎప్పుడూ నిల్వ చేయకూడదు ఎందుకంటే ఎవరైనా మీ కోడ్‌ని తనిఖీ చేసినప్పుడు వాటిని చూడగలరు. బదులుగా, సర్వర్ వైపు డేటాను పొందండి లేదా ప్రైవేట్ వేరియబుల్స్‌ను మాస్క్ చేయడానికి Next.jsని ఉపయోగించండి.