Cara Menyimpan dan Mengakses Kunci API dalam Aplikasi React

Cara Menyimpan dan Mengakses Kunci API dalam Aplikasi React

Aplikasi web moden bergantung pada API luaran untuk kefungsian tambahan. Sesetengah API menggunakan pengecam seperti kunci dan rahsia untuk mengaitkan permintaan dengan aplikasi tertentu. Kekunci ini sensitif dan anda tidak seharusnya menolaknya ke GitHub kerana sesiapa sahaja mungkin menggunakannya untuk menghantar permintaan kepada API menggunakan akaun anda.





MAKEUSEOF VIDEO OF THE DAY

Tutorial ini akan mengajar anda cara menyimpan dan mengakses kunci API dengan selamat dalam aplikasi React.



Menambah Pembolehubah Persekitaran dalam Apl CRA

A Aplikasi bertindak balas yang anda buat menggunakan buat-react-app menyokong pembolehubah persekitaran di luar kotak. Ia membaca pembolehubah yang bermula dengan REACT_APP dan menjadikannya tersedia melalui process.env. Ini mungkin kerana pakej dotenv npm dipasang dan dikonfigurasikan dalam apl CRA.





Untuk menyimpan kunci API, buat fail baharu yang dipanggil .env dalam direktori akar aplikasi React.

Kemudian, awalan nama kunci API dengan REACT_APP seperti ini:



REACT_APP_API_KEY="your_api_key"

Anda kini boleh mengakses kunci API dalam mana-mana fail dalam apl React menggunakan process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Pastikan anda menambah .env pada fail .gitignore untuk menghalang git daripada menjejakinya.



Mengapa Anda Tidak Harus Menyimpan Kunci Rahsia dalam .env

Apa-apa sahaja yang anda simpan dalam fail .env tersedia secara terbuka dalam binaan pengeluaran. React membenamkannya dalam fail binaan, yang bermaksud sesiapa sahaja boleh menemuinya dengan memeriksa fail apl anda. Sebaliknya, gunakan proksi bahagian belakang yang memanggil API bagi pihak aplikasi bahagian hadapan anda.

Menyimpan Pembolehubah Persekitaran dalam Kod Bahagian Belakang

Seperti yang dinyatakan di atas, anda mesti membuat aplikasi bahagian belakang yang berasingan untuk menyimpan pembolehubah rahsia.



Sebagai contoh, yang Titik akhir API di bawah mengambil data daripada URL rahsia.

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

Panggil titik akhir API ini untuk mengambil dan menggunakan data di bahagian hadapan.

const data = await fetch('http://backend-url/data')

Sekarang, melainkan anda menolak fail .env ke GitHub, URL API tidak akan kelihatan dalam fail binaan anda.

Menggunakan Next.js untuk Menyimpan Pembolehubah Persekitaran

Alternatif lain ialah menggunakan Next.js. Anda boleh mengakses pembolehubah persekitaran peribadi dalam fungsi getStaticProps().

Fungsi ini berjalan semasa masa binaan pada pelayan. Jadi pembolehubah persekitaran yang anda akses dalam fungsi ini hanya akan tersedia dalam persekitaran Node.js.

Di bawah adalah contoh.

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

Data akan tersedia pada halaman melalui prop, dan anda boleh mengaksesnya seperti berikut.

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </div> 
  ); 
}

Tidak seperti dalam React, anda tidak perlu memberi awalan nama pembolehubah dengan apa-apa dan anda boleh menambahkannya pada fail .env seperti ini:

API_URL=https://secret-url/de3ed3f

Next.js juga membolehkan anda membuat titik akhir API dalam muka surat/api folder. Kod dalam titik akhir ini dijalankan pada pelayan, jadi anda boleh menutup rahsia dari bahagian hadapan.

Sebagai contoh, contoh di atas boleh ditulis semula dalam pages/api/getData.js fail sebagai laluan API.

i3 vs i5 vs i7 vs i9
4B479C8FF1390AFADECE0CFFD337D1B5229075

Anda kini boleh mengakses data yang dikembalikan melalui /pages/api/getData.js titik akhir.

Rahsiakan Kunci API

Menolak API ke GitHub adalah tidak digalakkan. Sesiapa sahaja boleh mencari kunci anda dan menggunakannya untuk membuat permintaan API. Dengan menggunakan fail .env yang tidak dikesan, anda menghalang perkara ini daripada berlaku.

Walau bagaimanapun, anda tidak boleh menyimpan rahsia sensitif dalam fail .env dalam kod bahagian hadapan anda kerana sesiapa sahaja boleh melihatnya apabila mereka memeriksa kod anda. Sebaliknya, ambil data pada bahagian pelayan atau gunakan Next.js untuk menutup pembolehubah peribadi.