首页 > 解决方案 > 无法在简单的 HTML、JS 页面上使用 firebase 身份验证进行身份验证

问题描述

Firebase 在身份验证时似乎不起作用。这是我的html代码

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

<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>

<body>

    <div class="login form">
        <input type="text" class="loginEmail" placeholder="Email..." id="email_field">
        <br><br><br>
        <input type="password" class="loginPass" placeholder="Password..." id="password_field">
        <br><br>
        <button class="logBut" onclick="login()">Log in</button>
    </div>

</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->
<!-- Private -->

</script>
<script src="index.js"></script>

</html>

我的 index.js 代码

    function login() {

    var userEmail = document.getElementById("email_field").value;
    var userPass = document.getElementById("password_field").value;

    firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;

        window.alert("Error : " + errorMessage);

        // ...
    });

}

我不想使用像 React 或 Angular 这样的前端框架。这应该相当简单,因为这段代码前一阵子工作了,但现在不工作了

标签: javascriptfirebasefirebase-authentication

解决方案


添加以下脚本

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

初始化您的 Firebase 配置

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

在运行示例之前替换您的应用凭据。


推荐阅读