最近幫一個留學生用戶做一個基於firebase的社交平台
查找了很多資料，國內很少有人使用firebase，大部分都是用的MUI+野狗
我也是費了很大的力氣，看了好久官方的文檔，簡單實現了登錄和注冊功能，我這里使用的是郵箱+密碼登錄的方式
點擊這個，並開始使用
登錄方法選擇 電子郵件
然后就可以開始寫代碼了
首先是注冊，我這里是我自己寫的一個簡單demo
<html>
<head>
<title>
注冊
</title>
</head>
<body>
<input id="email"><br><br>
<button onclick="isEmail()">郵箱</button><br><br>
<input id="pass"><br><br>
<button onclick="">注冊</button>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyA6y2HXzNynwp0jZMG-xNK_5h1IF1816mA",
authDomain: "test-d88eb.firebaseapp.com",
databaseURL: "https://test-d88eb.firebaseio.com",
projectId: "test-d88eb",
storageBucket: "",
messagingSenderId: "63953921461"
};
firebase.initializeApp(config);
function isEmail() {
Email = document.getElementById("email").value;
Password = document.getElementById("pass").value;
if (Email.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
{
}//return true;
else
{
alert("Error Email!");
return flase;
}
if(Password!="")
{
firebase.auth().createUserWithEmailAndPassword(Email, Password).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
alert("Failed to register!"+errorMessage);
});
alert("Welcome to join us.");
}
else
{
alert("The password can not be empty!")
}
}
</script>
</body>
</html>
firebase.auth().createUserWithEmailAndPassword 用於注冊，參數就是郵箱和密碼
接下來是登錄
<html>
<head>
<title>
登錄
</title>
</head>
<body>
<input id="email"><br><br>
<button onclick="isEmail()">登錄</button><br><br>
<input id="pass"><br><br>
<button onclick="">注冊</button>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyA6y2HXzNynwp0jZMG-xNK_5h1IF1816mA",
authDomain: "test-d88eb.firebaseapp.com",
databaseURL: "https://test-d88eb.firebaseio.com",
projectId: "test-d88eb",
storageBucket: "",
messagingSenderId: "63953921461"
};
firebase.initializeApp(config);
function isEmail() {
Email = document.getElementById("email").value;
Password = document.getElementById("pass").value;
if (Email.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
{
}//return true;
else
{
alert("Error Email!");
return flase;
}
if(Password!="")
{
firebase.auth().signInWithEmailAndPassword(Email, Password).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
alert("Login failed!"+errorMessage);
});
}
else
{
alert("The password can not be empty!")
}
}
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var providerData = user.providerData;
alert("Login successful");
alert(displayName+"|"+email+"|"+emailVerified+"|"+photoURL+"|"+isAnonymous+"|"+uid+"|"+providerData)
} else {
// User is signed out.
// ...
}
});
</script>
</body>
</html>
firebase.auth().signInWithEmailAndPassword(Email, Password) 用於登錄，參數一目了然
firebase.auth().onAuthStateChanged(function(user) 這個函數用於檢測登錄狀態，每次登錄狀態變化都會調用這個函數
經過我的測試，這個函數有點類似檢測cookies的意思，可以檢測當前的登錄狀態