Jak przechowywać i uzyskiwać dostęp do kluczy API w aplikacji React

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.

MAKEUSEOF WIDEO DNIA

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="your_api_key"

Możesz teraz uzyskać dostęp do klucza API w dowolnym pliku w aplikacji React za pomocą procesu process.env.

const API_KEY = process.env.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.

jak poświęcić więcej pamięci wideo?

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.

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => { 
	const response = await fetch(apiURL) 
	const data = response.json() 
	res.json({data}) 
})

Wywołaj ten punkt końcowy interfejsu API, aby pobrać i użyć danych w interfejsie.

const data = await fetch('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.

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

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.

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </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.

sortuj amazon według liczby recenzji

Na przykład powyższy przykład można przepisać w pages/api/getData.js plik jako trasa API.

4B479C8FF1390AFADECE0CFFD337D1B5229075

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.