Cách lưu trữ và truy cập khóa API trong ứng dụng React

Các ứng dụng web hiện đại dựa vào các API bên ngoài để có thêm chức năng. Một số API sử dụng các số nhận dạng như khóa và bí mật để liên kết các yêu cầu với một ứng dụng cụ thể. Các khóa này nhạy cảm và bạn không nên đẩy chúng lên GitHub vì bất kỳ ai cũng có thể sử dụng chúng để gửi yêu cầu tới API bằng tài khoản của bạn.

LÀM VIDEO TRONG NGÀY

Hướng dẫn này sẽ dạy bạn cách lưu trữ và truy cập các khóa API một cách an toàn trong ứng dụng React.

Thêm các biến môi trường trong ứng dụng CRA

Một Ứng dụng React mà bạn tạo bằng cách sử dụng tạo-phản ứng-ứng dụng hỗ trợ các biến môi trường ra khỏi hộp. Nó đọc các biến bắt đầu bằng REACT_APP và cung cấp chúng thông qua process.env. Điều này có thể thực hiện được vì gói dotenv npm được cài đặt và định cấu hình trong ứng dụng CRA.

Để lưu trữ các khóa API, hãy tạo một tệp mới có tên .env trong thư mục gốc của ứng dụng React.

Sau đó, đặt tiền tố tên khóa API bằng REACT_APP như thế này:

REACT_APP_API_KEY="your_api_key"

Giờ đây, bạn có thể truy cập khóa API trong bất kỳ tệp nào trong ứng dụng React bằng process.env.

const API_KEY = process.env.REACT_APP_API_KEY

Đảm bảo bạn thêm .env vào tệp .gitignore để ngăn git theo dõi nó.

Tại sao bạn không nên lưu trữ chìa khóa bí mật trong .env

Mọi thứ bạn lưu trữ trong tệp .env đều có sẵn công khai trong bản dựng sản xuất. React nhúng nó vào các tệp xây dựng, có nghĩa là bất kỳ ai cũng có thể tìm thấy nó bằng cách kiểm tra các tệp ứng dụng của bạn. Thay vào đó, hãy sử dụng proxy phụ trợ gọi API thay mặt cho ứng dụng giao diện người dùng của bạn.

Lưu trữ các biến môi trường trong mã phụ trợ

Như đã đề cập ở trên, bạn phải tạo một ứng dụng phụ trợ riêng để lưu trữ các biến bí mật.

Ví dụ, Điểm cuối API bên dưới tìm nạp dữ liệu từ một URL bí mật.

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

Gọi điểm cuối API này để tìm nạp và sử dụng dữ liệu trong giao diện người dùng.

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

Bây giờ, trừ khi bạn đẩy tệp .env lên GitHub, URL API sẽ không hiển thị trong các tệp bản dựng của bạn.

Sử dụng Next.js để lưu trữ các biến môi trường

Một giải pháp thay thế khác là sử dụng Next.js. Bạn có thể truy cập các biến môi trường riêng tư trong hàm getStaticProps ().

Chức năng này chạy trong thời gian xây dựng trên máy chủ. Vì vậy, các biến môi trường mà bạn truy cập bên trong hàm này sẽ chỉ khả dụng trong môi trường Node.js.

Dưới đây là một ví dụ.

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

Dữ liệu sẽ có sẵn trên trang thông qua đạo cụ và bạn có thể truy cập như sau.

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

Không giống như trong React, bạn không phải thêm bất cứ thứ gì vào đầu tên biến và bạn có thể thêm nó vào tệp .env như sau:

API_URL=https://secret-url/de3ed3f

Next.js cũng cho phép bạn tạo các điểm cuối API trong trang / api thư mục. Mã trong các điểm cuối này chạy trên máy chủ, vì vậy bạn có thể che giấu bí mật từ giao diện người dùng.

Ví dụ, ví dụ trên có thể được viết lại trong pages / api / getData.js tệp dưới dạng một tuyến API.

4B479C8FF1390AFADECE0CFFD337D1B5229075

Bây giờ bạn có thể truy cập dữ liệu trả về thông qua /pages/api/getData.js điểm cuối.

cách tắt một phím trên bàn phím

Giữ bí mật các khóa API

Việc đẩy các API lên GitHub là không nên. Bất kỳ ai cũng có thể tìm thấy khóa của bạn và sử dụng chúng để thực hiện các yêu cầu API. Bằng cách sử dụng tệp .env không được đánh dấu, bạn ngăn điều này xảy ra.

Tuy nhiên, bạn không bao giờ nên lưu trữ các bí mật nhạy cảm trong tệp .env trong mã giao diện người dùng của mình vì bất kỳ ai cũng có thể nhìn thấy khi họ kiểm tra mã của bạn. Thay vào đó, hãy tìm nạp dữ liệu ở phía máy chủ hoặc sử dụng Next.js để che các biến riêng tư.