Google的Firebase身份验证教程项目中存在引用错误

我一直在通过Google Firebase Authentication tutorial工作。项目中的一切工作到这一点，我基本上做了直接复制和粘贴从他们的github的文件。两个文件有关我的问题是：

static.js
index.html
对于static.js文件，我所做的唯一更改是为了简化这个问题而删除了一些注解，如下所示（我不认为这个文件有问题）：

//static.js
'use strict';

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

在我的index.html中，我插入了从firebase控制台复制的代码，并选择了“CDN”选项。请注意，我在从谷歌复制的代码中留下了注解，以防它们有用。

<!doctype html>
<html>
<head>
  <title>Datastore and Firebase Auth Example</title>

  <!-- See https://github.com/firebase/firebaseui-web. -->
  <!-- [START gae_python38_auth_init_firebase] -->
  <!-- [START gae_python3_auth_init_firebase] -->

  <!-- THIS IS WHAT I COPIED AND PASTED IN -->
  <script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-analytics.js";
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries
  
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: "A****************Q",
      authDomain: "c*******.firebaseapp.com",
      projectId: "c*******",
      storageBucket: "c*******.appspot.com",
      messagingSenderId: "1**********0",
      appId: "1:1**********10:web:0**********53",
      measurementId: "G-1********S"
    };
  
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);
  </script>
  <!-- END OF WHAT I COPIED AND PASTED IN -->
  <!-- [END gae_python3_auth_init_firebase] -->
  <!-- [END gae_python38_auth_init_firebase] -->
  <script>
    if (typeof firebase === 'undefined') {
      const msg = "Please paste the Firebase initialization snippet into index.html. See https://console.firebase.google.com > Overview > Add Firebase to your web app.";
      console.log(msg);
      alert(msg);
    }
  </script>
  <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-auth.js"></script>
  <!-- [START gae_python38_auth_include_firebaseui] -->
  <!-- [START gae_python3_auth_include_firebaseui] -->
  <script src="https://www.gstatic.com/firebasejs/ui/4.4.0/firebase-ui-auth.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.4.0/firebase-ui-auth.css" />
  <!-- [END gae_python3_auth_include_firebaseui] -->
  <!-- [END gae_python38_auth_include_firebaseui] -->
  <script src="{{ url_for('static', filename='script.js') }}"></script>
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

</head>
<body>

<h1>Datastore and Firebase Auth Example</h1>

<div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
    {% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

</body>
</html>

当我在本地主机上或部署时运行此命令时，我触发了console.log消息，告诉我需要添加Firebase。在控制台中，我还收到以下错误：

exports_auth.js:801 TypeError: Cannot read properties of undefined (reading 'INTERNAL')
    at li (utils.js:681)
    at new Ri (utils.js:1225)
    at rpchandler.js:371
    at exports_auth.js:801
    at exports_auth.js:801
    at firebase-auth.js:1
    at firebase-auth.js:1
exports_auth.js:801 Uncaught Error: Cannot instantiate firebase-auth.js - be sure to load firebase-app.js first.
    at exports_auth.js:801
    at firebase-auth.js:1
    at firebase-auth.js:11
script.js:12 Uncaught ReferenceError: firebase is not defined
    at script.js:12

我的假设是，我要么复制/粘贴到错误的位置，或者我需要有一堆的CDN源代码的进口，但我已经尝试了每一个组合，我能想到的。任何帮助感谢。
注：如果有任何区别，后端是 flask ，完全复制和粘贴教程，如main.py.所示

你没有做错任何事情-文档已经过时了（我认为是Firebase 9变化的结果）。我怀疑14个月后这是否有帮助，但把修复程序留给任何通过谷歌偶然发现这个问题的人。
main.py和script.js和this commit一样都很好，但是index.html需要更新。

// Initialize Firebase
  const app = initializeApp(firebaseConfig);

但是你需要把它修改成这样（或者在教程中更新一堆refs）：

firebase.initializeApp(firebaseConfig);

您还需要添加以下脚本：

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

并将typeof firebase === 'undefined'块进一步向下移动（或者仅仅删除它）。
总之，这个版本的index.html可以和所有其他教程文件一起使用--我还重新组织了导入文件，删除了一堆样板注解。你只需要从你的项目中提交firebaseConfig，如http://console.firebase.google.com所示。

<!doctype html>
<html>
<head>
  <title>Datastore and Firebase Auth Example</title>
  <script src="{{ url_for('static', filename='script.js') }}"></script>
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
    <script>
    const firebaseConfig = {
    apiKey: "--redacted--",
    authDomain: "--redacted--",
    projectId: "--redacted--",
    storageBucket: "--redacted--",
    messagingSenderId: "--redacted--",
    appId: "--redacted--"
    };
    firebase.initializeApp(firebaseConfig);
    </script>
</head>
<body>

<h1>Datastore and Firebase Auth Example</h1>

<div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
    {% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>
</body>
</html>

Google的Firebase身份验证教程项目中存在引用错误

1条答案

相关问题

热门标签

最新问答