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); 
}