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.

Šī 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, izmantojotizveidot-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.

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

REACT_APP_API_KEY="jūsu_api_atslēga"

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

konst 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.

konst apiURL = process.env. API_URL
app.get('/data', async (req, res) => {
konst atbilde = gaidīt ienest (apiURL)
konst dati = atbilde.json()
	res.json({data})
})

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

konst dati = gaidīt 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ē.

Zemāk ir piemērs.

eksportētasinhronsfunkcijugetStaticProps() {
konst res = gaidīt atnest (process.env. API_URL)
konst dati = res.json()
atgriezties {rekvizīti: {dati }}
}

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

funkcijuMājas({dati}) {
atgriezties (
<div>
// renderēt datus
</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.

eksportētnoklusējumaasinhronsfunkcijuapdarinātājs(req, res) {
konst atbilde = gaidīt atnest (process.env. API_URL)
konst dati = atbilde.json()
atgriezties res.json({data})
}

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.