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

firebaseユーザー登録機能を実装してみる

JavaScript firebase

題の通り。firebaseのユーザー登録機能を実装してみる。

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

プロジェクトの設定

Firebaseコンソールからプロジェクトを選択して、「Authentication」 → 「ログイン方法」 → 「メール / パスワード」を有効にする。

f:id:kosumoro:20161114224340j:plain

https://console.firebase.google.com/

ユーザー登録画面の作成

<!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-register">メールアドレス</label>
        <input id="email-register" type="email"
            placeholder="メールアドレスを入力してください">
      </p>

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

      <p>
        <button id="submit-register">新規登録する</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:20161114221400j:plain

スクリプトの作成

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

  elems.registerButton.addEventListener("click", function() {
    var email_ = elems.emailField.value;
    var password_ = elems.passwordField.value;
    
    firebase.auth().createUserWithEmailAndPassword(email_, password_).then(function(user_) {
      console.log("Success: ", user_);
    }).catch(function(err_) {
      console.log("Error: ", err_)
    });
  });

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

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

input 欄にメールアドレスとパスワードを入力してボタンをクリックするとユーザー登録ができる。

f:id:kosumoro:20161114223017j:plain

登録したユーザーはfirebaseコンソールからも確認できる。

f:id:kosumoro:20161114223259j:plain

同じメールアドレスで登録しようとするとエラーになる。

f:id:kosumoro:20161114223621j:plain

メールアドレスの形式がおかしくてもエラーを返してくれる。

f:id:kosumoro:20161114223837j:plain