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
create-react-app kullanarak oluşturduğunuz bir React uygulaması , kutudan çıktığı gibi 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, REACT_APP ile API anahtar adının önüne şu şekilde ekleyin:
REACT_APP_API_KEY=”your_api_key”
API anahtarına artık process.env kullanarak React uygulamasındaki herhangi bir dosyadan erişebilirsiniz.
const API_KEY = process.env.REACT_APP_API_KEY
Git’in onu izlemesini önlemek için .gitignore dosyasına .env eklediğinizden emin olun.
Neden Gizli Anahtarları .env’de 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 gömer, bu da 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ı , gizli bir URL’den veri alır.
const apiURL = process.env.API_URL
app.get(‘/data’, async (req, res) => {
const response = await fetch(apiURL)
const data = response.json()
res.json({data})
})
Ön uçtaki verileri almak ve kullanmak için bu API uç noktasını arayın.
const data = await fetch(‘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.
export async function getStaticProps() {
const res = await fetch(process.env.API_URL)
const data = res.json()
return {props: { data }}
}
Veriler, sahne aracılığıyla sayfada mevcut olacak ve aşağıdaki gibi erişebilirsiniz.
function Home({ data }) {
return (
<div>
// render data
</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 sayfalar/api klasöründe API uç noktaları oluşturmanıza da olanak tanır . Bu uç noktalardaki kod sunucuda çalışır, böylece ön uçtaki sırları maskeleyebilirsiniz.
Örneğin, yukarıdaki örnek, bir API yolu olarak page/api/getData.js dosyasına yeniden yazılabilir.
export default async function handler(req, res) {
const response = await fetch(process.env.API_URL)
const data = response.json()
return res.json({data})
}
Artık /pages/api/getData.js uç noktası aracılığıyla döndürülen verilere erişebilirsiniz .
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.