Angular调用Firebase signInWithEmailAndPassword报auth/missing-email错误求助

问题描述 #

调用signInWithEmailAndPassword方法时触发400错误，具体错误信息如下：

POST https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyAdy0AH46hWcBLMFXR57-FrruspopK-0ao 400
2core.mjs:7643 ERROR Error: Uncaught (in promise): FirebaseError: Firebase: Error (auth/missing-email).
FirebaseError: Firebase: Error (auth/missing-email).
    at createErrorInternal (index-6bd8d405.js:474:41)
    at _fail (index-6bd8d405.js:445:11)
    at index-6bd8d405.js:976:17
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26291:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26278:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)

已确认事项：

• 已导入AngularFireAuthModule
• Firebase控制台已创建对应用户

相关代码 #

Auth Service.ts

export class AuthService {

  constructor( private afAuth: AngularFireAuth, private toastr: ToastrService) { }

  login(email, password) {
    this.afAuth.signInWithEmailAndPassword(email, password).then(logRef => {
      this.toastr.success('Logged in Succesfully'); 
    });
  }
}

登录组件.ts

constructor(private authService: AuthService) { }

ngOnInit(): void {
}

onSubmit(formValue) {
  this.authService.login(formValue.email, formValue.password); 
}

解决方案 #

auth/missing-email错误核心原因是传递给signInWithEmailAndPassword的邮箱参数为空或未正确传递，并非Firebase连接问题，按以下步骤排查修复：

1. 检查表单字段绑定
   确认模板中邮箱输入框的name属性或表单控件名称为email，示例：

   <input type="email" formControlName="email" name="email" placeholder="邮箱" />
   

   提交前在onSubmit中打印formValue，确认email字段存在且有值：

   onSubmit(formValue) {
     console.log(formValue); // 查看输出是否包含有效email值
     this.authService.login(formValue.email, formValue.password); 
   }
   

2. 添加错误捕获逻辑
   在login方法中补充错误处理，明确错误细节：

   login(email, password) {
     this.afAuth.signInWithEmailAndPassword(email, password)
       .then(logRef => {
         this.toastr.success('Logged in Succesfully'); 
       })
       .catch(error => {
         console.error('登录错误:', error);
         this.toastr.error(error.message);
       });
   }
   

3. 验证Firebase初始化配置
   确认environment.ts中的Firebase配置与控制台项目设置一致：

   export const environment = {
     production: false,
     firebase: {
       apiKey: "你的API_KEY",
       authDomain: "你的AUTH_DOMAIN",
       projectId: "你的PROJECT_ID",
       storageBucket: "你的STORAGE_BUCKET",
       messagingSenderId: "你的SENDER_ID",
       appId: "你的APP_ID"
     }
   };
   

4. 添加表单验证
   避免空值提交，在组件中设置表单验证规则：

   import { FormBuilder, Validators } from '@angular/forms';
   
   export class LoginComponent {
     loginForm = this.fb.group({
       email: ['', [Validators.required, Validators.email]],
       password: ['', Validators.required]
     });
   
     constructor(private fb: FormBuilder, private authService: AuthService) { }
   
     onSubmit() {
       if (this.loginForm.invalid) return;
       this.authService.login(this.loginForm.value.email, this.loginForm.value.password);
     }
   }
   

内容的提问来源于stack exchange，提问作者Inteshari