読者です 読者をやめる 読者になる 読者になる

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>
      <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>
  </main>

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

f:id:kosumoro:20161115225716j:plain

スクリプトの作成

これもユーザー登録のときとほぼ同じ。

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

  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("Success: ", user_);
    }).catch(function(err_) {
      console.log("Error: ", err_)
    });
  });

  function getDOMElements() {
    return {
      "emailField": document.getElementById("email-login"),
      "passwordField": document.getElementById("password-login"),
      "loginButton": document.getElementById("submit-login")
    };
  }

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