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);
  ...