Nowoczesne aplikacje internetowe polegają na zewnętrznych interfejsach API w celu zwiększenia funkcjonalności. Niektóre interfejsy API używają identyfikatorów, takich jak klucze i klucze tajne, do kojarzenia żądań z określoną aplikacją. Te klucze są poufne i nie należy ich przesyłać do GitHub, ponieważ każdy może ich użyć do wysłania żądania do interfejsu API przy użyciu Twojego konta.
Ten samouczek nauczy Cię, jak bezpiecznie przechowywać i uzyskiwać dostęp do kluczy API w aplikacji React.
Dodawanie zmiennych środowiskowych w aplikacji CRA
A React aplikacja, którą tworzysz za pomocąaplikacja-stwórz-reaguj obsługuje zmienne środowiskowe po wyjęciu z pudełka. Odczytuje zmienne zaczynające się od REACT_APP i udostępnia je poprzez process.env. Jest to możliwe, ponieważ pakiet dotenv npm jest instalowany i konfigurowany w aplikacji CRA.
Aby przechowywać klucze API, utwórz nowy plik o nazwie .env w katalogu głównym aplikacji React.
Następnie poprzedź nazwę klucza API przedrostkiem REACT_APP lubię to:
REACT_APP_API_KEY="twój_klucz_api"
Możesz teraz uzyskać dostęp do klucza API w dowolnym pliku w aplikacji React za pomocą procesu process.env.
stały KLUCZ_API = proces.śr. REACT_APP_API_KEY
Upewnij się, że dodałeś .env do pliku .gitignore, aby zapobiec śledzeniu go przez git.
Dlaczego nie należy przechowywać tajnych kluczy w .env
Wszystko, co przechowujesz w pliku env, jest publicznie dostępne w kompilacji produkcyjnej. React umieszcza go w plikach kompilacji, co oznacza, że każdy może go znaleźć, sprawdzając pliki Twojej aplikacji. Zamiast tego użyj serwera proxy zaplecza, który wywołuje interfejs API w imieniu aplikacji frontonu.
Przechowywanie zmiennych środowiskowych w kodzie zaplecza
Jak wspomniano powyżej, musisz utworzyć oddzielną aplikację zaplecza do przechowywania tajnych zmiennych.
Na przykład Punkt końcowy API poniżej pobiera dane z tajnego adresu URL.
stały apiURL = proces.śr. API_URL
aplikacja.pobierz('/data', asynchroniczny (wymagany, odp.) => {
stały odpowiedź = czekać na pobierz (apiURL)
stały dane = odpowiedź.json()
res.json({dane})
})
Wywołaj ten punkt końcowy interfejsu API, aby pobrać i użyć danych w interfejsie.
stały dane = czekać na pobierz('http://backend-url/data')
Teraz, chyba że wypchniesz plik env do usługi GitHub, adres URL interfejsu API nie będzie widoczny w plikach kompilacji.
Używanie Next.js do przechowywania zmiennych środowiskowych
Inną alternatywą jest użycie Next.js. Dostęp do prywatnych zmiennych środowiskowych można uzyskać za pomocą funkcji getStaticProps().
Ta funkcja działa w czasie kompilacji na serwerze. Tak więc zmienne środowiskowe, do których uzyskujesz dostęp w ramach tej funkcji, będą dostępne tylko w środowisku Node.js.
Poniżej znajduje się przykład.
eksportasynchronicznyfunkcjonowaćgetStaticProps() {
stały res = czekać na pobierz (proces.env. API_URL)
stały dane = res.json()
zwrócić {rekwizyty: { dane }}
}
Dane będą dostępne na stronie za pośrednictwem rekwizytów i możesz uzyskać do nich dostęp w następujący sposób.
funkcjonowaćDom({ dane }) {
zwrócić (
<div>
// renderowanie danych
</div>
);
}
W przeciwieństwie do Reacta, nie musisz nic poprzedzać nazwy zmiennej i możesz ją dodać do pliku .env w ten sposób:
API_URL=https://secret-url/de3ed3f
Next.js umożliwia również tworzenie punktów końcowych API w strony/api teczka. Kod w tych punktach końcowych działa na serwerze, dzięki czemu można maskować wpisy tajne z interfejsu użytkownika.
Na przykład powyższy przykład można przepisać w pages/api/getData.js plik jako trasa API.
eksportdomyślnaasynchronicznyfunkcjonowaćtreser(wym., odp) {
stały odpowiedź = czekać na pobierz (proces.env. API_URL)
stały dane = odpowiedź.json()
zwrócić res.json({dane})
}Możesz teraz uzyskać dostęp do zwróconych danych poprzez /pages/api/getData.js punkt końcowy.
Utrzymywanie kluczy API w tajemnicy
Wypychanie interfejsów API do GitHub nie jest zalecane. Każdy może znaleźć Twoje klucze i użyć ich do tworzenia żądań API. Używając nieśledzonego pliku .env, zapobiegasz temu.
Jednak nigdy nie należy przechowywać poufnych danych tajnych w pliku .env w kodzie frontendowym, ponieważ każdy może je zobaczyć podczas sprawdzania kodu. Zamiast tego pobierz dane po stronie serwera lub użyj Next.js do zamaskowania prywatnych zmiennych.