JSFiddle - React, Tailwind, and code Playground
HTML
<h1>使用REST API</h1>
<h2>登入</h2>
<lable for="accountL"></lable>
<input id="accountL" type="text">
<lable for="pwdL"></lable>
<input id="pwdL" type="password">
<button type="submit" id="loginSmtBtn">Login</button>
<h2>增加Post</h2>
<label>標題</label>
<input id="postTitle" type="text">
<label>內文</label>
<input id="postContent" type="text">
<label>限制年齡</label>
<input id="postLimitAge" type="number">
<button type="submit" id="postSmtBtn">Signup</button>
<h2>取得現在使用者所有Post</h2>
<button id="postListBtn">Get</button>
<h2>清空現在使用者所有Post</h2>
<button id="delPostListBtn">Del</button>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
JavaScript
// Initialize Firebase
var config = {
apiKey: "AIzaSyASwAnakbaqQB578LGHHbPCht7I_FqjNHs",
authDomain: "test-35b46.firebaseapp.com",
databaseURL: "https://test-35b46.firebaseio.com",
storageBucket: "test-35b46.appspot.com",
messagingSenderId: "558722894017"
};
firebase.initializeApp(config);
console.log("test");
//登入
var accountL = document.getElementById("accountL");
var pwdL = document.getElementById("pwdL");
var loginSmtBtn = document.getElementById("loginSmtBtn");
loginSmtBtn.addEventListener("click",function(){
firebase.auth().signInWithEmailAndPassword(accountL.value, pwdL.value).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage);
})
},false);
//取得登入使用者資料
var loginUser;
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
loginUser = user;
console.log("User is logined", user);
firebase.auth().currentUser.getToken(true).then(function(idToken) {
loginUser.idToken = idToken;
console.log("取得 ID Token",idToken);
}).catch(function(error) {
// Handle error
});
} else {
loginUser = null;
console.log("User is not logined yet.");
}
});
//新增Post
var postSmtBtn = document.getElementById("postSmtBtn");
var postTitle = document.getElementById("postTitle");
var postContent = document.getElementById("postContent");
var postLimitAge = document.getElementById("postLimitAge");
postSmtBtn.addEventListener("click", function(){
var xhr = new XMLHttpRequest();
xhr.open('POST','https://test-35b46.firebaseio.com/posts/'+loginUser.uid+'.json?auth='+loginUser.idToken, true);
xhr.setRequestHeader('Content-Type','json');
xhr.send(JSON.stringify({
uid: loginUser.uid,
title: postTitle.value,
content:postContent.value,
age: parseInt(postLimitAge.value)
}))
xhr.onload = function(e) {
if(this.status == 200||this.status == 304){
console.log("新增POST:",this.responseText);
...