Angular Firebase の Auth 機能 ログイン実装

概要

• Angular CLI で Firebase メール&パスワードログインを実装する

Firebaseプロジェクトを作成する

• Firebase コンソールからプロジェクトを作成する
• 作成したプロジェクトのAuthenticationからログイン方法のメール/パスワードを有効にする

Angularのロジック

• package.jsonにangularfire2とfirebaseを追加する

package.json

{
    ...
    "angularfire2": "^4.0.0-rc.1",
    "firebase": "^4.3.0",
    ...
}

• ログイン処理の一部

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthenticationService {

  private user: Observable<firebase.User>;
  
  constructor(private afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }

  login(user: User) {
    return this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password);
  }

  logout() {
    return this.afAuth.auth.signOut();
  }

}

• app.module.ts AngularFire系をimportsに追加する

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { environment } from '../environments/environment';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AppComponent } from './app.component';

import { AuthenticationService } from './services/authentication.service';

import { appRoutes } from '../routes';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  providers: [
    AuthenticationService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• environment に Firebaseの設定を追加する
• 設定内容はFirebaseコンソール->"ウェブアプリに Firebase を追加"のconfig部分をコピーする

export const environment = {
  production: false,
  firebase: {
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: ""    
  }
};

Google APIで403が出る場合

• 実行して403エラーが出る場合はGoogle APIのIdentity Toolkit API を有効にする

# こんなエラーが出たらGoogle APIのIdentity Toolkit API を有効にする
https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=hogehoge 403 ()

ログイン機能はこれで出来る。Firebaseは簡単で便利

今回のコード GitHub
ng new してからのログイン機能実装差分