Kā uzglabāt un piekļūt API atslēgas React lietojumprogrammā

Kā uzglabāt un piekļūt API atslēgas React lietojumprogrammā

Mūsdienu tīmekļa lietojumprogrammas paļaujas uz ārējiem API, lai nodrošinātu papildu funkcionalitāti. Dažas API izmanto identifikatorus, piemēram, atslēgas un noslēpumus, lai saistītu pieprasījumus ar noteiktu lietojumprogrammu. Šīs atslēgas ir sensitīvas, un tās nedrīkst nosūtīt GitHub, jo tās var izmantot, lai nosūtītu pieprasījumu API, izmantojot jūsu kontu.





DIENAS VIDEO MAKEUSEOF

Šī apmācība jums iemācīs, kā droši glabāt un piekļūt API atslēgas React lietojumprogrammā.





Vides mainīgo pievienošana CRA lietotnē

A Reaģējiet uz lietojumprogrammu, kuru izveidojat, izmantojot izveidot-reaģēt-lietotni atbalsta vides mainīgos jau no kastes. Tas nolasa mainīgos, kas sākas ar REACT_APP, un padara tos pieejamus, izmantojot procesu.env. Tas ir iespējams, jo dotenv npm pakotne ir instalēta un konfigurēta CRA lietotnē.





Lai saglabātu API atslēgas, lietojumprogrammas React saknes direktorijā izveidojiet jaunu failu ar nosaukumu .env.

xbox one x ir jaunināšanas vērts

Pēc tam pievienojiet API atslēgas nosaukumu ar REACT_APP kā šis:



REACT_APP_API_KEY="your_api_key" 

Tagad varat piekļūt API atslēgai jebkurā React lietotnes failā, izmantojot procesu.env.

const API_KEY = process.env.REACT_APP_API_KEY 

Noteikti pievienojiet .env failam .gitignore, lai neļautu git to izsekot.





Kāpēc nevajadzētu glabāt slepenās atslēgas .env

Viss, ko glabājat .env failā, ir publiski pieejams ražošanas versijā. React iegulst to būvfailos, kas nozīmē, ka ikviens to var atrast, pārbaudot jūsu lietotnes failus. Tā vietā izmantojiet aizmugursistēmas starpniekserveri, kas izsauc API jūsu priekšgala lietojumprogrammas vārdā.

Vides mainīgo glabāšana aizmugursistēmas kodā

Kā minēts iepriekš, jums ir jāizveido atsevišķa aizmugurprogramma, lai saglabātu slepenos mainīgos.





Piemēram, Tālāk norādītais API galapunkts ienes datus no slepena 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})
})

Izsauciet šo API galapunktu, lai ielādētu un izmantotu datus priekšgalā.

const data = await fetch('http://backend-url/data') 

Tagad, ja vien nenosūtīsit .env failu uz GitHub, API URL nebūs redzams jūsu būvfailos.

Izmantojot Next.js, lai saglabātu vides mainīgos

Vēl viena alternatīva ir izmantot Next.js. Privātiem vides mainīgajiem varat piekļūt funkcijā getStaticProps().

Šī funkcija darbojas servera izveides laikā. Tādējādi vides mainīgie, kuriem piekļūstat šajā funkcijā, būs pieejami tikai Node.js vidē.

nezināma USB ierīce (ierīces aprakstītāja pieprasījums neizdevās)

Zemāk ir piemērs.

export async function getStaticProps() { 
const res = await fetch(process.env.API_URL)
const data = res.json()
return {props: { data }}
}

Dati būs pieejami lapā, izmantojot rekvizītus, un tiem varat piekļūt šādi.

function Home({ data }) { 
return (
<div>
// render data
</div>
);
}

Atšķirībā no React, mainīgā nosaukuma priekšā nekas nav jāpievieno, un to var pievienot .env failam šādi:

API_URL=https://secret-url/de3ed3f 

Next.js ļauj arī izveidot API galapunktus lapas/api mapi. Kods šajos galapunktos darbojas serverī, lai jūs varētu maskēt noslēpumus no priekšgala.

Piemēram, iepriekš minēto piemēru var pārrakstīt pages/api/getData.js failu kā API maršrutu.

kas ir tf karte?
4B479C8FF1390AFADECE0CFFD337D1B5229075

Tagad varat piekļūt atgrieztajiem datiem, izmantojot /pages/api/getData.js galapunkts.

API atslēgu noslēpšana

Nav ieteicams sūtīt API uz GitHub. Ikviens var atrast jūsu atslēgas un izmantot tās, lai veiktu API pieprasījumus. Izmantojot neizsekotu .env failu, jūs to novēršat.

Tomēr nekad nevajadzētu glabāt sensitīvus noslēpumus .env failā savā priekšgala kodā, jo ikviens to var redzēt, pārbaudot jūsu kodu. Tā vietā iegūstiet datus servera pusē vai izmantojiet Next.js, lai maskētu privātos mainīgos.