【发布时间】：2020-04-02 20:11:08
【问题描述】：
上下文
我正在尝试 Firebase 平台的一些功能。我构建了一个非常简单的 html 页面，并尝试了不同的功能：注册、登录、退出…… 我有两个页面：index.html 和 auth.js：
index.html
<html>
<head>
<title> First test </title>
<!-- Load library: The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<!-- Load library: Add additional services you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-firestore.js"></script>
<!-- Load library: Authentification -->
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-auth.js"></script>
<script>
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var firestore = firebase.firestore();
firestore.settings({ timestampsInSnapshots: true });
const auth = firebase.auth();
</script>
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
</head>
<body>
<!-- Add an element to the data storage -->
<div id ="modal-add-data" class='modal'>
<div class='modal-content'>
<h4> Add data </h4><br />
<form id='add-data'>
<div class = 'input-field'>
<input type='data1' id="data1" />
<label for='data1'> data1 </label>
</div>
<div class = 'input-field'>
<input type='data2' id="data2" />
<label for='data2'> data2 </label>
</div>
<button id='save-data' type='button'> Add</button>
</form>
</div>
</div>
<!-- Authentificate a new user -->
<div id ="modal-signup", class='modal'>
<div class='modal-content'>
<h4> Sign Up </h4><br />
<form id='signup-user'>
<div class = 'input-field'>
<input type='email' id="signup-email" />
<label for='signup-email'> email adress </label>
</div>
<div class = 'input-field'>
<input type='password' id="signup-password" />
<label for='signup-password'> password </label>
</div>
<button id='signup-button' type='submit'>sign up</button>
</form>
</div>
</div>
<!-- Sign out a user -->
<div id ="modal-signout", class='modal'>
<div class='modal-content'>
<h4> Log Out button </h4><br />
<form id='signout-user'>
<button id='signout-button' type='button'>sign out</button>
</form>
</div>
</div>
<!-- Login a user -->
<div id ="modal-login", class='modal'>
<div class='modal-content'>
<h4> Login </h4><br />
<form id='login-user'>
<div class = 'input-field'>
<input type='email' id="login-email" />
<label for='login-email'> email adress </label>
</div>
<div class = 'input-field'>
<input type='password' id="login-password" />
<label for='login-password'> password </label>
</div>
<button id='login-button' type='submit'>login</button>
</form>
</div>
</div>
<script src='./auth.js' ></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
<!-- <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-storage.js"></script> -->
auth.js
// Listen for auth status changes
auth.onAuthStateChanged(user => {
if (user) {
console.log("user logged in: ", user);
} else {
console.log("user logged out");
}
})
// Sign up function
const signupForm = document.querySelector('#signup-user');
signupForm.addEventListener("submit", (e) => {
e.preventDefault(); // avoid the page to refresh when we click signup
// get user info from the id of the input
const email = signupForm['signup-email'].value;
const password = signupForm['signup-password'].value;
auth.createUserWithEmailAndPassword(email, password).then( cred => {
console.log(cred);
const modal = document.querySelector('#modal-signup');
console.log(modal)
M.Modal.getInstance(modal).close();
signupForm.reset();
// div id
});
});
// Add data function
const save = document.querySelector('#add-data');
const docRef = firestore.collection("samples").doc("user_");
const eventToListen = document.querySelector('#save-data');
//const docRef = firestore.doc("samples/secondtest");
// The sign up variables and constants
// All the functions
// Add some data in firestroe
eventToListen.addEventListener("click", function() {
const inp1 = save['data1'].value;
const inp2 = save['data2'].value;
docRef.set({ // https://firebase.google.com/docs/firestore/manage-data/add-data?authuser=3
lname: inp1,
firstname: inp2,
}).then(function() {
console.log("Status saved");
}).catch( function (error) {
console.log("Got an eror", error);
});
});
// Login function
const loginForm = document.querySelector('#login-user');
loginForm.addEventListener("submit", (e) => {
e.preventDefault(); // avoid the page to refresh when we click signup
// get user info from the id of the input
const email = loginForm['login-email'].value;
const password = loginForm['login-password'].value;
auth.signInWithEmailAndPassword(email, password).then( cred => {
console.log(cred.user)
const modal = document.querySelector('#modal-login');
M.Modal.getInstance(modal).close();
loginForm.reset();
// div id
});
});
// Logout function
const signoutForm = document.querySelector('#signout-button');
signoutForm.addEventListener("click", (e) => {
e.preventDefault(); // avoid the page to refresh when we click signup
// get user info from the id of the input
auth.signOut()
});
我的问题：
当我导入物化框架时，在 index.html 文件中 ( )
我的页面变为空白。当我删除此导入时，页面已加载。 当然，我已经下载了物化框架文件。当我放下这条线
非常感谢
【问题讨论】：
-
在方法 auth.onAuthStateChanged 调用的末尾是否缺少分号？
-
确实如此，但这并不能解决主要问题：/
-
firebase.auth().onAuthStateChanged 而不是 auth.onAuthStateChanged ？假设 index.html 和 auth.js 在同一个文件夹中，我还将
-
我实际上没有收到任何错误...只是一个空白页。当我删除 行时，它工作正常（但后来我没有物化框架了......）
标签： javascript html firebase materialize