#概要
ほぼ１日クオリティーで作成した勤怠管理システムで、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);
}
}
以上で、簡単だがログイン機能が完成する。
作ってみて
今回のログインシステムとしては、かなり上出来だけど本当にシステムに導入するとなると少し厳しいかなと思います。
カスタマイズできるので、それを前提に使うならありだと思いました。
参考文献
- 公式ドキュメント / FirebaseUI でウェブアプリに簡単にログイン機能を追加する
- https://github.com/firebase/firebaseui-web/blob/master/README.md#firebaseui-widget-modes
ソースの部分で参考させていただいたサイトがあったのですが、履歴に残ってなくて不明です。すみません。