Firebaseで簡単ログイン機能

はじめに

Firebaseで簡単なログイン機能を実装します。
前回の記事でプロジェクトを作成してあることが前提です。
ほとんどのwebサービスはユーザー認証を行い、ユーザーの情報を保存してます。
今回はユーザー認証の定番emailとpasswordを使ったログイン機能を実装します。

参考にした記事

ログイン機能を作ろう

手順1

Authをクリック

Auth

手順2

①ログイン方法をクリック

②メール/パスワードをクリック

③有効にするにチェックして、保存してください

手順3

①ウェブ設定をクリック

②①をコピーしといてください

手順4

①index.htmlを作成

②手順3でコピーしたのを`①のコピーを貼り付ける`に貼り付けてください

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>認証テスト</title>
    <style>
      .header-title {
        border-bottom: 1px solid #aaa;
        padding: 10px;
        text-align: center;
      }
      .hide {
        display: none;
      }
      #info {
        text-align: center;
        font-size: 50px;
        font-weight: bold;
      }
      .container {
        text-align: center;
      }

      input[type="email"],
      input[type="password"] {
        border-radius: 4px;
        border: solid 1px #ccc;
        font-size: 18px;
        margin: 20px 0;
        padding: 10px;
        width: 250px; 
      }

      #login, #logout {
        padding: 5px 40px;
        text-decoration: none;
        background: #fff;
        border-bottom: solid 2px #d0d0d0f7;
        border-radius: 4px;
        font-weight: bold;
        margin-right: 9px;
      }

      #newuser {
        padding: 5px 40px;
        text-decoration: none;
        background: #fff;
        border-bottom: solid 2px #d0d0d0f7;
        border-radius: 4px;
        font-weight: bold;
        margin-left: 9px;
      }
    </style>
  </head>
  <body>
    <h1 class="header-title">ユーザー認証テスト</h1>

    <div class="container">
      <div id="input-area">
        <div class="email">
          <input id="email" type="email" placeholder="メールアドレスを入力" required/>
        </div>

        <div class="password">
          <input id="password" type="password" placeholder="パスワードを入力" required/>
        </div>

        <button id="login">ログイン</button>
        <button id="newuser">新規登録</button>
      </div>
    </div>

    <!-- テキスト表示用 -->
    <p id="info"></p>

    <div class="container">
      <button id="logout" class="hide">ログアウト</button>
    </div>


    <script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
    <script>
    //手順4:①のコピーを貼り付ける


    //DOM取得
    var inputarea = document.getElementById('input-area');
    var newuser = document.getElementById('newuser');
    var login = document.getElementById('login');
    var logout = document.getElementById('logout');
    var info = document.getElementById('info');

    //新規登録処理
    newuser.addEventListener('click', function(e) {
      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;

      firebase.auth().createUserWithEmailAndPassword(email, password)
      .catch(function(error) {
        alert('登録できません（' + error.message + '）');
      });
    });

    //ログイン処理
    login.addEventListener('click', function(e) {
      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;

      firebase.auth().signInWithEmailAndPassword(email, password)
      .catch(function(error) {
        alert('ログインできません（' + error.message + '）');
      });
    });


    //ログアウト処理
    logout.addEventListener('click', function() {
      firebase.auth().signOut();
    });

    //認証状態の確認
    firebase.auth().onAuthStateChanged(function(user) {
      if(user) {
        loginDisplay();
      }
      else {
        logoutDisplay();
      }
    });

    function loginDisplay() {
      logout.classList.remove('hide');
      inputarea.classList.add('hide');

      info.textContent = "ログインに成功";
    }

    function logoutDisplay() {
      logout.classList.add('hide');
      inputarea.classList.remove('hide');

      info.textContent = "";
    }
    </script>
  </body>
</html>

手順5

①メールアドレスを入力

②パスワードを入力

③新規登録をクリック

④ログイン成功画面表示されます

手順6

Firebaseに戻り、Authenticationのユーザーをクリック

先ほど新規登録した情報が表示されます

emailとpasswordを使った認証機能の完成です。

他にも色々な認証機能があるので試してみてください。

終わりに

ハンズシェアでは、エンジニアやデザイナーを募集してます。
部活活動、社内イベント、社外イベント、なども行なっております。
エンジニア
 デザイナー

社外イベント
管理画面チラ見せ♡ナイト

11月4日
ハンズシェアもくもく会@六本木
11月7日
ハンズシェアボドゲ会@六本木

絶賛人気中！もくもく会
ハンズシェアもくもく会 #4