AngularFire登录误差

Question

我正在尝试在我们的网站上为用户设置登录。用户可以注册，数据库收集他们的电子邮件和密码，但我不能验证登录电子邮件或密码。下面是更多细节..。

以下是登录组件：

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

import { Store } from '@ngrx/store';

import * as fromApp from '../../../reducers';

import * as app from '../../../core/store/app.actions';

import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Component({
  selector: 'app-client-login',
  templateUrl: './client-login.component.html',
  styleUrls: ['./client-login.component.css']
})
export class ClientLoginComponent {

  client: FormGroup;

    constructor(
      private _fb: FormBuilder,
      private _afAuth: AngularFireAuth,
      private _afDb: AngularFireDatabase,
      private _appStore: Store<fromApp.State>

    ) {
      this.buildForm();

      // this._appStore.dispatch(new app.DisplayLoading());
    }

    ngOnInit() {}

    buildForm(): void {
      this.client = this._fb.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['',Validators.required],
      });
    }

    login(email: string, password: string) {
      return this._afAuth.auth.signInWithEmailAndPassword(email, 
      password)
    }

}

这是html

<div class="container-fluid">
 <div class="row justify-content-center">
  <div class="col-sm-12 col-md-6">

      <form [formGroup]="client">   

      <h2 class="form-signin-heading">Please login</h2>
      <div class="form-group">

      <input type="text" formControlName="email" id="email" 
class="form-control" name="username" placeholder="Email Address" 
required="" autofocus="" />

      <input type="password" formControlName="password" id="password" 
class="form-control" name="password" placeholder="Password" 
required=""/>      

      <label class="checkbox">
        <input type="checkbox" value="remember-me" id="rememberMe" 
name="rememberMe"> Remember me
      </label>
    </div>

      <button (click)="login()" class="btn btn-primary" 
type="submit">Login</button>

    </form>

   </div>
  </div>
 </div>

以下是错误消息：

 {code: "auth/argument-error", message: "signInWithEmailAndPassword failed: First argument "email" must be a valid string.", ngDebugContext: DebugContext_, ngErrorLogger: ƒ}

如果你需要更多的信息，请告诉我。如果您想在我们的GitHub目录中查看该项目，请按此链接。

https://github.com/htobolka/nile-delivery

我们一直在寻求帮助！

Answer 1

问题是您的事件处理程序(即login())没有指定参数，但是login需要作为参数传入电子邮件和密码。在这种情况下，电子邮件和密码以undefined的形式传递给signInWithEmailAndPassword()，从而导致您观察到的运行时错误。

要解决这个问题，您可以更新模板以传递电子邮件和密码值：

<button (click)="login(client.get('email').value, client.get('password').value)" class="btn btn-primary" type="submit">Login</button>

或者，您可以更新login以不偏不倚地读取表单值：

login() {
  const email = this.client.get('email').value;
  const password = this.client.get('password').value;
  return this._afAuth.auth.signInWithEmailAndPassword(email, password);
}