Kaasaegsed veebirakendused toetuvad lisafunktsioonide jaoks välistele API-dele. Mõned API-d kasutavad taotluste seostamiseks konkreetse rakendusega identifikaatoreid, nagu võtmed ja saladused. Need võtmed on tundlikud ja te ei tohiks neid GitHubile edastada, kuna keegi võib neid kasutada teie konto kaudu API-le päringu saatmiseks.
See õpetus õpetab teile, kuidas API võtmeid Reacti rakenduses ohutult salvestada ja neile juurde pääseda.
Keskkonnamuutujate lisamine CRA rakenduses
A Reageerige rakendusele, mille loote kasutadesloo-reageeri rakendus toetab keskkonnamuutujaid karbist välja. See loeb muutujaid, mis algavad rakendusega REACT_APP, ja teeb need protsessi.env kaudu kättesaadavaks. See on võimalik, kuna dotenv npm pakett on installitud ja konfigureeritud CRA rakenduses.
API võtmete salvestamiseks looge rakenduse React juurkataloogis uus fail nimega .env.
Seejärel lisage API võtme nime ette REACT_APP nagu nii:
REACT_APP_API_KEY="teie_api_võti"
Nüüd pääsete API võtmele juurde mis tahes failis rakenduses React, kasutades protsessi.env.
konst API_KEY = process.env. REACT_APP_API_KEY
Veenduge, et lisate .env faili .gitignore, et git ei saaks seda jälgida.
Miks te ei tohiks salvestada salavõtmeid .env
Kõik, mille salvestate .env-faili, on tootmisjärgus avalikult saadaval. React manustab selle ehitusfailidesse, mis tähendab, et igaüks leiab selle teie rakenduse faile uurides. Selle asemel kasutage taustaprogrammi puhverserverit, mis kutsub API-le teie esiotsa rakenduse nimel.
Keskkonnamuutujate salvestamine taustakoodis
Nagu eespool mainitud, peate salajaste muutujate salvestamiseks looma eraldi taustarakenduse.
Näiteks Allolev API lõpp-punkt toob andmed salajasest URL-ist.
konst apiURL = process.env. API_URL
app.get('/data', asünkroon (req, res) => {
konst vastus = ootama too (apiURL)
konst andmed = vastus.json()
res.json({data})
})
Esiotsa andmete toomiseks ja kasutamiseks helistage sellele API lõpp-punktile.
konst andmed = ootama fetch('http://backend-url/data')
Kui te env-faili GitHubisse ei lükka, ei ole API URL teie järgufailides nähtav.
Rakenduse Next.js kasutamine keskkonnamuutujate salvestamiseks
Teine võimalus on kasutada Next.js-i. Privaatsete keskkonnamuutujatele pääsete juurde funktsiooni getStaticProps() abil.
See funktsioon töötab serveris ehitamise ajal. Seega on selle funktsiooni sees kasutatavad keskkonnamuutujad saadaval ainult keskkonnas Node.js.
Allpool on näide.
eksportidaasünkrfunktsioonigetStaticProps() {
konst res = ootama too (process.env. API_URL)
konst andmed = res.json()
tagasi {rekvisiidid: { andmed }}
}
Andmed on lehel kättesaadavad rekvisiitide kaudu ja neile pääsete juurde järgmiselt.
funktsiooniKodu({ andmed }) {
tagasi (
<div>
// renderda andmeid
</div>
);
}
Erinevalt Reactist ei pea te muutuja nime eesliidet lisama ja saate selle .env-faili lisada järgmiselt:
API_URL=https://secret-url/de3ed3f
Next.js võimaldab teil luua ka API lõpp-punkte lehed/api kausta. Nendes lõpp-punktides olev kood töötab serveris, nii et saate esiotsast saladusi maskeerida.
Näiteks saab ülaltoodud näite ümber kirjutada pages/api/getData.js faili API marsruudina.
eksportidavaikimisiasünkrfunktsioonikäitleja(req, res) {
konst vastus = ootama too (process.env. API_URL)
konst andmed = vastus.json()
tagasi res.json({data})
}Nüüd pääsete tagastatud andmetele juurde läbi /pages/api/getData.js lõpp-punkt.
API võtmete salajas hoidmine
API-de surumine GitHubisse ei ole soovitatav. Igaüks võib leida teie võtmed ja kasutada neid API taotluste tegemiseks. Kasutades jälgimata .env-faili, hoiate selle ära.
Kuid te ei tohiks kunagi salvestada tundlikke saladusi .env-faili oma kasutajaliidese koodis, sest igaüks näeb seda teie koodi kontrollides. Selle asemel hankige andmed serveri poolelt või kasutage privaatsete muutujate maskeerimiseks faili Next.js.