Angular での Firebase 認証

Firebase は、アプリで認証をセットアップする簡単な方法を提供します。ここでは、AngularFire2 ライブラリを使用して、Angular 2 アプリケーションの簡単な電子メール/パスワードの登録と認証のワークフローをセットアップする方法を検討します。

最初のステップは、新しい Firebase プロジェクトを作成し、Firebase コンソールの [認証] セクションでメール/パスワードによるログイン方法を有効にすることです。

npm を使用して必要なパッケージのインストールを開始しましょう。これにより、Firebase SDK、AngularFire2、Promise-polyfill の依存関係がプロジェクトに追加されます。

$ npm install firebase angularfire2 --save

$ npm install promise-polyfill --save-exact

次に、Firebase API とプロジェクトの認証情報をプロジェクトの環境変数に追加しましょう。 [Web アプリに Firebase を追加] をクリックすると、Firebase コンソールで次の値を見つけることができます:

src/environments/environment.ts

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

次に、 AngularFireModule と AngularFireAuthModule を使用してアプリ モジュールを構成します。 AuthService をインポートして提供していることにも注意してください。次にサービスを作成します:

app.module.ts

// ...

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AuthService } from './auth.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

認証サービスの作成

私たちのサービスユーザーのログイン、登録、ログアウトを可能にする中心的な場所であるため、これら 3 つのアクションのメソッドを定義します。すべての認証ロジックがサービス内にあるため、認証ロジックを実装する必要のないコンポーネントを作成でき、コンポーネントをシンプルに保つことができます。

このコマンドを使用すると、Angular CLI を使用してサービスのフレームワークを作成できます:

$ ng g s auth

これは、AngularFireAuth を利用したサービスの実装です:

auth.service.ts

import { Injectable } from '@angular/core';

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

import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;

  constructor(private firebaseAuth: AngularFireAuth) {
    this.user = firebaseAuth.authState;
  }

  signup(email: string, password: string) {
    this.firebaseAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Success!&#39;, value);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });    
  }

  login(email: string, password: string) {
    this.firebaseAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Nice, it worked!&#39;);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });
  }

  logout() {
    this.firebaseAuth
      .auth
      .signOut();
  }

}

AngularFireAuth.auth で利用可能なメソッドはすべて Promise を返すので、then と catch を使用して成功とエラーのステータスをそれぞれ処理できることがわかります。

電子メール/パスワード認証を設定しているため、ここでは createUserWithEmailAndPassword と signedInWithEmailAndPassword を使用していますが、Twitter、Facebook、または Google 経由での認証にも同じ方法を使用できます。

コンポーネント クラスとテンプレート

認証サービスが配置されたので、ログイン、登録、またはログアウトを可能にするコンポーネントの作成は非常に簡単です。

app.component.ts

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({ ... })
export class AppComponent {
  email: string;
  password: string;

  constructor(public authService: AuthService) {}

  signup() {
    this.authService.signup(this.email, this.password);
    this.email = this.password = '';
  }

  login() {
    this.authService.login(this.email, this.password);
    this.email = this.password = '';    
  }

  logout() {
    this.authService.logout();
  }
}

コンポーネントのコンストラクターにサービスを挿入し、認証サービスで同等のメソッドを呼び出すローカル メソッドを定義します。テンプレートから直接サービス プロパティにもアクセスできるように、private ではなく public キーワードを使用してサービスに焦点を当てます。

テンプレートは非常に単純で、authService のユーザー オブジェクトで非同期パイプを使用して、ログインしているユーザーがいるかどうかを判断します:

app.component.html

<h1 *ngIf="authService.user | async">Welcome {{ (authService.user | async)?.email }}!</h1>

<div *ngIf="!(authService.user | async)">
  <input type="text" [(ngModel)]="email" placeholder="email">
  <input type="password" [(ngModel)]="password" placeholder="email">

  <button (click)="signup()" [disabled]="!email || !password">
    Signup
  </button>

  <button (click)="login()" [disabled]="!email || !password">
    Login
  </button>
</div>

<button (click)="logout()" *ngIf="authService.user | async">
  Logout
</button>

入力フィールドは、フレームワーク構文の ngModel とバナナを使用して、コンポーネント クラスの電子メールとパスワードの値に双方向にバインドされています。 ＃＃＃＃＃＃仕上げる！ Firebase Authentication を使用してアプリに認証を追加するのはとても簡単です。

以上がAngular での Firebase 認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。