Я очень смущен тем, как включить Firebase в html - PullRequest
Новая
       14

Я очень смущен тем, как включить Firebase в html

0 голосов
/ 30 марта 2020

Я недавно начал интегрировать firebase в свой проект html, я установил firebase-tools с помощью npm и инициализировал проект, но затем, после того как я включил все скрипты, упомянутые на сайте firebase, я использовал firebase.auth () чтобы войти в систему, я получил сообщение об ошибке, что firebase не определена, поэтому я вставил в свой код следующие теги сценариев: 

  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/firebase/init.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-firestore.js"></script>

и ниже них у меня была конфигурация firebase: 

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "MY_API_KEY",
      authDomain: "MY_PROJECT.firebaseapp.com",
      databaseURL: "https://MY_PROJECT.firebaseio.com",
      projectId: "MY_PROJECT",
      storageBucket: "MY_PROJECT.appspot.com",
      messagingSenderId: "MESSAGER_ID",
      appId: "MY_APP_ID",
      measurementId: "MEASUREMENT_ID"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>
  <script>
    async function signIn(email, password){
      await firebase.auth().signInWithEmailAndPassword({
        email,
        password
      }).then(() => {window.location.href = "HomeScreen.html"}).catch((err) => {
        document.getElementById('FailedSignIn').style.display = "flex";
      })
    }
  </script>

А потом я получил эти ошибки: 

[2020-03-30T17:24:20.332Z] @firebase/app: Warning: Firebase is already defined in the global scope. Please make sure Firebase library is only loaded once.
Website.htmlAccess to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
https:/…base-analytics.js:1POST https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations net::ERR_FAILED
TypeError: Failed to fetch

Так что я был бы очень признателен за разъяснение порядка следования этих тегов скрипта, а также как правильно инициализировать Firebase и использовать его в моем файле без каких-либо ошибки.

Ответы [ 2 ]

1 голос
/ 31 марта 2020

После того, как вы создали свою учетную запись и проект Firebase, все, что вам нужно сделать, это добавить код JavaScript к вашему HTML, как описано в Документациях по настройке 

    <script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

  // Get a reference to the database service
  var database = firebase.database();

  // update the variable when the starCount is changed in the database
  var starCountRef = database.ref('posts/' + postId + '/starCount');
  starCountRef.on('value', function(snapshot) {
    updateStarCount(postElement, snapshot.val());
  });

  // update the UI
  function updateStarCount(el, val) {
    el.innerHtml(`${val} Stars!`);
  }
</script>

Затем вы можете продолжить изучение базы данных в реальном времени здесь

Представлен Javascript / Node.JS SDK здесь .

0 голосов
/ 21 апреля 2020

Как запустить локальный веб-сервер на http://localhost:63342?
Возможно, вам просто нужно запустить веб-сервер с использованием заголовков запросов CORS для внешних запросов.

Пример: 

yarn serve --cors
...