Основываясь на ответах prufrofro и Франк ван Puffelen здесь , я соединял эту установку , которая не мешает выскабливание, но может сделать это немного сложнее использовать ключ API.
Предупреждение. Чтобы получить данные, даже с помощью этого метода, можно, например, просто открыть консоль JS в Chrome и ввести:
firebase.database().ref("/get/all/the/data").once("value", function (data) {
console.log(data.val());
});
Только правила безопасности базы данных могут защитить ваши данные.
Тем не менее, я ограничил использование моего производственного API-ключа для моего доменного имени следующим образом:
- https://console.developers.google.com/apis
- Выберите свой проект Firebase
- полномочия
- В разделе «Ключи API» выберите ключ браузера. Это должно выглядеть так: « Ключ браузера (автоматически создается сервисом Google) »
- В « Принимать запросы от этого HTTP рекомендателей (веб - сайты) », добавьте URL вашего приложения (Exemple:
projectname.firebaseapp.com/*
)
Теперь приложение будет работать только на этом конкретном доменном имени. Поэтому я создал еще один API-ключ, который будет закрыт для разработки на локальном хосте.
- Нажмите Создать учетные данные> Ключ API
По умолчанию, как отметил Эммануэль Кампос, Firebase только белые списки localhost
и ваш хостинг домен Firebase .
Чтобы убедиться, что я не опубликую неправильный ключ API по ошибке, я использую один из следующих методов, чтобы автоматически использовать более ограниченный в работе.
Настройка для 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,
// ...
};
Моя предыдущая настройка для Webpack:
Я использую Webpack для создания своего производственного приложения и помещаю свой ключ dev API в свой, 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'
}
])
]