Modern web uygulamaları, ek işlevsellik için harici API'lere güvenir. Bazı API'ler, istekleri belirli bir uygulamayla ilişkilendirmek için anahtarlar ve gizli diziler gibi tanımlayıcılar kullanır. Bu anahtarlar hassastır ve hesabınızı kullanarak API'ye istek göndermek için herhangi biri bunları kullanabileceğinden onları GitHub'a göndermemelisiniz.
Bu eğitim size bir React uygulamasında API anahtarlarını nasıl güvenli bir şekilde depolayacağınızı ve bunlara nasıl erişeceğinizi öğretecektir.
Bir CRA Uygulamasına Ortam Değişkenleri Ekleme
A Kullanarak oluşturduğunuz React uygulamasıoluştur-tepki-uygulaması kutudan çıkan ortam değişkenlerini destekler. REACT_APP ile başlayan değişkenleri okur ve onları process.env aracılığıyla kullanılabilir hale getirir. Bu mümkündür çünkü dotenv npm paketi bir CRA uygulamasında kurulu ve yapılandırılmış olarak gelir.
API anahtarlarını saklamak için React uygulamasının kök dizininde .env adlı yeni bir dosya oluşturun.
Ardından, API anahtarı adının önüne şunu ekleyin: REACT_APP bunun gibi:
REACT_APP_API_KEY="senin_api_key"
API anahtarına artık process.env kullanarak React uygulamasındaki herhangi bir dosyadan erişebilirsiniz.
const API_KEY = işlem.env. REACT_APP_API_KEY
Git'in onu izlemesini önlemek için .gitignore dosyasına .env eklediğinizden emin olun.
Gizli Anahtarları Neden .env Dosyasında Saklamamalısınız?
Bir .env dosyasında sakladığınız her şey üretim yapısında herkese açıktır. React, onu derleme dosyalarına yerleştirir; bu, herkesin uygulamanızın dosyalarını inceleyerek onu bulabileceği anlamına gelir. Bunun yerine, ön uç uygulamanız adına API'yi çağıran bir arka uç proxy'si kullanın.
Ortam Değişkenlerini Arka Uç Kodunda Depolama
Yukarıda belirtildiği gibi, gizli değişkenleri depolamak için ayrı bir arka uç uygulaması oluşturmalısınız.
Örneğin, Aşağıdaki API uç noktası verileri getirir gizli bir URL'den.
const apiURL = işlem.env. API_URL
app.get('/data', zaman uyumsuz (gerekli, öz) => {
const yanıt = beklemek getir (apiURL)
const veri = yanıt.json()
res.json({veri})
})
Ön uçtaki verileri almak ve kullanmak için bu API uç noktasını arayın.
const veri = beklemek getir('http://backend-url/data')
Şimdi, .env dosyasını GitHub'a göndermediğiniz sürece API URL'si derleme dosyalarınızda görünmeyecektir.
Ortam Değişkenlerini Depolamak için Next.js'yi Kullanma
Diğer bir alternatif ise Next.js kullanmaktır. getStaticProps() işlevinde özel ortam değişkenlerine erişebilirsiniz.
Bu işlev, sunucuda derleme süresi boyunca çalışır. Dolayısıyla bu fonksiyon içerisinde eriştiğiniz ortam değişkenleri yalnızca Node.js ortamında kullanılabilir olacaktır.
Aşağıda bir örnek bulunmaktadır.
ihracatzaman uyumsuzişlevgetStaticProps() {
const res = beklemek getirme (process.env. API_URL)
const veri = res.json()
dönüş {sahne: { veri }}
}
Veriler, sahne aracılığıyla sayfada mevcut olacak ve aşağıdaki gibi erişebilirsiniz.
işlevEv({ veri }) {
dönüş (
<div>
// verileri oluştur
</div>
);
}
React'ten farklı olarak, değişken adının önüne herhangi bir şey eklemeniz gerekmez ve bunu .env dosyasına şu şekilde ekleyebilirsiniz:
API_URL=https://secret-url/de3ed3f
Next.js ayrıca API uç noktaları oluşturmanıza da olanak tanır. sayfalar/api dosya. Bu uç noktalardaki kod sunucuda çalışır, böylece ön uçtaki sırları maskeleyebilirsiniz.
Örneğin, yukarıdaki örnek şu şekilde yeniden yazılabilir: sayfalar/api/getData.js API yolu olarak dosya.
ihracatvarsayılanzaman uyumsuzişlevişleyici(talep, res) {
const yanıt = beklemek getirme (process.env. API_URL)
const veri = yanıt.json()
dönüş res.json({veri})
}Artık döndürülen verilere şuradan erişebilirsiniz: /pages/api/getData.js uç nokta.
API Anahtarlarını Gizli Tutma
API'leri GitHub'a göndermek önerilmez. Herkes anahtarlarınızı bulabilir ve API istekleri yapmak için bunları kullanabilir. İzlenmeyen bir .env dosyası kullanarak bunun olmasını engellersiniz.
Ancak, hassas sırları hiçbir zaman ön uç kodunuzda bir .env dosyasında saklamamalısınız, çünkü kodunuzu inceleyen herkes bunu görebilir. Bunun yerine, verileri sunucu tarafında alın veya özel değişkenleri maskelemek için Next.js'yi kullanın.
