时间戳

首页 > 解决方案 > 尝试使用 Firebase 身份验证时出现错误

javascript - 尝试使用 Firebase 身份验证时出现错误

问题描述

我正在构建我第一次包含 firebase (firebase auth) 的网站。在浏览器中运行 HTML 代码时出现错误。

未捕获的类型错误：firebase.auth 不是 HTMLButtonElement 中的函数。(app.js:24)

我也没有找到任何文章这个问题。我已经重新安装了节点和 firebase 工具。有没有人回答我，我真的不知道该怎么做......这是我的 Index.html 文件和我的 App.js 文件 Index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log In Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>
</head>
<body>
    <div class="Main-Div">
        <h3 class="Headline">
            Do you have an Account?
        </h3>
        <input type="text" placeholder="Your Email..." class="AccountInput" type="email" id="txtemail">
    </br>
        <input type="text" placeholder="Your Passcode..." class="AccountInput" type="Password" id="txtpassword">
    </br>
        <button class="LogInButton" id="1Button">Log In</button>
        <button class="SignUpButton" id="2Button">Sign Up now!</button>
        <button class="LogOutButton" id="3Button">Log Out</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

这里是我的另一个文件 App.js：（我已经审查了有关我的 firebase-database 的数据）

(function(){
const firebaseConfig = {
    apiKey: "Censored",
    authDomain: "Censored",
    projectId: "Censored",
    storageBucket: "Censored",
    messagingSenderId: "Censored",
    appId: "Censored"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

// Get Elements
  const txtEmail = document.getElementById('txtemail');
  const txtPassword = document.getElementById('txtpassword');
  const btnLogIn = document.getElementById('1Button');
  const btnSignUp = document.getElementById('2Button');
  const btnLogOut = document.getElementById('3Button');

  btnLogIn.addEventListener('click', e => {
    const email = txtEmail.value;
    const password = txtPassword.value;
    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, pass);
    promise.catch(e => console.log(e.message));
  });

}());

感谢您的关注 Greetings Max

标签： javascripthtmlfirebasefirebase-authentication

解决方案

在index.html您仅导入核心 firebase 库firebase-app.js以便在 Web 应用程序中使用 firebase 服务（firestore/storage 等）时，您需要从 CDN 导入相应的服务。

在您的情况下，您需要添加firebase-auth.js您的<head></head>

链接在这里

<script src="https://www.gstatic.com/firebasejs/8.2.8/firebase-auth.js"></script>

在此页面中，您可以找到所有服务 CDN

您还需要转到项目的 firebase 仪表板并启用密码身份验证，如本文档中所述

推荐阅读