এখানে প্রুফ্রোফ্রো এবং ফ্র্যাঙ্ক ভ্যান পাফেলেনের উত্তরের ভিত্তিতে আমি এই সেটআপটি একসাথে রেখেছি যা স্ক্র্যাপিং রোধ করে না, তবে আপনার এপিআই কীটি ব্যবহার করা কিছুটা শক্ত করে তুলতে পারে।
সতর্কতা: আপনার ডেটা পেতে, এমনকি এই পদ্ধতির সাহায্যে, কেউ উদাহরণস্বরূপ ক্রোমে জেএস কনসোলটি খুলতে পারেন এবং টাইপ করতে পারেন:
firebase.database().ref("/get/all/the/data").once("value", function (data) {
console.log(data.val());
});
কেবল ডাটাবেস সুরক্ষা বিধিগুলিই আপনার ডেটা সুরক্ষিত করতে পারে।
তবুও, আমি আমার প্রোডাকশন এপিআই কী ব্যবহারটি আমার ডোমেন নামের মতো এইভাবে সীমাবদ্ধ করেছি:
- https://console.developers.google.com/apis
- আপনার ফায়ারবেস প্রকল্পটি নির্বাচন করুন
- পরিচয়পত্র
- এপিআই কীগুলির অধীনে আপনার ব্রাউজার কীটি চয়ন করুন। এটির মতো দেখতে হবে: " ব্রাউজার কী (গুগল পরিষেবা দ্বারা নির্মিত অটো) "
- " এই এইচটিটিপি রেফারারদের (ওয়েব সাইটগুলি) থেকে অনুরোধ গ্রহণ করুন " এ, আপনার অ্যাপ্লিকেশনটির ইউআরএল যুক্ত করুন (উদাহরণ
projectname.firebaseapp.com/*
:)
এখন অ্যাপ্লিকেশনটি কেবলমাত্র এই নির্দিষ্ট ডোমেন নামেই কাজ করবে। সুতরাং আমি অন্য একটি এপিআই কী তৈরি করেছি যা লোকালহোস্ট বিকাশের জন্য ব্যক্তিগত হবে।
- শংসাপত্রগুলি তৈরি করুন> এপিআই কীতে ক্লিক করুন
ডিফল্টরূপে, ইমানুয়েল ক্যাম্পোস দ্বারা উল্লিখিত হিসাবে, ফায়ারবেস কেবল শ্বেত তালিকা localhost
এবং আপনার ফায়ারবেস হোস্টিং ডোমেন ।
আমি ভুল করে ভুল এপিআই কীটি প্রকাশ করব না তা নিশ্চিত করার জন্য, উত্পাদনে আরও সীমাবদ্ধ একটি স্বয়ংক্রিয়ভাবে ব্যবহার করতে আমি নীচের একটি পদ্ধতি ব্যবহার করি।
তৈরি-প্রতিক্রিয়া-অ্যাপের জন্য সেটআপ
ইন /env.development
:
REACT_APP_API_KEY=###dev-key###
ইন /env.production
:
REACT_APP_API_KEY=###public-key###
ভিতরে /src/index.js
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
// ...
};
ওয়েবপ্যাকের জন্য আমার পূর্ববর্তী সেটআপ:
আমি আমার প্রোডাকশন অ্যাপটি তৈরি করতে ওয়েবপ্যাক ব্যবহার করি এবং index.html
আপনি যেমন করেন ঠিক তেমনই আমি আমার ডিভ এপিআই কীটি আমার ভিতরে রাখি । তারপরে, আমার webpack.production.config.js
ফাইলের ভিতরে , আমি প্রতিবার index.html
প্রযোজনা তৈরিতে অনুলিপিটিটি প্রতিস্থাপন করেছি :
plugins: [
new CopyWebpackPlugin([
{
transform: function(content, path) {
return content.toString().replace("###dev-key###", "###public-key###");
},
from: './index.html'
}
])
]