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 { }
Create Auth Service
当社のサービスは、ユーザーの ログイン 、登録 、または ログアウト を可能にする中央の場所となります。 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('Success!', value); }) .catch(err => { console.log('Something went wrong:',err.message); }); } login(email: string, password: string) { this.firebaseAuth .auth .signInWithEmailAndPassword(email, password) .then(value => { console.log('Nice, it worked!'); }) .catch(err => { console.log('Something went wrong:',err.message); }); } logout() { this.firebaseAuth .auth .signOut(); } }
AngularFireAuth.auth で利用可能なメソッドはすべて Promise を返すので、then と catch を使用して成功とエラーのステータスをそれぞれ処理できることがわかります。
ここではcreateUserWithEmailAndPasswordとsignInWithEmailAndPasswordを使用します。
コンポーネント クラスとテンプレート
認証サービスの準備が整ったので、ログイン、登録、またはログアウトを可能にするコンポーネントの作成は簡単です。
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"> 注册 </button> <button (click)="login()" [disabled]="!email || !password"> 登录 </button> </div> <button (click)="logout()" *ngIf="authService.user | async"> 注销 </button>
入力フィールドは、フレームワーク構文の ngModel とバナナを使用して、コンポーネント クラスの電子メールとパスワードの値に双方向にバインドされています。
関連する推奨事項: 「angularjs チュートリアル 」
この記事は、Firebase 認証に関連した入門書です。困っている友人のお役に立てれば幸いです。
以上がAngular での Firebase 認証 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。