firebaseのログアウト機能を実装してみる

ユーザーがログインしていたらログアウトボタンを、ログインしていなかったらログインボタンを表示する。

firebaseホスティングサービスの登録からデプロイまで - こすもろのメモ帳

firebaseユーザー登録機能を実装してみる - こすもろのメモ帳

firebaseのログイン機能を実装してみる - こすもろのメモ帳

画面の作成

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ログアウト画面</title>
</head>
<body>
  <main>
    <div id="container-login">
      <p>
        <label for="email-login">メールアドレス</label>
        <input id="email-login" type="email"
            placeholder="メールアドレスを入力してください">
      </p>

      <p>
        <label for="password-login">パスワード</label>
        <input id="password-login" type="password"
            placeholder="パスワードを入力してください">
      </p>

      <p>
        <button id="submit-login">ログイン</button>
      </p>
    </div>
    
    <div id="container-logout">
      <p id="status-user"></p>

      <button id="submit-logout">ログアウト</button>
    </div>
  </main>

  <script src="//www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

ログインしていたら、ユーザーのメールアドレスとログアウトボタンを表示する。

f:id:kosumoro:20161116233924j:plain

ログインしていなかったら、ログイン用フォームを表示する。

f:id:kosumoro:20161116234112j:plain

スクリプトの作成

(function() {
  var app = initializeApp();
  var elems = getDOMElements();

  firebase.auth().onAuthStateChanged(function(user_) {
    if(user_) {
      elems.userStatus.textContent = user_.email;
      elems.loginContainer.style.display = "none";
      elems.logoutContainer.style.display = "block";
    }
    else {
      elems.userStatus.textContent = "";
      elems.loginContainer.style.display = "block";
      elems.logoutContainer.style.display = "none";
    }
  });

  elems.loginButton.addEventListener("click", function() {
    var email_ = elems.emailField.value;
    var password_ = elems.passwordField.value;

    firebase.auth().signInWithEmailAndPassword(email_, password_).then(function(user_) {
      console.log("Signed in: ", user_);
    });
  });

  elems.logoutButton.addEventListener("click", function() {
    firebase.auth().signOut().then(function() {
      console.log("Signed out.");
    });
  });

  function getDOMElements() {
    return {
      "loginContainer": document.getElementById("container-login"),
      "logoutContainer": document.getElementById("container-logout"),
      "emailField": document.getElementById("email-login"),
      "passwordField": document.getElementById("password-login"),
      "loginButton": document.getElementById("submit-login"),
      "userStatus": document.getElementById("status-user"),
      "logoutButton": document.getElementById("submit-logout")
    };
  }

  function initializeApp() {
    firebase.initializeApp({
      "apiKey": "【プロジェクトのAPIキー】",
      "authDomain": "【プロジェクト名】.firebaseapp.com",
      "databaseURL": "https://【プロジェクト名】.firebaseio.com",
      "storageBucket": "【プロジェクト名】.appspot.com",
    });
  }
})();