Firebase

Firebase Authenticationでメール認証機能の作成

  /

こんにちは！ともです(@_tomo_engineer)！

最近Vue.jsで簡単なアプリを作成していて認証機能をどうしようか考えていた所、Firebase AuthenticationというGoogleが提供しているサービスを知りました。

この記事ではFirebase Authenticationで認証機能を作る方法についてまとめます。

Firebase Authenticationとは

Firebase AuthenticationとはGoogleが運営するFirebaseが提供する認証サービスです。

BaaS(Backend as a service)と呼ばれるもので、バックエンドの機能を提供するサービスです。

Web(JavaScript)やAndroid(Java)、iOS(Objective C)、C++、Node.js、Unityなど多くの言語に対応しています。

Firebaseにログインして有効化

まずはFirebaseでサインインします。

『プロジェクトを追加→プロジェクト名を入力→同意→プロジェクトを作成』という流れです。

サイドバーにあるAuthenticationをクリックします。

ログイン方法の設定をクリックします。

TwitterやFacebookやメールアドレスの認証などがありますが、今回はメール認証を選択し有効にします。

これで準備は終わりです。サイドバーのProject Overviewに移動します。

赤枠で囲った箇所をクリックします。

上記のスクリプを利用することによりfirebaseを利用することができます。

アカウント作成

Email+PasswordやTwitterなどのSNS認証も作れます。今回はEmail+Passwordでの認証を作成します。まずはアカウントの作成機能を作成します。

次のようなhtmlファイルを作成してください。configに関してはご自身のものを利用してください。

<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <div class="content">
    <form class="col-md-6">
        <div class="form-group">
            <label for="control-label">メールアドレス</label>
            <input id="email" type="email" class="form-control" placeholder="email">
        </div>
        <div class="form-gorup">
            <label for="control-label">パスワード</label>
            <input id="pass" type="password" class="form-control" placeholder="password">
        </div>
        <button id="submit" type="button" class="btn btn-primary">アカウント作成</button>
    </form>
  </div>
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBUB7hCWLmnAE6bFCAgFDzg-Ws1KWjeKVM",
    authDomain: "test-project-3c0e4.firebaseapp.com",
    databaseURL: "https://test-project-3c0e4.firebaseio.com",
    projectId: "test-project-3c0e4",
    storageBucket: "test-project-3c0e4.appspot.com",
    messagingSenderId: "540040576830"
  };
  // firebaseインスタンスの初期化
  firebase.initializeApp(config);

  $(function(){
    $('#submit').on('click', function(){
      var email = $('#email').val();
      var pass  = $('#pass').val();
      firebase.auth().createUserWithEmailAndPassword(email, pass)
        .then(user => {
          console.log('アカウント作成成功');
        })
        .catch(user => {
          console.log('アカウント作成失敗');
        });
    });
  });
</script>
</body>
</html>

emailとパスワードを入力するとアカウントを作成することができます。

firebaseインスタンスのcreateUserWithEmailAndPasswordメソッドを利用しアカウントを作成します。

アカウントを作成成功の場合はthenへ、失敗の場合はcatchへの処理に移ります。このメソッドを呼ぶだけでアカウントを作成できるというのは驚きです。

Firebaseでアカウントを作成できているか確認します。

このようにアカウントが作成できていることがわかります。

サインイン機能の作成方法

作成したアカウントでログインする機能について見ていきます。

firebase.auth().signInWithEmailAndPassword(email, password);

こちらのメソッドでユーザの入力値からFirebase Authenticationに登録されたユーザか確認します。

認証中のユーザかの確認

this.firebase.auth().onAuthStateChanged(user => {
      if (user) {
        // 認証中！
      } else {
        // 非認証
      }
})

こちらのメソッドで確認することができます。認証中のユーザであれば上記のuserに認証中のユーザ情報が格納されています。

最後に

Firebaseのアカウントの作成から認証機能の作成までを確認しました。

サクッと認証機能が作れるのは驚きでした。Firebaseでは認証以外にも沢山の機能が提供されておりDatabaseも提供しています。

サーバサイド言語がまだ未修得の方はバックエンドはFirebaseに任せてアプリ開発もできます。

サーバサイドを学習コストに比べFirebaseの学習コストは低いので、フロント専門でアプリを作りたい人はオススメです。

一度Firebaseで遊んで見てはいかがでしょうか？

関連記事はこちら