概要

ほぼ１日クオリティーで作成した勤怠管理システムで、Firebaseのログインを使ったら驚くほど簡単に導入で出来た。

やり方

事前準備

ローカルで、Firebase開発を行えるようにします。
以前自分が作成した、やり方があるのでよければ⇒https://qiita.com/hirotann618/items/d511d8e78cd2c47fe5b9

今回導入したもの

メールアドレス入力画面

パスワード入力画面

新規追加やパスワードリセットも導入できる。

導入

Firebaseの「Authentication」より、今回は「メール/パスワード」を有効にした。
ソース作成
ログイン画面の作成
今回はログインが成功したら「main.html」に、遷移するように設定した。
ソースは2点用意した。「index.html」と「index.js」htmlは画面でjsは動き
フォルダー構成は下記構造にした。

画面用のソース

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kintai</title>

  <!-- Firebase Appは必須であり、常に最初になければなりません -->
  <script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-app.js"></script>

  <!-- ログインに必要なJSとCSS -->
  <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
  <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth.css" />

</head>

<body>

  <!-- ログインに必要なdiv -->
  <div id="firebaseui-auth-container"></div>
  <div id="loader">Loading...</div>

  <script src="https://www.gstatic.com/firebasejs/5.8.3/firebase.js"></script>

　<!-- ログイン画面の固有設定のjs　-->
  <script src="/js/index.js"></script>
  <script>Index.init()</script>
</body>

</html>

動きのソース

index.js

class Index {

  static init() {
    // Firebaseの初期化

    /**
    [注意]ここの値は、FireBaseのプロジェクトサイトを参照する。
    */
    var config = {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: ""
    };
    firebase.initializeApp(config);

    // FirebaseUIインスタンス初期化
    var ui = new firebaseui.auth.AuthUI(firebase.auth());

    // FirebaseUIの各種設定
    var uiConfig = {
      callbacks: {
        signInSuccess: function (currentUser, credential, redirectUrl) {
          // サインイン成功時のコールバック関数
          // 戻り値で自動的にリダイレクトするかどうかを指定
          return true;
        },
        uiShown: function () {
          // FirebaseUIウィジェット描画完了時のコールバック関数
          // 読込中で表示しているローダー要素を消す
          document.getElementById('loader').style.display = 'none';
        }
      },
      signInSuccessUrl: 'main.html',
      signInOptions: [
        // サポートするプロバイダを指定
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ],
      // Terms of service url.(サービス利用規約ページの)
      tosUrl: '',
      //アカウント選択を行う画面の防止
      credentialHelper: firebaseui.auth.CredentialHelper.NONE
    };

    // FirebaseUI描画開始
    ui.start('#firebaseui-auth-container', uiConfig);

  }
}

以上で、簡単だがログイン機能が完成する。

作ってみて

今回のログインシステムとしては、かなり上出来だけど本当にシステムに導入するとなると少し厳しいかなと思います。
カスタマイズできるので、それを前提に使うならありだと思いました。

参考文献

ソースの部分で参考させていただいたサイトがあったのですが、履歴に残ってなくて不明です。すみません。

Firebaseでログインを導入したら驚くほど簡単に出来た

概要

やり方