首頁  >  文章  >  web前端  >  Angular中的Firebase身份驗證(程式碼範例)

Angular中的Firebase身份驗證(程式碼範例)

藏色散人
藏色散人原創
2019-03-23 10:07:112747瀏覽

Firebase提供了一種非常簡單的方法來實現設定身份驗證。這篇文章將為大家介紹如何使用AngularFire2為Angular 2 應用程式設定一個簡單的電子郵件/密碼註冊和認證工作流程。

Angular中的Firebase身份驗證(程式碼範例)

首先建立一個新的Firebase項目,並在Firebase控制台的Authentication(驗證)部分啟用電子郵件/密碼登入方法。

讓我們從使用npm安裝必要的套件開始,新增Firebase SDK, AngularFire2和promise-polyfill依賴項到你的專案:

$ npm install firebase angularfire2 --save
$ npm install promise-polyfill --save-exact

現在,讓我們將Firebase API和專案憑證加入項目的環境變數。如果你點擊添加Firebase到你的web應用程序,你可以在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來配置我們的app模組。也要注意,我們正在導入並提供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 { }

建立Auth服務

我們的服務將是一個允許我們登入註冊註銷用戶的中心位置,因此我們將為這三個操作定義方法。所有的身份驗證邏輯都將在服務中,這將允許我們創建不需要實作任何auth邏輯的元件,並幫助保持元件的簡單性。

使用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和signInWithEmailAndPassword。

元件類別和範本

現在我們的auth服務已經就緒,建立一個允許登入、註冊或登出的元件也很簡單:

app.component.ts

import { Component } from &#39;@angular/core&#39;;
import { AuthService } from &#39;./auth.service&#39;;

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

  constructor(public authService: AuthService) {}

  signup() {
    this.authService.signup(this.email, this.password);
    this.email = this.password = &#39;&#39;;
  }

  login() {
    this.authService.login(this.email, this.password);
    this.email = this.password = &#39;&#39;;    
  }

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

我們將服務注入元件的建構子中,然後定義本地方法,這些方法呼叫auth服務上的等效方法。我們使用public關鍵字而不是private注入服務,這樣我們也可以直接從模板存取服務屬性。

模板非常簡單,使用authService的user物件上的async管道來確定是否有登入使用者:

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和框架語法中的banana,雙向綁定到元件類別中的電子郵件和密碼值。

相關推薦:《angularjs教學

這篇文章就是關於Firebase身份驗證的相關介紹,希望對需要的朋友有幫助!

以上是Angular中的Firebase身份驗證(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn