Ember.jsでFirebase Authを使う

Ember.jsで、FirebaseのAuth機能を使います。

ソースコード

流れ

セットアップ

# Ember.jsの新規プロジェクト生成
ember new ...
cd ...

# 必要なライブラリをインストール
ember install emberfire@next
ember install ember-simple-auth

# firebaseのセッションストアを作成
ember generate firebase-session-store application

Firebaseプロジェクトの作成

コンソール（ https://console.firebase.google.com/ ）から新規プロジェクトを作成します。そして、ウェブアプリを追加し、その認証情報を https://github.com/firebase/emberfire/blob/master/docs/guide/installation.md#2-configure-firebase を参考に設定します。また、FirebaseコンソールのAuthenticationからGoogleアカウントによる認証を有効化します。

テンプレートの修正

ログイン出来るかどうかだけみたいので、下記のようなシンプルなテンプレートにします。

{{#if session.isAuthenticated}}
  {{ session.data.authenticated.user.displayName }} さん
  <button {{action "logout"}}>Sign out</button>
  {{outlet}}
{{else}}
  <button {{action "login"}}>Google経由でログインしてください</button>
{{/if}}

コントローラーの作成

emberfireの公式例を見るとRouteでやっているのですが、同じようにやると上手く出来ませんでした。代わりにコントローラーを作成します。

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import firebase from 'firebase/app';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @service
  session;

  @service
  firebaseApp;

  @action
  logout() {
    return this.session.invalidate();
  }

  @action
  async login() {
    const auth = await this.firebaseApp.auth();
    const provider = new firebase.auth.GoogleAuthProvider();
    const result = await auth.signInWithPopup(provider);
    return result;
  }
}

実行

npm run start

で開始し、localhost:4200を開きます。

ボタンが出るので押すと、Googleのログイン画面がポップアップウィンドウで出てきます。そこで許可すると、下記のようにログインすることが出来ます。