代码之家  ›  专栏  ›  技术社区  ›  Raskayu

firebase auth错误auth/请求的网络失败

  •  0
  • Raskayu  · 技术社区  · 7 年前

    我正在使用FireBase主机托管我的网站,我尝试用email/pwd登录,但这个错误总是提示。

    这是我使用的JS:

    window.onload = () => initApp(); //Initiate screen
    
      function initApp(){
        console.log(firebase);
    
        document.getElementById("btnLogin").addEventListener("click", e => {
          var email = document.getElementById("inputEmail").value;
          var pwd = document.getElementById("inputPassword").value;
    
          firebase.auth().signInWithEmailAndPassword(email, pwd).catch(error => {
                              var errorCode = error.code;
                              var errorMessage = error.message;
                              console.log(errorCode + "-" + errorMessage);
                              alert(errorCode + "-" + errorMessage);
          }); //Login
        });//Login button click
    
        firebase.auth().onAuthStateChanged(user => {
          console.log("User: " + user);
          if (user) {
            // User is signed in.
            var displayName = user.displayName;
            var uEmail = user.email;
            var emailVerified = user.emailVerified;
            var photoURL = user.photoURL;
            var isAnonymous = user.isAnonymous;
            var uid = user.uid;
            var providerData = user.providerData;
            console.log(uEmail + " logged in");
            alert(uEmail + " logged in");
          } else {
            console.log("not logged in");
            alert("not logged in");
          }//Check user
        });//Check auth state changes        
      }//InitApp   
    

    这就是表单的HTML:

    <form id="formLogin" class="form-signin">
        <h2 align="center" class="form-signin-heading">Inicia sessió</h2>
        <label for="inputEmail" class="sr-only">Correu electrònic</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Correu electrònic" required autofocus>
        <label for="inputPassword" class="sr-only">Contrassenya</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Contrassenya" required>        
        <button id="btnLogin"class="btn btn-lg btn-primary btn-block" type="submit">Entrar</button>
      </form>
    

    那么,这里有什么问题?如果我在chrome/firefox控制台上使用这个JS代码,它就会登录并工作。

    编辑: 不知何故,如果我将表单标记改为DIV,它是有效的,但它没有任何意义。有没有什么问题不知道使用HTML5表格与FireBase?

    1 回复  |  直到 7 年前
        1
  •  1
  •   CodingIntrigue    7 年前

    默认行为 <button> 里面 <form> 元素是提交表单。这将导致您的页面重新加载并取消FireBase登录代码。

    这就是为什么当你换成 <div> 元素。

    你需要使用 preventDefault 在您的按钮监听器中,为了防止这种行为:

    document.getElementById("btnLogin").addEventListener("click", e => {
          e.preventDefault(); // Stop the form from submitting
          var email = document.getElementById("inputEmail").value;
          var pwd = document.getElementById("inputPassword").value;
    
          firebase.auth().signInWithEmailAndPassword(email, pwd).catch(error => {
                              var errorCode = error.code;
                              var errorMessage = error.message;
                              console.log(errorCode + "-" + errorMessage);
                              alert(errorCode + "-" + errorMessage);
          }); //Login
        });//Login button click