Firebase JS und HTML-AUTH

Ich versuche, eine Web-Anmeldung mit der Firebase APIFirebase JS und HTML-AUTH

ich an ihrem Beispielcode sah zu erstellen und es schien gut zu funktionieren, aber jetzt ist es nicht.

Die Bahn mit der Taste snipped ist es für die Sicherheit i entfernten sie nur

Das Schnellstart-sign-in-Status Etikett entweder nicht aktualisieren wird.

<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> 
<script> 
    var config = { 
    apiKey: "*****", 
    authDomain: "project-*****.firebaseapp.com", 
    databaseURL: "https://project-*****.firebaseio.com", 
    storageBucket: "project--*****.appspot.com", 
}; 
firebase.initializeApp(config); 
</script> 

<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript"> 
function toggleSignIn() { 
    if (firebase.auth().currentUser) { 
    firebase.auth().signOut(); 
    } else { 
    var email = document.getElementById('email').value; 
    var password = document.getElementById('password').value; 
    if (email.length < 4) { 
     alert('Please enter an email address.'); 
     return; 
    } 
    if (password.length < 4) { 
     alert('Please enter a password.'); 
     return; 
    } 
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { 
     var errorCode = error.code; 
     var errorMessage = error.message; 
     if (errorCode === 'auth/wrong-password') { 
     alert('Wrong password.'); 
     } else { 
     alert(errorMessage); 
     } 
     console.log(error); 
     document.getElementById('quickstart-sign-in').disabled = false; 
    }); 
    } 
    document.getElementById('quickstart-sign-in').disabled = false; 
} 

function initApp() { 
    firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 
     document.getElementById('quickstart-sign-in-status').textContent = 'Signed in'; 
    } else { 
     document.getElementById('quickstart-sign-in-status').textContent = 'Signed out'; 
    } 
    document.getElementById('quickstart-sign-in').disabled = false; 
    }); 

    document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false); 
} 

window.onload = function() { 
    initApp(); 
}; 
</script> 

<title>Fitness Schedule</title> 
<link rel="stylesheet" href="css/style.css"/> 

</head> 
<body> 
<div class="container"> 
    <div class="main"> 
    <h2>Fitness Schedule</h2><hr/> 

    <center><label id="quickstart-sign-in-status"></label></center><br><br> 

    <label>User Name :</label></br> 
    <input type="text" name="email" id="email"/></br> 

    <label>Password :</label></br> 
    <input type="password" name="password" id="password"/></br> 

    <button id="quickstart-sign-in" name="signin">Sign In</button> 

    </div> 
</div> 
</body>

Quelle

2016-07-18 willmays1

Gibt es einen Grund, warum Sie Script-Tags außerhalb der HTML-Tags deklarieren? Sie sollten die Skript-Tags wahrscheinlich entweder in der oder möglicherweise am Ende der platzieren, damit das HTML zuerst rendern kann. – Kyle

Neben den Config-Tasten ist alles andere im Kopf. Firebase sagte mir, dass ich es einfügen soll, bevor – willmays1

Ich denke, etwas wurde falsch kommuniziert - alle Skript-Tags sollten mindestens zwischen den HTML-Tags gehen. Dies ist ein Beispiel, das von der Firebase-Site bereitgestellt wird: https://github.com/firebase/quickstart-js/tree/master/database - überprüfen Sie den zweiten Aufzählungspunkt unter "Erste Schritte". Es sieht auch so aus, als wäre Ihr tatsächlicher fb ref außerhalb des html . Ich würde sagen (um dies als Täter auszuschließen), versuche es in die Abschnitte oder zu verschieben. – Kyle

Ich habe gerade Ihren Code in einem plnkr hier ->http://plnkr.co/edit/7qa2H6m9VRhmkd7b1X8D und es scheint gut zu funktionieren,

<!DOCTYPE html> 
<html> 

<head> 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> 
    <script src="script.js"></script> 
    <script type="text/javascript"> 
    var config = { 
     YOUR-CONFIG-GOES-HERE 
    }; 
    firebase.initializeApp(config); 


    function toggleSignIn() { 
     if (firebase.auth().currentUser) { 
     firebase.auth().signOut(); 
     } else { 
     var email = document.getElementById('email').value; 
     var password = document.getElementById('password').value; 
     if (email.length < 4) { 
      alert('Please enter an email address.'); 
      return; 
     } 
     if (password.length < 4) { 
      alert('Please enter a password.'); 
      return; 
     } 
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { 
      var errorCode = error.code; 
      var errorMessage = error.message; 
      if (errorCode === 'auth/wrong-password') { 
      alert('Wrong password.'); 
      } else { 
      alert(errorMessage); 
      } 
      console.log(error); 
      document.getElementById('quickstart-sign-in').disabled = false; 
     }); 
     } 
     document.getElementById('quickstart-sign-in').disabled = false; 
    } 

    function initApp() { 
     firebase.auth().onAuthStateChanged(function(user) { 
     if (user) { 
      document.getElementById('quickstart-sign-in-status').textContent = 'Signed in'; 
     } else { 
      document.getElementById('quickstart-sign-in-status').textContent = 'Signed out'; 
     } 
     document.getElementById('quickstart-sign-in').disabled = false; 
     }); 

     document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false); 
    } 

    window.onload = function() { 
     initApp(); 
    }; 
    </script> 
    <title>Fitness Schedule</title> 
    <link rel="stylesheet" href="css/style.css" /> 
</head> 

<body> 
    <div class="container"> 
    <div class="main"> 
     <h2>Fitness Schedule</h2> 
     <hr /> 
     <center> 
     <label id="quickstart-sign-in-status"></label> 
     </center> 
     <br /> 
     <br /> 
     <label>User Name :</label> 
     <br /> 
     <input type="text" name="email" id="email" /> 
     <br /> 
     <label>Password :</label> 
     <br /> 
     <input type="password" name="password" id="password" /> 
     <br> 
     <br> 
     <button class="btn btn-primary" id="quickstart-sign-in" name="signin">Sign In</button> 
    </div> 
    </div> 
</body> 

</html>

Quelle

2016-07-19 00:22:09

Firebase JS und HTML-AUTH

Antwort

Verwandte Themen