Firebase双因素认证与Typescript: Error (auth/argument-error)

Question

我遵循了官方文档中的代码。当您向下滚动到完整的代码时，有两件事会产生问题。首先，这看起来很奇怪:

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
const auth = getAuth();

他们在之后定义了auth用于recaptchaVerifier。但这似乎是一个打字错误，所以我只是交换了这两行。

但是我不能解决第二个问题。他们的代码是JavaScript，我的代码是TypeScript。他们使用undefined作为recaptchaVerifier定义中的参数:

const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);

构造函数的第二个参数是undefined。由于TypeScript不允许这样做，我尝试了很多方法，例如:

1. const undef: any = undefined; const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undef, auth);
2. const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', { size: 'invisible' }, auth);

但是它总是在控制台中给出这个错误:

ERROR FirebaseError: Firebase: Error (auth/argument-error).
at createErrorInternal (index-0bb4da3b.js:474:41)
at _assert (index-0bb4da3b.js:480:15)
at new RecaptchaVerifier (index-0bb4da3b.js:7369:9)

我在网上找不到任何帮助我修复这个错误的东西。

---

这是我的完整代码:

LogIn(email: string, password: string) {
const auth = getAuth();

const undef: any = undefined;
const recaptchaVerifier = new RecaptchaVerifier(
'recaptcha-container-id',
undef,
auth
);
/* It never reaches this code below here since new RecaptchaVerifier() always throws an error */

return signInWithEmailAndPassword(auth, email, password)
.then((result) => {
this.afAuth.authState.subscribe((user) => {
if (user) {
this.router.navigate(['home']);
}
});
})
.catch((error) => {
if (error.code == 'auth/multi-factor-auth-required') {
// The user is a multi-factor user. Second factor challenge is required.
const auth = getAuth();
let resolver = getMultiFactorResolver(auth, error);
const phoneInfoOptions = {
multiFactorHint: resolver.hints[0],
session: resolver.session
};
// Send SMS verification code.
const phoneAuthProvider = new PhoneAuthProvider(auth);
phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
.then((verificationId) => {
// verificationId will be needed for sign-in completion.

// Ask user for the SMS verification code via prompt (yeah, very bad UI)
const verificationCode = prompt("Enter the verification code we sent to your number");

if (verificationCode !== null) {
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
// Complete sign-in.
return resolver.resolveSignIn(multiFactorAssertion);
} else {
this.toast.error("Entered wrong code");
return null;
}
})
.then((userCredential) => {
// User successfully signed in with the second factor phone number.
this.toast.success("Code is correct. Logged in");
this.afAuth.authState.subscribe((user) => {
if (user) {
this.router.navigate(['home']);
}
});
})
.catch((error) => {
console.log(error);

// failed
this.toast.error(error.message);
});
} else if (error.code == 'auth/wrong-password') {
this.toast.error(error.message);
}
});
}

我使用Angular和angularfire。上面的代码不是直接从组件调用的，而是从服务调用的。这个服务是从我的LoginComponent中调用的。

---

编辑。我的导入是:

import { Injectable, NgZone } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
AngularFirestore,
} from '@angular/fire/compat/firestore';
import { Router } from '@angular/router';
import { child, get, getDatabase, ref, set } from "firebase/database";
import { HotToastService } from '@ngneat/hot-toast';
import firebase from "firebase/compat/app";
import { getAuth, getMultiFactorResolver, GoogleAuthProvider, PhoneAuthProvider, PhoneMultiFactorGenerator, RecaptchaVerifier, signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';

Answer 1

正如我们在评论中所说的那样，要使其工作，您需要一个带有传递id的空div，如:

<div id="recaptcha-container-id"></div>