小編給大家分享一下Angular中的Firebase身份驗證怎么弄，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
Firebase提供了一種在應(yīng)用中設(shè)置身份驗證的簡單方法。在這里，我們將探討如何使用AngularFire2庫為Angular 2+應(yīng)用程序設(shè)置簡單的電子郵件/密碼注冊和身份驗證工作流程 。
第一步是創(chuàng)建一個新的Firebase項目，并在Firebase控制臺的“身份驗證”部分下啟用電子郵件/密碼登錄方法。
讓我們開始使用npm安裝必要的包。這會將Firebase SDK，AngularFire2和promise-polyfill依賴項添加到您的項目中：
$ npm install firebase angularfire2 --save
$ npm install promise-polyfill --save-exact
現(xiàn)在讓我們將Firebase API和項目憑證添加到項目的環(huán)境變量中。如果您點擊添加Firebase到您的網(wǎng)絡(luò)應(yīng)用，您可以在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模塊。另請注意，我們正在導(dǎo)入并提供AuthService。我們接下來會創(chuàng)建該服務(wù)：
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服務(wù)
我們的服務(wù)將是一個允許我們登錄，注冊或注銷用戶的中心位置，因此我們將為這3個操作定義方法。所有的身份驗證邏輯都將在服務(wù)中，這將允許我們創(chuàng)建不需要實現(xiàn)任何身份驗證邏輯的組件，并有助于保持我們的組件簡單。
您可以使用此命令使用Angular CLI為服務(wù)創(chuàng)建框架：
$ ng g s auth
這是服務(wù)的實現(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;
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，因為我們正在設(shè)置電子郵件/密碼身份驗證，但可以通過Twitter，F(xiàn)acebook或Google進(jìn)行相同的方法進(jìn)行身份驗證。
組件類和模板
既然我們的auth服務(wù)已經(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();
}
}我們在組件的構(gòu)造函數(shù)中注入服務(wù)，然后定義調(diào)用auth服務(wù)上的等效方法的本地方法。我們使用public關(guān)鍵字而不是private關(guān)注服務(wù)，以便我們也可以直接從模板訪問服務(wù)屬性。
模板非常簡單，并使用authService的用戶對象上的異步管道來確定是否有登錄用戶：
app.component.html
Welcome {{ (authService.user | async)?.email }}!
我們的輸入字段使用ngModel和框架語法中的banana，雙向綁定到組件類中的電子郵件和密碼值。
以上是“Angular中的Firebase身份驗證怎么弄”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！
