どうも、まさとらん（@0310lan）です。
今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。
利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です！
非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！
自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。
■始め方！
今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう！
そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。
好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。
すると、プロジェクト専用の「ダッシュボード」が表示されます！
「ユーザー認証設定」も含めて、多彩な機能をこの画面から管理することが可能になるわけです。
それでは、「認証機能」を設定しましょう！
方法は簡単で、まずは左メニューの「➀Auth」を選び、ログイン方法の「➁メール／パスワード」の項目を選択します。
あとは、「有効にする」にチェックを入れるだけでOKです！
たったこれだけで、Firebase側の設定はひとまず完了です！
あとは、コードを書いていくだけなのですが、その前に画面右上の「ウェブ設定」をクリックしてみてください。
すると、Firebaseの専用ライブラリ「firebase.js」のリンクと、初期化設定用の「config」が表示されるのでコピーしておきましょう。
これらの内容は、あとでプログラミングする時に必要となるので、忘れないように確認しておいてください！
■必要なファイルを準備しよう！
それでは、Firebaseを使った「ユーザー認証」プログラミングに挑戦していきましょう！
今回作るのは、最低限の機能を備えたシンプルな「認証ページ」を想定しています。
必要なファイルとして、HTMLを記述する「index.html」と、認証機能を記述する「app.js」をこれから作成していきます。
まずは、シンプルな「画面UI」をサクッと作りましょう！
<!-- index.html --> <div id="input-area"> <input id="email" type="email" placeholder="メールアドレスを入力" required/> <input id="password" type="password" placeholder="パスワードを入力" required/> <button id="login">ログイン</button> <button id="newuser">新規登録</button> </div> <button id="logout" class="hide">ログアウト</button>
「inputタグ」と「buttonタグ」で単純に作っていますが、もちろん「formタグ」を使っても問題ありません。
また、「ログアウト」用のボタンは、初回時に見えないようにCSSで隠しておくのが良いでしょう。
最後に、「bodyタグ」の最下段に先ほどコピーしておいた「firebase.js」と、これから作る「app.js」を読み込むように記述しておきます。
<script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script> <script src="app.js"></script>
これで、「index.html」をブラウザで開くと「認証ページ」が表示されるかと思います。
（「index.html」のソースコードはコチラから確認できます…）
そして、肝心の「app.js」ですが、まずはコピーしておいた初期化用の「config」を貼り付けておきましょう。
// app.js //Firebase初期設定 var config = { apiKey: "【apiKey】", authDomain: "【Domain】", databaseURL: "【URL】", storageBucket: "【Bucket】", messagingSenderId: "【ID】" }; firebase.initializeApp(config);
これで、自分の「Firebaseプロジェクト」の初期化が完了し、利用可能な状態になっています。
あとは、「ユーザー認証」に必要な機能を実装するため、どんどんコードを追加していけばOK！
■「ユーザー認証」に必要な機能の実装！
今回作る「ユーザー認証」ページでは、以下4つの機能は最低限欲しいところでしょう。
１，新しいユーザーを登録する「新規登録」ボタン
２，既存のユーザーが「ログイン」できるボタン
３，「ログアウト」ボタン
４，現在の「認証」状態を監視する機能
これらをゼロから作るのは非常に大変ですが、Firebaseには上記4つの機能を簡単なコードで実現できるAPIが提供されています。
まず、「新規登録」「ログイン」機能を実現するのは簡単で、それぞれ1行のコードを書くだけというお手軽さです！
// 新規ユーザーの登録機能 firebase.auth().createUserWithEmailAndPassword(email, password) // 既存ユーザーのログイン機能 firebase.auth().signInWithEmailAndPassword(email, password)
引数には、フォームから取得した「メールアドレス」と「パスワード」をそのまま代入してあげればOKです。
例えば、新規登録ボタンを実装するなら、ボタンがクリックされたタイミングで「メールアドレス」と「パスワード」を取得し、先ほどのコードに代入するだけでシンプルに実装できるでしょう。
// ボタンがクリックされた時の処理 button.addEventListener('click', function(e) { // メールアドレス・パスワードを取得 var email = document.getElementById('email').value; var password = document.getElementById('password').value; // 新規ユーザーを登録 firebase.auth().createUserWithEmailAndPassword(email, password) });
上記コードを「新規登録」ボタンに実装し、実際に「メールアドレス」と「パスワード」を入力してボタンをクリックしてみましょう。
すると、Firebaseのダッシュボードから、見事に「新規ユーザー」が登録されているのが分かります！
登録が済んだら、次回からは「ログイン」による認証が可能になっています。
ちなみに、登録が済んでいないのに「ログイン」しようとしたり、同じメールアドレスで「新規登録」した時などは「エラー」が発生しますが、「catch()」を追加することで処理を分岐させることも出来ます。
// 登録に失敗した時の処理 firebase.auth().createUserWithEmailAndPassword(email, password) .catch(function(error) { alert('登録できません（' + error.message + '）'); });
あと必要な機能として、現在のユーザーが「ログイン状態」なのか「ログアウト状態」なのかも把握しておかなければいけません。
これをFirebaseでは、以下のコードを書くだけで最適なタイミングで監視してくれるようになります。
firebase.auth().onAuthStateChanged()
実際には、IF文などで処理を分岐させるようになるでしょう。
// 認証状態の確認 firebase.auth().onAuthStateChanged(function(user) { if(user) { // ログイン状態の処理 } else { // ログアウト状態の処理 } });
ユーザーが「新規登録」や「ログイン・ログアウト」をすれば、自動的にユーザーの状態を把握し処理を分岐してくれるので便利です。
ログイン後に、ユーザーのデータを読みこんだり、別画面に遷移させたりなどいろいろ活用できると思います。
最後に、「ログアウト」機能の実装ですが、これは非常に簡単で次の1行を書くだけで実現します。
firebase.auth().signOut();
これを「ログアウト」ボタンに実装すれば、最低限の機能を搭載した「ユーザー認証」ページの完成です！
今回のサンプルデモ「ユーザー認証ページ」の全ソースコードは、コチラから確認することが出来ます！
（CSSに関しては、超軽量フレームワークのmilligram.cssを使用しています…）
■まとめ
今回は、Firebaseが持つ便利な「ユーザー認証」機能の一部をご紹介しました。
実は、もっと多彩な機能が用意されているのですが、いずれにしても今回の基本的な内容がベースになっているので、まずは自分でサンプルデモと同じページが作れるようになってから次のステップアップを目指すと良いでしょう。
また、FirebaseではTwitterやFacebookなどで認証できる「SNS認証」や、メールアドレスの検証をサポートする機能や、Webページをそのままホスティングしたりデータベースを利用したりも可能なので、ご興味ある方はぜひこれらの機能も活用してみてください！
＜参考＞
・「Firebase」公式サイト
paizaではITエンジニアとしてのスキルレベル測定や、動画によるプログラミング学習コンテンツ(paiza Learning)を提供しています。テストの結果によりS,A,B,C,D,Eの６段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。