Вход в систему электронной почты Angular 7 Firebase не работает

Question

Итак, мне удалось зарегистрировать своих пользователей, используя электронную почту и пароль, успешно следуя этому документу Firebase Auth: https://firebase.google.com/docs/auth/web/password-auth

Но при попытке войти в систему с использованием тех же учетных данных, я просто получаю странную ошибку вКонсоль Chrome:

Я никогда не видел подобной ошибки и даже не понимаю, что это значит или чего она хочет от меня.

Терминальная консоль выдает это:

src/app/login/login.component.ts(6,16): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try "npm i @types/node".

src/app/register/register.component.ts(5,16): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try npm i @ types / node .

src/app/services/auth.service.ts(5,10): error TS2305: Module '"/Users/laimis/Desktop/Steen Angular chapters/angular-draganddrop/node_modules/rxjs/Observable"' has no exported member 'Observable'.

Код:

register.component.html

<div class="container">
<form [formGroup]="form" (ngSubmit)="signInWithEmail()">
    <div class="form-group">
       <label for="email">Email</label>
        <input type="email" class="form-control" formControlName="email">
       <div *ngIf="form.controls.email.touched
        && !form.controls.email.valid" class="alert alert-danger">
            Email is required
       </div>
    </div>
    <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" formControlName="password">
    <div *ngIf="form.controls.password.touched && form.controls.password.errors">
        <div *ngIf="form.controls.password.errors.invalidLogin"
class="alert alert-danger">
            Email or password is invalid.
        </div>
        <div *ngIf="form.controls.password.errors.required"
class="alert alert-danger">
            Password is required.
        </div>
        <div *ngIf="form.controls.password.errors.cannotContainSpace"
class="alert alert-danger">
            Password cannot contain space.
        </div>
    </div>
</div>

    <button class="btn btn-primary" type="submit">Register</button>

</form>
</div>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { PasswordValidator } from '../login/passwordValidator';
import { AuthService } from '../services/auth.service';
var firebase = require('firebase');

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  form: FormGroup;

  constructor(fb: FormBuilder, private authService: AuthService) {
    this.form = fb.group({
  email:['',Validators.required ],
  password:['',Validators.compose([Validators.required,
    PasswordValidator.cannotContainSpace])]
    })
   }

   signInWithEmail() {
     firebase.auth().createUserWithEmailAndPassword(this.form.controls['email'].value, this.form.controls['password'].value)
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });
     console.log(this.form.controls['email'].value);
   }
}

login.component.html

<div class="container">
<form [formGroup]="form" (ngSubmit)="login()">
    <div class="form-group">
       <label for="email">Email</label>
        <input type="email" class="form-control" formControlName="email">
       <div *ngIf="form.controls.email.touched
        && !form.controls.email.valid" class="alert alert-danger">
            Email is required
       </div>
    </div>
    <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" formControlName="password">
    <div *ngIf="form.controls.password.touched && form.controls.password.errors">
        <div *ngIf="form.controls.password.errors.invalidLogin"
class="alert alert-danger">
            Email or password is invalid.
        </div>
        <div *ngIf="form.controls.password.errors.required"
class="alert alert-danger">
            Password is required.
        </div>
        <div *ngIf="form.controls.password.errors.cannotContainSpace"
class="alert alert-danger">
            Password cannot contain space.
        </div>
    </div>
</div>

    <button class="btn btn-primary" type="submit">Login</button>
</form>
</div>

login.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { PasswordValidator } from './passwordValidator';
import { LoginService } from './login.service';
var firebase = require('firebase');

@Component({
    selector:'login',
    templateUrl: 'login.component.html'
})
export class LoginComponent  {

    form: FormGroup;

    constructor(fb: FormBuilder, private _loginService: LoginService){

        this.form = fb.group({
            email:['',Validators.required ],
      password:['',Validators.compose([Validators.required,
PasswordValidator.cannotContainSpace])]
        })
    }

    login(){
   firebase.auth().signInWithEmailAndPassword(this.form.controls['email'].value, this.form.controls['password'].value).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});
    }
}

РЕДАКТИРОВАТЬ: На данный момент я просто следовал официальным документам Firebase для проверки подлинности, но после проверки некоторых онлайн-учебников для проверки подлинности электронной почты Firebase, я вижу, что все используют AngularFire2 вместо Firebase API.AngularFire2 кажется намного более сложным, и их документы по github auth действительно плохие, есть только один пример и не более того, но эти учебники, кажется, бросают много методов для аутентификации на экземпляр AngularFire.auth.Я не понимаю, откуда они берутся, поскольку документы GitHub ничего не охватывают.

Какой из них мне следует использовать?

Answer 1

измените свой оператор импорта firebase с:

var firebase = require('firebase');

на:

import { auth } from 'firebase/app';

, тогда вы сможете реализовать свой вход в поток следующим образом:

login.component.ts

constructor(private authService: AuthService) {}

async login() {
  var email = this.form.controls['email'].value;
  var password = this.form.controls['password'].value;
  await this.authService.loginWithEmailAndPassword(email, password);
}

auth.service.ts (используя firebase напрямую):

import { Injectable } from '@angular/core';
import { auth } from 'firebase/app';

export interface User {
  uid: string;
  displayName?: string;
  email: string;
  photoURL?: string;
}

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  async loginWithEmailAndPassword(email: string, password: string) {
    return auth().signInWithEmailAndPassword(email, password)
           .then(result => {
             if (result.user) {
               var user = result.user;
             }
           })
           .catch(error => {
             console.error(error);
           });
  }

  async signOut() {
    await auth().signOut();
    console.log('You've been signed out!');
  }

}

auth.service.ts (используя AngularFire2):

import { Injectable, NgZone } from '@angular/core';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';

export interface User {
  uid: string;
  displayName?: string;
  email: string;
  photoURL?: string;
}

@Injectable({
  providedIn: 'root'
})

export class AuthService {

  user: Observable<User>;

  constructor(
    private afAuth: AngularFireAuth, 
    private afs: AngularFirestrore,
    private zone: NgZone,
    private router: Router
    ) {
      this.user = this.afAuth.authState.pipe(switchMap(user => {
        if (user) {
          return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
   }));
  }

  async registerWithEmailAndPassword(email: string, password: string) {
    var regResult = await this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .catch(error => {
        var errorCode = error.code;
        if (errorCode == 'auth/email-already-in-use') {
          console.error('Email already registered, please login...');
          localStorage.setItem('userEmail', email);
          this.zone.run(() => this.router.navigate(['login']));
        }
      });
      if (regResult != null) {
        var user = this.afAuth.auth.currentUser;
        await this.createNewUserDoc(regResult);
        this.router.navigate(['']);
      }
  }

  async loginWithEmailAndPassword(email: string, password: string) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
           .then(result => {
             if (result.user) {
               var user = result.user;
             }
           })
           .catch(error => {
             console.error(error);
           });
  }

  async createNewUserDoc(regResult) {
    console.log('Creating new user doc in firestore...');
    return await this.afs.doc(`users/${regResult.user.uid}`).set({
      uid: regResult.user.uid,
      email: regResult.user.email
    }, { merge: true })
    .catch(error => console.error('Error creating user doc: ', error));
  }

  async signOut() {
    await this.afAuth.auth.signOut();
    console.log('You've been signed out!');
    this.router.navigate(['login']);
  }

}

register.component.ts:

constructor(private authService: AuthService) {}

signInWithEmail() {
  var email = this.form.controls['email'].value;
  var password = this.form.controls['password'].value;
  this.authService.registerWithEmailAndPassword(email, password);
}