小編給大家分享一下Angular中Firebase身份驗證的案例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

為天水等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及天水網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為網(wǎng)站設計、做網(wǎng)站、天水網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

Firebase提供了一種非常簡單的方法來實現(xiàn)設置身份驗證。本篇文章將給大家介紹如何使用AngularFire2為Angular 2+應用程序設置一個簡單的電子郵件/密碼注冊和認證工作流。

首先創(chuàng)建一個新的Firebase項目，并在Firebase控制臺的Authentication（身份驗證）部分啟用電子郵件/密碼登錄方法。

讓我們從使用npm安裝必要的包開始，添加Firebase SDK, AngularFire2和promise-polyfill依賴項到你的項目:

$ npm install firebase angularfire2 --save

$ npm install promise-polyfill --save-exact

現(xiàn)在，讓我們將Firebase API和項目憑據(jù)添加到項目的環(huán)境變量中。如果你點擊添加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，接下來將創(chuàng)建該服務:

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 { }

創(chuàng)建Auth服務

我們的服務將是一個允許我們登錄、注冊或注銷用戶的中心位置，因此我們將為這三個操作定義方法。所有的身份驗證邏輯都將在服務中，這將允許我們創(chuàng)建不需要實現(xiàn)任何auth邏輯的組件，并幫助保持組件的簡單性。

使用Angular CLI為服務創(chuàng)建骨架，如下命令：

$ ng g s auth

下面是該服務的實現(xiàn)，使用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分別處理成功和錯誤狀態(tài)。

我們在這里使用createUserWithEmailAndPassword和signInWithEmailAndPassword。

組件類和模板

現(xiàn)在我們的auth服務已經(jīng)就緒，創(chuàng)建一個允許登錄、注冊或注銷的組件也很簡單:

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();
  }
}

我們將服務注入組件的構造函數(shù)中，然后定義本地方法，這些方法調(diào)用auth服務上的等效方法。我們使用public關鍵字而不是private注入服務，這樣我們也可以直接從模板訪問服務屬性。

模板非常簡單，使用authService的user對象上的async管道來確定是否有登錄用戶:

app.component.html

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

<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，雙向綁定到組件類中的電子郵件和密碼值。

看完了這篇文章，相信你對Angular中Firebase身份驗證的案例有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：Angular中Firebase身份驗證的案例-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://aaarwkj.com/article30/copdso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站設計公司、品牌網(wǎng)站設計、搜索引擎優(yōu)化、網(wǎng)站建設、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)