javascript - 使用 SMS Firebase : Error (auth/argument-error) 进行身份验证

Question

我正在尝试在 Vuejs (Quasar) Applycation 上使用带有电话号码的 firebase 身份验证。按照文档，第一步是获取验证码。我相信这是我做不到的地方:

为了测试我正在使用一个文件:html模板上的div:

  <div if="recaptcha-container" 
  data-sitekey="6LcsaxsdAAAAAEBn0sPDCEncnU9564MisyRuDzD_"
  data-callback="sendForm"
  data-size="invisible">
  </div>

下面，脚本中的身份验证代码。为了安全起见，我更改了敏感键。他们是正确的，我已经通过 GoogleAuth 成功验证了，使用相同的 key

import { initializeApp } from "firebase/app"
import { getAuth, RecaptchaVerifier,GoogleAuthProvider,signInWithPopup } from "firebase/auth"

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxx",
  authDomain: "xxxxxx.firebaseapp.com",
  projectId: "dev-meetups-aa72b",
  storageBucket: "xxxxxxxx.appspot.com",
  messagingSenderId: "xxxxxx",
  appId: "xxxxxxxxxxxxxxxxx",
  measurementId: "G-xxxxxx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig)
const provider = new GoogleAuthProvider();
const auth = getAuth(app)

按照文档和一些教程，我在 Created 上初始化验证码方法:

 created() {
    this.initilizeCaptcha()
  },

方法:

initilizeCaptcha () {
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'invisible',
  'callback': (response) => {
    console.log(response)
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

可以看到，对象 RecapthaVerifier，接收来自 recaptcha html div 的 id 和另一个参数，包括对象 auth。

但是，当执行这个时，我得到了这个错误:

我无法在任何地方找到解决方案。如果需要，我可以提供身份验证参数。

完整代码 https://codepen.io/eltonjhsouza/pen/gOxzvLq

Answer 1

关于这个问题，我在 Firebase 的 SDK 的所有步骤中都进行了调试，我设法解决了它。

其中一个问题出在这里:

<div if="recaptcha-container" 
  data-sitekey="6LcsaxsdAAAAAEBn0sPDCEncnU9564MisyRuDzD_"
  data-callback="sendForm"
  data-size="invisible">
 </div>

div 的 id 属性类型错误，我输入了 IF。

在浏览器中调试代码，我意识到下面的方法是在实例auth()之前启动的；

window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'invisible',
  'callback': (response) => {
    console.log(response)
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

所以我把这个调用放在@click of button上。

我希望这个问题可以帮助别人。