Aplikasi web modern mengandalkan API eksternal untuk fungsionalitas tambahan. Beberapa API menggunakan pengidentifikasi seperti kunci dan rahasia untuk mengaitkan permintaan dengan aplikasi tertentu. Kunci ini sensitif dan Anda tidak boleh memasukkannya ke GitHub karena siapa pun dapat menggunakannya untuk mengirim permintaan ke API menggunakan akun Anda.
Tutorial ini akan mengajari Anda cara menyimpan dan mengakses kunci API dengan aman di aplikasi React.
Menambahkan Variabel Lingkungan di Aplikasi CRA
SEBUAH React aplikasi yang Anda buat menggunakanbuat-reaksi-aplikasi mendukung variabel lingkungan di luar kotak. Ia membaca variabel yang dimulai dengan REACT_APP dan membuatnya tersedia melalui process.env. Ini dimungkinkan karena paket dotenv npm telah diinstal dan dikonfigurasi dalam aplikasi CRA.
Untuk menyimpan kunci API, buat file baru bernama .env di direktori root aplikasi React.
Kemudian, awali nama kunci API dengan REACT_APP seperti ini:
REACT_APP_API_KEY="kunci_api_anda"
Anda sekarang dapat mengakses kunci API di file apa pun di aplikasi React menggunakan process.env.
konstan API_KEY = proses.env. REACT_APP_API_KEY
Pastikan Anda menambahkan .env ke file .gitignore untuk mencegah git melacaknya.
Mengapa Anda Tidak Harus Menyimpan Kunci Rahasia di .env
Apa pun yang Anda simpan dalam file .env tersedia untuk umum di build produksi. React menyematkannya dalam file build, yang berarti siapa pun dapat menemukannya dengan memeriksa file aplikasi Anda. Sebagai gantinya, gunakan proxy backend yang memanggil API atas nama aplikasi front-end Anda.
Menyimpan Variabel Lingkungan dalam Kode Backend
Seperti disebutkan di atas, Anda harus membuat aplikasi backend terpisah untuk menyimpan variabel rahasia.
Misalnya, Titik akhir API di bawah ini mengambil data dari URL rahasia.
konstan apiURL = proses.env. API_URL
aplikasi.get('/data', asinkron (permintaan, res) => {
konstan tanggapan = menunggu ambil (apiURL)
konstan data = respon.json()
res.json({data})
})
Panggil titik akhir API ini untuk mengambil dan menggunakan data di ujung depan.
konstan data = menunggu ambil('http://backend-url/data')
Sekarang, kecuali Anda mendorong file .env ke GitHub, URL API tidak akan terlihat di file build Anda.
Menggunakan Next.js untuk Menyimpan Variabel Lingkungan
Alternatif lain adalah dengan menggunakan Next.js. Anda dapat mengakses variabel lingkungan pribadi dalam fungsi getStaticProps() .
Fungsi ini berjalan selama waktu pembuatan di server. Jadi variabel lingkungan yang Anda akses di dalam fungsi ini hanya akan tersedia di lingkungan Node.js.
Di bawah ini adalah contoh.
eksportidak sinkronfungsigetStaticProps() {
konstan res = menunggu ambil (proses.env. API_URL)
konstan data = res.json()
kembali {Atribut: { data }}
}
Data akan tersedia di halaman melalui alat peraga, dan Anda dapat mengaksesnya sebagai berikut.
fungsiRumah({ data }) {
kembali (
<div>
// merender data
</div>
);
}
Tidak seperti di React, Anda tidak perlu mengawali nama variabel dengan apa pun dan Anda dapat menambahkannya ke file .env seperti ini:
API_URL=https://secret-url/de3ed3f
Next.js juga memungkinkan Anda membuat titik akhir API di halaman/api map. Kode di titik akhir ini berjalan di server, sehingga Anda dapat menutupi rahasia dari ujung depan.
Misalnya, contoh di atas dapat ditulis ulang dalam halaman/api/getData.js file sebagai rute API.
eksporbawaantidak sinkronfungsipawang(permintaan, res) {
konstan tanggapan = menunggu ambil (proses.env. API_URL)
konstan data = respon.json()
kembali res.json({data})
}Anda sekarang dapat mengakses data yang dikembalikan melalui /pages/api/getData.js titik akhir.
Menjaga Rahasia Kunci API
Mendorong API ke GitHub tidak disarankan. Siapa pun dapat menemukan kunci Anda dan menggunakannya untuk membuat permintaan API. Dengan menggunakan file .env yang tidak terlacak, Anda mencegah hal ini terjadi.
Namun, Anda tidak boleh menyimpan rahasia sensitif dalam file .env di kode frontend Anda karena siapa pun dapat melihatnya saat mereka memeriksa kode Anda. Sebagai gantinya, ambil data di sisi server atau gunakan Next.js untuk menutupi variabel pribadi.
