यहां प्रूफ्रोफ्रो और फ्रैंक वैन पफलेन के उत्तर पर निर्माण , मैंने इस सेटअप को एक साथ रखा है जो स्क्रैपिंग को रोकता नहीं है, लेकिन आपकी एपीआई कुंजी का उपयोग करने के लिए इसे थोड़ा कठिन बना सकता है।
चेतावनी: अपना डेटा प्राप्त करने के लिए, इस विधि के साथ भी, उदाहरण के लिए, Chrome में जेएस कंसोल को आसानी से खोल सकते हैं और टाइप करें:
firebase.database().ref("/get/all/the/data").once("value", function (data) {
console.log(data.val());
});
केवल डेटाबेस सुरक्षा नियम आपके डेटा की सुरक्षा कर सकते हैं।
फिर भी, मैंने अपने उत्पादन एपीआई कुंजी का उपयोग इस तरह अपने डोमेन नाम तक सीमित रखा:
- https://console.developers.google.com/apis
- अपना फायरबेस प्रोजेक्ट चुनें
- साख
- एपीआई कुंजी के तहत, अपनी ब्राउज़र कुंजी चुनें। यह इस तरह दिखना चाहिए: " ब्राउज़र कुंजी (Google सेवा द्वारा बनाया गया ऑटो) "
- में " इन HTTP सन्दर्भदाता से अनुरोध (वेब साइटों) स्वीकार करें ", अपने ऐप्लिकेशन का URL जोड़ने (उदाहरण के लिए:
projectname.firebaseapp.com/*
)
अब ऐप केवल इस विशिष्ट डोमेन नाम पर काम करेगा। इसलिए मैंने एक और API कुंजी बनाई जो स्थानीयहोस्ट डेवलपमेंट के लिए निजी होगी।
- क्रेडेंशियल बनाएँ> एपीआई कुंजी पर क्लिक करें
डिफ़ॉल्ट रूप से, जैसा कि इमैनुएल कैंपोस ने उल्लेख किया है, फायरबेस केवल श्वेतसूची localhost
और आपके फायरबेस होस्टिंग डोमेन है ।
यह सुनिश्चित करने के लिए कि मैं गलती से गलत एपीआई कुंजी प्रकाशित नहीं करता हूं, मैं उत्पादन में अधिक प्रतिबंधित एक का उपयोग करने के लिए निम्न विधियों में से एक का उपयोग करता हूं।
Create-React-App के लिए सेटअप
इन /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'
}
])
]