RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

Firebaseを使ってログイン機能を実装してみた

はじめに

こんにちは。新卒2年目のtaku_76です。 前回記事では、FirebaseのRealtime Databaseを利用してリアルタイムチャットを作成しましたが、 その他にも様々な機能があるということで今回はFirebase Authenticationを使ってログイン機能を実装してみましたので紹介します。

Firebase Authenticationとは

Firebase Authenticationはほとんどのアプリで必要となるユーザー認証を簡単に実装することができます。具体的にはパスワード認証や、GoogleFacebookTwitterなどのフェデレーションIDプロバイダを使用した認証を行うことができます。方法としては、 FirebaseUI を使用するか、Firebase Authentication SDKを使ってログイン方法を手動でアプリに統合することで、ユーザーをFirebaseアプリにログインさせることができます。今回はメールアドレスとパスワードを用いてユーザー認証機能を実装します。

実装

Firebaseでプロジェクトの作成

以下にアクセスしてプロジェクトを作成します。

https://firebase.google.com

プロジェクトが作成できたらウェブアプリにFirebaseを追加します。 f:id:taku_76:20191029055411p:plain

scriptタグが表示されるので、今回作成するファイルapplication.jsに貼り付けます。

ログイン方法の設定

ログイン方法はメール / パスワードを有効にしておきます。 f:id:taku_76:20191029060127p:plain

index.htmlにdivタグを追加しておきます。

      <div>
        メールアドレス<input id="mailAddress" type="mailAddress" required/>
      </div>
      <div>
        パスワード<input id="password" type="password" required/>
      </div>
        <button id="login">ログイン</button>
        <button id="register">新規登録</button>

ユーザーを新規登録する

createUserWithEmailAndPassword メソッドにmailAddressとpasswordを渡すことでユーザーの新規登録ができます。

//新規登録処理
register.addEventListener('click', function(e) {
  var mailAddress = document.getElementById('mailAddress').value;
  var password = document.getElementById('password').value;
  
  firebase.auth().createUserWithEmailAndPassword(mailAddress, password)
  .catch(function(error) {
    alert('登録できません(' + error.message + ')');
  });
});

f:id:taku_76:20191029062622p:plain
メールアドレスとパスワードを入力して新規登録ボタンを押します。 すると以下のようにfirebaseの画面ではユーザーが登録されていることがわかります。 f:id:taku_76:20191029062343p:plain

ログイン処理を行う

signInWithEmailAndPasswordメソッドにmailAddressとpasswordを渡すことでログイン処理ができます。

//ログイン処理
login.addEventListener('click', function(e) {
  var mailAddress = document.getElementById('mailAddress').value;
  var password = document.getElementById('password').value;
  
  firebase.auth().signInWithEmailAndPassword(mailAddress, password)
  .catch(function(error) {
    alert('ログインできません(' + error.message + ')');
  });
});

そしてonAuthStateChanged メソッドを使用して正常にログインができているか判定します。正常にログインできていれば、ユーザーに関する情報を取得できます。今回はログインできたことだけを確認するためにalertでメッセージを出す以外の処理は行なっていません。

//認証状態の確認
firebase.auth().onAuthStateChanged(function(user) {
  if(user) {
    //ログイン状態
    alert("ログインに成功しました");
  }else{
    //ログアウト状態
  }
});

これで先ほど追加したユーザー情報を入力してログインを行うと以下のようになります。 f:id:taku_76:20191029064058p:plain ちなみに存在しないユーザーでログインすると以下のようなエラーが出ます。 f:id:taku_76:20191029064849p:plain これでユーザーを新規登録してログインするまでの処理は完了しました。 今回は実装を行なっていませんが、ログアウトについてはsignOutメソッドを使用することによって実装できます。

おわりに

Firebase Authenticationを使ってユーザー認証を実装しましたがかなり手軽に実装できました。 今回はメールアドレスとパスワードを使用した認証でしたが、その他の認証も簡単に実装できるとのことなので試していきたいと思います。

参考

www.topgate.co.jp

firebase.google.com

Copyright © RAKUS Co., Ltd. All rights reserved.