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
我们一直在寻求帮助!
问题是您的事件处理程序(即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);
}
谢谢。我了解它现在如何更好地发挥作用。在飞行中学习大部分内容。 –
@HenryTobolka没问题:) – tony19
' (点击)=“登录()” - ...你不忘记什么?编写一些单元测试,并在尝试与API集成之前先通过这些单元测试,这会让问题变得更加明显。 – jonrsharpe