对 Web 应用实施 Firebase 身份验证

Question

我正在尝试使用 Firebase 身份验证创建登录系统，但遇到了几个错误。 在遵循 Google 的教程 (https://www.youtube.com/watch?v=rQvOAnNvcNQ) 并创建了一个简单的“Index.html”和“Index.js”测试后，我收到了错误“Uncaught SyntaxError: Cannot use import statement outside a module index.js:1”。 我可以将 .js 更改为 .mjs 并将其作为模块读入，但是 .html 文件无法在 .mjs 文件中找到函数。

onAuthStateChanged() 记录“无用户”，所以我知道这是有效的。

我一直在通过 localhost 进行测试，如果这有什么不同的话。

任何帮助将不胜感激！

index.mjs

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';

const firebaseConfig = {
  ...
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log('logged in!');
  } else {
    console.log('No user');
  }
});


function login() {
  window.alert("Login successful")
}

function signUp() {
  window.alert("Signup successful");
}

index.html

<!DOCTYPE html>
<html lang = "en-US">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title> test </title>
  <script type="module" src="/index.mjs"></script>
</head>
  <body>
    <div class = "login-form">
        <input type = "email" class="login-username" id="login-username" autofocus="true" required="true" placeholder="Email" />
        <input type = "password" class="login-password" id="login-password" required="true" placeholder="Password" />
        <input type = "submit" name="Login" value="Login" class="login-submit" onclick = "login()"/>
        <input type = "submit" name="Signup" value="Signup" class="login-submit" onclick = "signUp()"/>
    </div>
  </body>
</html>

Answer 1

这是具体情况。可能更多信息会有所帮助。但与此同时，请尝试使用“require”方式而不是 import 方式。

refer to this link 因为它为您可能面临的问题提供了解决方案。