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('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身份验证(代码示例)的具体内容,更多请关注百分百源码网其它相关文章!