Firebase提供了一種非常簡單的方法來實現設定身份驗證。這篇文章將為大家介紹如何使用AngularFire2為Angular 2 應用程式設定一個簡單的電子郵件/密碼註冊和認證工作流程。
首先建立一個新的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('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。
元件類別和範本
現在我們的auth服務已經就緒，建立一個允許登入、註冊或登出的元件也很簡單:
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();
}
}我們將服務注入元件的建構子中，然後定義本地方法，這些方法呼叫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中文網其他相關文章！
