AngularFire登录验证错误

我想为我们网站上的用户设置登录。用户可以注册并且数据库收集他们的电子邮件和密码，但我无法验证登录电子邮件或密码。详细信息如下..AngularFire登录验证错误

这里是登录组件：

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

我们一直在寻求帮助！

来源

2017-10-08 Henry Tobolka

' （点击）=“登录（）” - ...你不忘记什么？编写一些单元测试，并在尝试与API集成之前先通过这些单元测试，这会让问题变得更加明显。 – jonrsharpe

问题是您的事件处理程序（即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); 
}

来源

2017-10-08 22:46:07 tony19

谢谢。我了解它现在如何更好地发挥作用。在飞行中学习大部分内容。 –

@HenryTobolka没问题:) – tony19

AngularFire登录验证错误

回答

相关问题