Bir React Uygulamasında API Anahtarlarını Saklama ve Erişme

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.

GÜNÜN YAPILAN VİDEOSU

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.

ipod'dan itunes'a nasıl müzik aktarırım

Ardından, API anahtarı adının önüne şunu ekleyin: REACT_APP bunun gibi:

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 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 = 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 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.

4B479C8FF1390AFADECE0CFFD337D1B5229075

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.