Home-theater-designers
Nykyaikaiset verkkosovellukset luottavat ulkoisiin sovellusliittymiin lisätoimintojen saamiseksi. Jotkut sovellusliittymät käyttävät tunnisteita, kuten avaimia ja salaisuuksia, liittääkseen pyynnöt tiettyyn sovellukseen. Nämä avaimet ovat arkaluonteisia, eikä niitä tule työntää GitHubiin, koska kukaan saattaa käyttää niitä pyynnön lähettämiseen sovellusliittymälle tiliäsi käyttämällä.
PÄIVÄN VIDEON TEKEMINEN
Tämä opetusohjelma opettaa sinulle, kuinka voit turvallisesti tallentaa ja käyttää API-avaimia React-sovelluksessa.
Ympäristömuuttujien lisääminen CRA-sovellukseen
A Reagoi sovellukseen, jonka luot käyttämällä luo-reagoi-sovellus tukee ympäristömuuttujia valmiina. Se lukee muuttujia, jotka alkavat REACT_APP:lla ja tekee ne saataville process.env:n kautta. Tämä on mahdollista, koska dotenv npm -paketti on asennettu ja määritetty CRA-sovelluksessa.
Tallenna API-avaimet luomalla uusi tiedosto nimeltä .env React-sovelluksen juurihakemistoon.
Liitä sitten API-avaimen nimen eteen REACT_APP kuten tämä:
REACT_APP_API_KEY="your_api_key"
Voit nyt käyttää API-avainta missä tahansa React-sovelluksen tiedostossa käyttämällä process.env:tä.
miten vaihdan oletusarvoisen Google -tilini
const API_KEY = process.env.REACT_APP_API_KEY
Varmista, että lisäät .env:n .gitignore-tiedostoon, jotta git ei seuraa sitä.
Miksi sinun ei pitäisi tallentaa salaisia avaimia .env-tiedostoon
Kaikki mitä tallennat .env-tiedostoon, on julkisesti saatavilla tuotantoversiossa. React upottaa sen koontitiedostoihin, mikä tarkoittaa, että kuka tahansa voi löytää sen tarkistamalla sovelluksesi tiedostot. Käytä sen sijaan välityspalvelinta, joka kutsuu API:ta käyttöliittymäsovelluksesi puolesta.
Ympäristömuuttujien tallentaminen taustakoodiin
Kuten edellä mainittiin, sinun on luotava erillinen taustasovellus salaisten muuttujien tallentamiseksi.
Esimerkiksi, Alla oleva API-päätepiste hakee tiedot salaisesta URL-osoitteesta.
const apiURL = process.env.API_URL
app.get('/data', async (req, res) => {
const response = await fetch(apiURL)
const data = response.json()
res.json({data})
})
Kutsu tämä API-päätepiste hakemaan ja käyttämään käyttöliittymän tietoja.
const data = await fetch('http://backend-url/data')
Nyt, ellet työnnä .env-tiedostoa GitHubiin, sovellusliittymän URL-osoite ei näy koontitiedostoissasi.
Next.js:n käyttö ympäristömuuttujien tallentamiseen
Toinen vaihtoehto on käyttää Next.js:ää. Voit käyttää yksityisiä ympäristömuuttujia getStaticProps()-funktiossa.
mitä twitch -tilaus tekee
Tämä toiminto toimii palvelimen rakennusaikana. Joten ympäristömuuttujat, joita käytät tämän funktion sisällä, ovat käytettävissä vain Node.js-ympäristössä.
Alla on esimerkki.
export async function getStaticProps() {
const res = await fetch(process.env.API_URL)
const data = res.json()
return {props: { data }}
}
Tiedot ovat saatavilla sivulla rekvisiittauksen kautta ja niihin pääsee käsiksi seuraavasti.
function Home({ data }) {
return (
<div>
// render data
</div>
);
}
Toisin kuin Reactissa, sinun ei tarvitse liittää muuttujan nimeen mitään ja voit lisätä sen .env-tiedostoon seuraavasti:
API_URL=https://secret-url/de3ed3f
Next.js:n avulla voit myös luoda API-päätepisteitä sivut/api kansio. Näiden päätepisteiden koodi toimii palvelimella, joten voit peittää salaisuudet käyttöliittymästä.
miten kytket puhelimesi tietokoneeseen
Esimerkiksi yllä oleva esimerkki voidaan kirjoittaa uudelleen pages/api/getData.js tiedosto API-reittinä.
4B479C8FF1390AFADECE0CFFD337D1B5229075Voit nyt käyttää palautettuja tietoja /pages/api/getData.js päätepiste.
API-avainten pitäminen salassa
API:iden työntäminen GitHubiin ei ole suositeltavaa. Kuka tahansa voi löytää avaimesi ja käyttää niitä API-pyyntöjen tekemiseen. Käyttämällä jäljittämätöntä .env-tiedostoa estät tämän tapahtumisen.
Älä kuitenkaan koskaan tallenna arkaluonteisia salaisuuksia käyttöliittymäkoodisi .env-tiedostoon, koska kuka tahansa voi nähdä sen tarkastessaan koodiasi. Hae sen sijaan tiedot palvelinpuolelta tai käytä Next.js:ää piilottaaksesi yksityiset muuttujat.