在Firebase托管上部署后，使用Firebase身份验证功能“ signInWithEmailAndPassword”在Web上登录失败

如何解决在Firebase托管上部署后，使用Firebase身份验证功能“ signInWithEmailAndPassword”在Web上登录失败

我一直在尝试开发Web应用程序，但仍然停留在登录名上。当我在localhost上测试程序时，登录功能可以正常运行并导航到我期望的页面。主要问题是在使用Firebase虚拟主机进行部署后发生的。当我使用firebase虚拟主机部署网络并对其进行测试时，登录名导航回到登录页面，而不会显示任何错误。请注意，我已经完成以下操作：

设置支持电子邮件
使用域xxx.firebaseapp.com
将电子邮件/密码的身份验证选项启用为“已启用”

后端-node.js 前端-纯HTML和CSS 系统登录实现如下：

let loginForm = document.getElementById("login");

loginForm.addEventListener("submit",(event) => {
    event.preventDefault();
    var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const login = event.target.username.value;
    const password = event.target.password.value;
    firebase
    .auth()
    .signInWithEmailAndPassword(login,password)
    .then(({ user }) => {
        return user.getIdToken().then((idToken) => {
          return fetch("/sessionLogin",{
            method: "POST",headers: {
              Accept: "application/json","Content-Type": "application/json","CSRF-Token": token,},body: JSON.stringify({ idToken }),});
        });
      })
      .then(() => {
        return firebase.auth().signOut();
      })
      .then(() => {
        window.location.assign("/");
      })
      .catch((error) => {
        alert(error.message);
      });
    return false;
});

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Geographic Research - Login</title>
    <meta name="csrf-token" content="{{csrfToken}}">

    <link rel="stylesheet" href="/css/login.css">
    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js" defer ></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js" defer ></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js" defer ></script>
</head>
<body>
    <main> 
        <section>
            <form id="login">
                <center> <h1> Login </h1> </center>
                <div class="col">
                    <input type="text" name="username" placeholder="Username" required>
                    <input type="password" name="password" minlength="8" placeholder="Password" required>
                    <input type="submit" value="Login">    
                    <button onclick= "window.location.href='/signup';" class="signup btn"> Sign Up </button>
                </div>
            </form>
        </section>
        
        <script defer src="/js/firebase_init.js"></script>
        <script defer src="/js/login.js"></script>
    </main>
</body>
</html>

index.js

// List of dependencies used in the code
const functions = require('firebase-functions');
const cookieParser = require('cookie-parser');
const csrf = require('csurf');
const bodyParser = require("body-parser");

// The Firebase Admin SDK to access Cloud Firestore.
const admin = require('firebase-admin');
const express = require('express');
const cors = require('cors');

// Module handling on csv file and file system
const csv = require('csv-parser');
const fs = require('fs');

// Module working on file uploads
const formidable = require("formidable");

var hbs = require('handlebars');
var engines = require('consolidate');

const path = require('path');

// Initialize firebase application
var serviceAccount = require('./service_account.json');
admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),databaseURL: "https://sadao-f4a1e.firebaseio.com"
});
const app = express();
const csrfMiddleware = csrf({cookie: true});

app.engine('hbs',engines.handlebars);
app.set('views',path.join(__dirname,"views/"));
app.set('view engine','hbs');


app.use(cors({ origin: true }));
app.use(express.static(path.join(__dirname,'/public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(csrfMiddleware);

app.all("*",(req,res,next) => {
    res.cookie("XSRF-TOKEN",req.csrfToken());
    res.locals._csrf = req.csrfToken();
    next();
})

const db = admin.database();


// API handling Authentication,Login,Logout
app.get('/login',async(req,res) => {
    res.render('login',{csrfToken: req.csrfToken()});
});

app.get('/signup',res) => {
    res.render('registration');
});

app.post("/sessionLogin",res) => {
    const idToken = req.body.idToken.toString();

    const expiresIn = 60 * 60 * 24 * 5 * 1000;

    admin.auth().createSessionCookie(idToken,{expiresIn}).then(
        (sessionCookie) => {
            const options = { maxAge: expiresIn,httpOnly: true};
            res.cookie("session",sessionCookie,options);
            res.end(JSON.stringify({status:"success"}));
        },(error) => {
            res.status(401).send("UNAUTHORISED REQUEST");
        }
    );
});

我真的需要帮助！有人可以帮我吗;（

解决方法

您可以在这里尝试两件事：

请勿使用表单提交密码，只需使用输入即可。 Firebase通过功能自行提交密码和电子邮件。
在Firebase控制台的“身份验证=>登录方法”部分下，如果您滚动至下方，请确保已启用要部署应用程序的域的authorized domains。

在Firebase托管上部署后，使用Firebase身份验证功能“ signInWithEmailAndPassword”在Web上登录失败

如何解决在Firebase托管上部署后，使用Firebase身份验证功能“ signInWithEmailAndPassword”在Web上登录失败

解决方法

相关推荐