当前位置:  首页  >  前端开发  >  JavaScript

Angular中的Firebase身份验证(代码示例)

Firebase提供了一种非常简单的方法来实现设置身份验证。本篇文章将给大家介绍如何使用AngularFire2为Angular2+应用程序设置一个简单的电子邮件密码注册和认证工作流。
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;

  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

Welcome {{ (authService.user | async)?.email }}!

我们的输入字段使用ngModel和框架语法中的banana,双向绑定到组件类中的电子邮件和密码值。

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有