FirebaseでMonacaアプリ作ってみた

はじめに

巷で話題のFirebaseをただただ使ってみたいという記事です。

機能盛りだくさんのFirebaseですが、今回は認証機能を使ってみたいと思います。

Firebase Authentication

Firebase Authentication には、バックエンド サービス、使いやすい SDK、アプリでのユーザー認証に使用できる UI ライブラリが用意されています。Firebase Authentication では、パスワードや一般的なフェデレーション ID プロバイダ(Google、Facebook、Twitter)などを使用した認証を行うことができます。(公式サイトより)

Firebaseの設定

まずはじめにFirebaseのコンソールにアクセスし、「新規プロジェクトを作成」ボタンをクリックしてプロジェクトを作成します。

console-firebase-google-com-pli1ipad

プロジェクト名と国/地域を入力し、「プロジェクトを作成」ボタンをクリックします。

console-firebase-google-com-pli1ipad-1

プロジェクトを作成すると、以下のような画面になります。今回はMonacaアプリで使用するため、「ウェブアプリにFirebaseを追加」ボタンをクリックして下さい。

console-firebase-google-com-pli1ipad-2

すると、コードが生成されますので、コピーして下さい。

一旦モーダルを閉じ、画面左のAuthenticationをクリックし、ログイン方法タブを選択して下さい。

console-firebase-google-com-pli1ipad-4

「メール / パスワード」を選択し、「有効にする」をオンにして、「保存」ボタンをクリックして下さい。

console-firebase-google-com-pli1ipad-5

これで、Firebaseの設定は完了です。

 

Monacaアプリの作成

続いて、アプリを作成していきます。

Monacaにログインして、新規プロジェクトを作成します。

今回は「Onsen UI V2 Angular 1 Minimum」を選択しました。

monaca-mobi-ja-dashboardipad

エディタ画面を開き、index.htmlの</body>直前に先程、コピーしたコードを挿入します。

ide-monaca-mobi-project-5816751cfd17349060b8632b-_ga1-86042968-1907925374-1459286980ipad

続いて、画面を作成していきましょう。

下記3つの機能を実装します。

  • 新規登録
  • ログイン
  • ログアウト

<ons-page>タグ内を下記のように変更して下さい。

<ons-page ng-controller="HelloController as hello">
    <ons-toolbar>
      <div class="center">ログイン</div>
    </ons-toolbar>
    <section style="margin: 10px;" ng-hide="hello.isLoggedIn">
      <p>メールアドレス</p>
      <p>
        <ons-input modifier="underbar" ng-model="hello.newMail" placeholder="メールアドレス" float></ons-input>
      </p>
      <p>パスワード</p>
      <p>
        <ons-input modifier="underbar" ng-model="hello.newPassword" placeholder="password" type="password" float></ons-input>
      </p>
      <ons-button ng-click="hello.regi()">新規登録</ons-button>
    </section>
    <section style="margin: 10px;" ng-hide="hello.isLoggedIn">
      <p>メールアドレス</p>
      <p>
        <ons-input modifier="underbar" ng-model="hello.mail" placeholder="メールアドレス" float></ons-input>
      </p>
      <p>パスワード</p>
      <p>
        <ons-input modifier="underbar" ng-model="hello.password" placeholder="password" type="password" float></ons-input>
      </p>
      <ons-button ng-click="hello.login()">ログイン</ons-button>
    </section>
    <section style="margin: 10px;" ng-show="hello.isLoggedIn">
      <ons-button ng-click="hello.logout()">ログアウト</ons-button>
    </section>
  </ons-page>

続いて、ボタンが押された時の処理を記述します。

下記のように<script>タグ内を変更して下さい。

var _this;
ons.bootstrap()
  .controller('HelloController', function($timeout) {
    _this = this;
    this.newMail;
    this.newPassword;
    this.mail;
    this.password;
    this.isLoggedIn;
    this.$timeout = $timeout;

    // 新規ユーザ登録
    this.regi = function() {
      // 新規ユーザーの登録機能
      firebase.auth().createUserWithEmailAndPassword(this.newMail, this.newPassword).catch(function(error) {
        alert(error.message);
      });
    }

    // ログイン
    this.login = function() {
      // 新規ユーザーの登録機能
      firebase.auth().signInWithEmailAndPassword(this.mail, this.password).catch(function(error) {
        alert(error.message);
      });
    }

    // ログアウト
    this.logout = function() {
      firebase.auth().signOut();
    }
  });
ons.ready(function() {
  // 認証状態変更検知
  firebase.auth().onAuthStateChanged(function(user) {
    _this.$timeout(function() {
      if (user) {
        // ログイン状態
        _this.isLoggedIn = true;
      } else {
        // ログアウト状態
        _this.isLoggedIn = false;
      }
    })
  });
});

これで一通り、実装が終わりました。

 

確認

画面を操作しながら確認して行きましょう。

まずは、新規登録です。

メールアドレスとパスワードを入力して、「新規登録」ボタンをクリックして下さい。

実際にユーザが登録されたか、確認してみましょう。

Firebaseの画面に戻り、「ユーザ」タブをクリックして下さい。

すると、先程入力した情報でユーザが作成されています!

console-firebase-google-com-pli1ipad-6

続いてログインです。

先程入力した、メールアドレスとパスワードでログインしてみましょう。

「ログイン」ボタンをクリックすると、ログインが成功し、「ログアウト」ボタンが現れたかと思います。

「ログアウト」ボタンをクリックすると、再度、ログイン画面になるかと思います。

これで、一通り認証機能を実装することが出来ました。

今回はメールアドレスとパスワードでログインしましたが、facebook、twitter、githubなどのサービスを使って認証機能も簡単に実装できるので、ぜひお試し下さい。

Monacaアプリのお問い合わせ

お問い合わせはこちら

コメントを残す

メールアドレスが公開されることはありません。