如何解决Webflow集成Firebase Authentication登录功能失效问题

我正在尝试将Firebase Authentication服务集成到我的Webflow网站，目前注册功能已正常实现，用户信息能从Webflow同步到Firebase，但现有账户登录功能无法正常工作。

相关HTML元素ID说明 #

• 邮箱输入框：注册页面为signup-email，登录页面为signin-email
• 密码输入框：注册页面为signup-password，登录页面为signin-password
• 通过链接块提交用户信息

网站主页脚中嵌入的代码 #

<script type="module">
    // Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-auth.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: "fasdfasdfasdfasdfasdfasdfasdf",
  authDomain: "asdfasdf.firebaseapp.com",
  projectId: "dasdfasdf-2c295",
  storageBucket: "asdfasdfasdf-fasdfasdf.appspot.com",
  messagingSenderId: "asdfasdfasdf",
  appId: "1:1fasdfasdf3:web:e8bdefasdfasdf",
  measurementId: "G-P07ZEPQKMS"
};
  
    // Initialize Firebase and declare "global" variables. all variables declared in this section are accessible to functions that follow.
    const app = initializeApp(firebaseConfig);
    const authentication = getAuth(app);
    
   //identify auth action forms
    let signUpForm = document.getElementById('wf-form-signup-form')
    let signInForm = document.getElementById('wf-form-signin-form')

    let signUpButton = document.getElementById('signup-button');
    let signInButton = document.getElementById('signin-button');
    let signOutButton = document.getElementById('signout-button');

    if (signInButton) {
      console.log("found buttone")
    } else {
      console.log("didn't find button")
    }
   
    //assign event listeners, if the elements exist
    if(typeof(signUpButton) !== null) {
      signUpButton.addEventListener('click', handleSignUp, true)
      } else {console.log("button not found")};
      
     if(typeof(signInButton) !== null) {
      console.log("in sigsnInButton !== null")
      signInButton.addEventListener('click', handleSignIn, true)
      console.log("triggered EventListener")
      } else {console.log("button not found")};
      
      if(typeof signOutButton !== null) {
        signOutButton.addEventListener('click', handleSignOut);
           } else {console.log("button not found")}
    
    //handle signUp
    function handleSignUp(e) {
        e.preventDefault();
        e.stopPropagation();
        
      const email = document.getElementById('signup-email').value;
      const password = document.getElementById('signup-password').value;
      
      console.log("email is " + email);
      console.log("password is " + password + ". Now sending to firebase.");
      
      createUserWithEmailAndPassword(authentication, email, password)
    .then((userCredential) => {
         // Signed in 
        const user = userCredential.user;
        console.log('user successfully created: ' + user.email)
        //////////////////////////////////////// 
        document.getElementById("wf-form-signup").style.display = "none"
        document.getElementsByClassName("w-form-fail")[0].style.display = "none"
        document.getElementsByClassName("w-form-done")[0].style.display = "block"
        //////////////////////////////////////// 
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      var errorText = document.getElementById('signup-error-message');
      console.log(errorMessage);
      errorText.innerHTML = errorMessage;
      // ..
      //////////////////////////////////////// 
      document.getElementsByClassName("w-form-fail")[0].style.display = "block"
      //////////////////////////////////////// 

    });
    };


      //handle signIn
    function handleSignIn(e) {
        console.log("login started")
        e.preventDefault();
        e.stopPropagation();
        
      const email = document.getElementById('signin-email').value;
      const password = document.getElementById('signin-password').value;

      console.log("got login info")

      signInWithEmailAndPassword(authentication, email, password)
    .then((userCredential) => {
      // Signed in 
      const user = userCredential.user;
      console.log('user logged in: ' + user.email);
      // ...
      //////////////////////////////////////// 
      document.getElementById("wf-form-signin").style.display = "none"
      document.getElementsByClassName("w-form-fail")[0].style.display = "none"
      document.getElementsByClassName("w-form-done")[0].style.display = "block"
      //////////////////////////////////////// 
      
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      var errorText = document.getElementById('signin-error-message');
      console.log(errorMessage);
      errorText.innerHTML = errorMessage;
      //////////////////////////////////////// 
      document.getElementsByClassName("w-form-fail")[0].style.display = "block"
      //////////////////////////////////////// 
    });
    }
    
  function handleSignOut() {
      signOut(authentication).then(() => {
    console.log('user signed out')
    // Sign-out successful.
  }).catch((error) => {
  const errorMessage = error.message;
  console.log(errorMessage);
    // An error happened.
  });
  }
  
  onAuthStateChanged(authentication, (user) => {
      let publicElements = document.querySelectorAll("[data-onlogin='hide']");
      let privateElements = document.querySelectorAll("[data-onlogin='show']");
  
      if (user) {
      // User is signed in, see docs for a list of available properties         
      
      const uid = user.uid;
      
      privateElements.forEach(function(element) {
      element.style.display = "initial";
      });
      
      publicElements.forEach(function(element) {
      element.style.display = "none";
      });
      
      console.log(`The current user's UID is equal to ${uid}`);
      // ...
    } else {
      // User is signed out
      publicElements.forEach(function(element) {
      element.style.display = "initial";
      });
      
      privateElements.forEach(function(element) {
      element.style.display = "none";
      });
      // ...
    }
  });
  </script>

登录链接块设置截图 #

内容的提问来源于stack exchange，提问作者Kuntante