একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে API কীগুলি কীভাবে সংরক্ষণ এবং অ্যাক্সেস করবেন

আধুনিক ওয়েব অ্যাপ্লিকেশনগুলি অতিরিক্ত কার্যকারিতার জন্য বাহ্যিক API এর উপর নির্ভর করে। কিছু API একটি নির্দিষ্ট অ্যাপ্লিকেশনের সাথে অনুরোধগুলিকে সংযুক্ত করতে কী এবং গোপনীয়তার মতো শনাক্তকারী ব্যবহার করে। এই কীগুলি সংবেদনশীল এবং আপনার এগুলিকে GitHub-এ ঠেলে দেওয়া উচিত নয় কারণ যে কেউ আপনার অ্যাকাউন্ট ব্যবহার করে API-এ একটি অনুরোধ পাঠাতে এগুলি ব্যবহার করতে পারে৷

দিনের মেকইউজের ভিডিও

এই টিউটোরিয়ালটি আপনাকে শেখাবে কিভাবে নিরাপদে একটি রিঅ্যাক্ট অ্যাপ্লিকেশনে এপিআই কীগুলি সংরক্ষণ এবং অ্যাক্সেস করতে হয়।

---

---

একটি CRA অ্যাপে এনভায়রনমেন্ট ভেরিয়েবল যোগ করা

ক আপনি ব্যবহার করে তৈরি অ্যাপ্লিকেশন প্রতিক্রিয়া তৈরি-প্রতিক্রিয়া-অ্যাপ বাক্সের বাইরে পরিবেশ ভেরিয়েবল সমর্থন করে। এটি ভেরিয়েবলগুলি পড়ে যা REACT_APP দিয়ে শুরু হয় এবং সেগুলিকে process.env-এর মাধ্যমে উপলব্ধ করে৷ এটি সম্ভব কারণ dotenv npm প্যাকেজটি একটি CRA অ্যাপে ইনস্টল এবং কনফিগার করা হয়।

এপিআই কী সংরক্ষণ করতে, প্রতিক্রিয়া অ্যাপ্লিকেশনের রুট ডিরেক্টরিতে .env নামে একটি নতুন ফাইল তৈরি করুন।

তারপর, API কী নামের উপসর্গ দিয়ে REACT_APP এটার মত:

REACT_APP_API_KEY="your_api_key" 

আপনি এখন process.env ব্যবহার করে প্রতিক্রিয়া অ্যাপের যেকোনো ফাইলে API কী অ্যাক্সেস করতে পারেন।

টিকটকে কিভাবে ডার্ক মোড পাবেন

const API_KEY = process.env.REACT_APP_API_KEY 

নিশ্চিত করুন যে আপনি .gitignore ফাইলে .env যোগ করেছেন যাতে গিটকে ট্র্যাক করা থেকে বিরত রাখা যায়।

---

---

কেন আপনার .env-এ গোপন কী সংরক্ষণ করা উচিত নয়

আপনি একটি .env ফাইলে সঞ্চয় করেন এমন যেকোনো কিছু প্রোডাকশন বিল্ডে সর্বজনীনভাবে উপলব্ধ। প্রতিক্রিয়া এটি বিল্ড ফাইলগুলিতে এম্বেড করে, যার অর্থ আপনার অ্যাপের ফাইলগুলি পরিদর্শন করে যে কেউ এটি খুঁজে পেতে পারে। পরিবর্তে, একটি ব্যাকএন্ড প্রক্সি ব্যবহার করুন যা আপনার ফ্রন্ট-এন্ড অ্যাপ্লিকেশনের পক্ষে API কল করে।

ব্যাকএন্ড কোডে পরিবেশের ভেরিয়েবল সংরক্ষণ করা

উপরে উল্লিখিত হিসাবে, গোপন ভেরিয়েবল সঞ্চয় করার জন্য আপনাকে অবশ্যই একটি পৃথক ব্যাকএন্ড অ্যাপ্লিকেশন তৈরি করতে হবে।

---

---

উদাহরণস্বরূপ, দ নিচের API এন্ডপয়েন্ট ডেটা নিয়ে আসে একটি গোপন URL থেকে।

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

সামনের প্রান্তে ডেটা আনতে এবং ব্যবহার করতে এই API এন্ডপয়েন্টে কল করুন।

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

এখন, আপনি যদি .env ফাইলটিকে GitHub-এ পুশ না করেন, API URL আপনার বিল্ড ফাইলগুলিতে দৃশ্যমান হবে না।

এনভায়রনমেন্ট ভেরিয়েবল সঞ্চয় করতে Next.js ব্যবহার করা

আরেকটি বিকল্প হল Next.js ব্যবহার করা। আপনি getStaticProps() ফাংশনে ব্যক্তিগত পরিবেশের ভেরিয়েবল অ্যাক্সেস করতে পারেন।

কিভাবে সিডি থেকে স্ক্র্যাচ অপসারণ করবেন

এই ফাংশনটি সার্ভারে বিল্ড টাইমে চলে। সুতরাং এই ফাংশনের ভিতরে আপনি যে এনভায়রনমেন্ট ভেরিয়েবলগুলি অ্যাক্সেস করবেন তা শুধুমাত্র Node.js পরিবেশে পাওয়া যাবে।

নীচে একটি উদাহরণ.

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

তথ্য প্রপস মাধ্যমে পৃষ্ঠায় উপলব্ধ হবে, এবং আপনি নিম্নলিখিত হিসাবে এটি অ্যাক্সেস করতে পারেন.

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

প্রতিক্রিয়ার বিপরীতে, আপনাকে কোনও কিছুর সাথে ভেরিয়েবলের নামটি উপসর্গ করতে হবে না এবং আপনি এটিকে .env ফাইলে এইভাবে যুক্ত করতে পারেন:

পিএস 4 কে ফ্যাক্টরি সেটিংসে কীভাবে রিসেট করবেন

API_URL=https://secret-url/de3ed3f 

Next.js আপনাকে এপিআই এন্ডপয়েন্ট তৈরি করতে দেয় পৃষ্ঠা/এপিআই ফোল্ডার এই শেষ পয়েন্টগুলির কোড সার্ভারে চলে, তাই আপনি সামনের প্রান্ত থেকে গোপনীয়তাগুলিকে মাস্ক করতে পারেন৷

উদাহরণস্বরূপ, উপরের উদাহরণটি পুনরায় লেখা যেতে পারে pages/api/getData.js একটি API রুট হিসাবে ফাইল।

4B479C8FF1390AFADECE0CFFD337D1B5229075

আপনি এখন এর মাধ্যমে ফিরে আসা ডেটা অ্যাক্সেস করতে পারেন /pages/api/getData.js শেষপ্রান্ত.

API কী গোপন রাখা

GitHub এ APIগুলি পুশ করা যুক্তিযুক্ত নয়। যে কেউ আপনার কীগুলি খুঁজে পেতে এবং API অনুরোধ করতে সেগুলি ব্যবহার করতে পারে৷ একটি untracked .env ফাইল ব্যবহার করে, আপনি এটি ঘটতে বাধা দেন।

যাইহোক, আপনি কখনই আপনার ফ্রন্টএন্ড কোডে একটি .env ফাইলে সংবেদনশীল গোপনীয়তা সংরক্ষণ করবেন না কারণ আপনার কোড পরিদর্শন করার সময় যে কেউ এটি দেখতে পাবে। পরিবর্তে, সার্ভার সাইডে ডেটা আনুন বা ব্যক্তিগত ভেরিয়েবল মাস্ক করতে Next.js ব্যবহার করুন।