使用Angular + @angular/fire来创建可以进行登录/注册/登出的页面

3 年 ago
清, 宇
3 minutes

我将使用Angular和Firebase创建一个可以进行登录/注册/注销的页面。我是一个完全没有修改过Angular 1之外版本的初学者。

这次的成品是

    https://github.com/hbsnow-sandbox/angular-firebase-auth/tree/1.0.0

在这里。

据说有几个在Angular中可以很好地使用Firebase的库，但是根据官方维护的情况来看，@angular/fire似乎是官方正在维护的库，所以我决定使用它（它以前好像是叫angularfire2）。

ng new angular-firebase-auth
npm i -S @angular/fire
touch src/environments/environment.local.ts

Firebase: 云端数据库

    https://firebase.google.com/

首先，你需要创建一个帐户并登录到控制台，然后创建一个适当的项目，接着从添加应用程序开始添加Web平台。

从菜单中选择“身份验证”，然后选择“登录方式”选项卡。本次选择了使用电子邮件和谷歌作为登录方式。

Screenshot from 2019-12-12 22-55-58.png

把所需的 apiKey 等信息复制粘贴到 src/environments/environment.local.ts 文件中。


export const environment = {
  production: false,
  firebase: {
    apiKey: "",
    ...
  }
};

大致的意思就是这样。我把 environment.local.ts 在 .gitignore 文件中排除在 Git 之外，但实际使用时不太清楚通常应该怎么做，即使我进行了一些调查也不够明确。

只需一个选项，将以下内容用中文进行释义：
在angular.json中进行的文件配置将在本地执行时被应用

"configurations": {
  "local": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.local.ts"
      }
    ]
  },
  ...
}

添加Firebase配置完成。运行 ng serve –configuration=local，此配置将被应用。

角度（Angular）

环境变量已经设置好了，但是还缺少一些设置，所以请参考下面的内容并添加缺失的描述。我认为主要是在 app.module.ts 文件中完成。

    1. Installation and Setup

接下来，我们会写认证代码。

ng g s shared/authentication

在这里，我们并不按照下面的文件来创建认证服务，而是自行制作。

    5. Getting started with Firebase Authentication

在参考Firebase的API时，将代码修改如下。

import { Injectable } from '@angular/core';
import { AngularFireAuth } from "@angular/fire/auth";
import { Observable } from 'rxjs';
import { auth } from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  user: Observable<firebase.User>;

  constructor(private angularFireAuth: AngularFireAuth) {
    this.user = angularFireAuth.authState;
  }

  SignUp(email: string, password: string) {
    this.angularFireAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.error(err);
      });
  }

  SignIn(email: string, password: string) {
    this.angularFireAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.error(err);
      });
  }

  SignInGoogle() {
    this.angularFireAuth
      .auth
      .signInWithPopup(new auth.GoogleAuthProvider())
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.error(err);
      });
  }

  SignOut() {
    this.angularFireAuth
      .auth
      .signOut();
  }
}

事后来看，可能应该给 SignInGoogle() 方法传递一个 firebase.auth.AuthProvider 类型的参数，但我没有去调查其他用于登录的方法，所以不太确定这真的是一个好方法。

暂时只将错误信息输出到控制台，只要能够运行就行了。

接下来是HTML和TS。

<div *ngIf="authenticationService.user | async as user; else showLogin">
  <p>{{ user?.email }} でログイン中</p>
  <button (click)="signOut()" *ngIf="user">ログアウト</button>
</div>

<ng-template #showLogin>
  <p><label>email: <input type="text" [(ngModel)]="email" placeholder="email"></label></p>
  <p><label>password: <input type="password" [(ngModel)]="password" placeholder="password"></label></p>

  <p><button (click)="signUp()">サインアップ</button></p>
  <p><button (click)="signIn()">サインイン</button></p>
  <p><button (click)="signInGoogle()">Googleでサインイン</button></p>
</ng-template>

import { Component } from '@angular/core';
import { AuthenticationService } from './shared/authentication.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-firebase-auth';
  email: string;
  password: string;

  constructor(public authenticationService: AuthenticationService) {}

  signUp() {
    this.authenticationService.SignUp(this.email, this.password);
  }

  signIn() {
    this.authenticationService.SignIn(this.email, this.password);
  }

  signInGoogle() {
    this.authenticationService.SignInGoogle();
  }

  signOut() {
    this.authenticationService.SignOut();
  }
}

在这个地方，与Firebase相比，Angular的能力明显较弱，导致我在Angular方面遇到了很多困难。我认为学习async管道和as等内容是有好处的。

这个 [Angular 4.0] 的新ngIf用法我觉得很容易理解。

bannerAds