使用 SMS Firebase 进行身份验证：错误 (auth/argument-error)答案

【问题标题】：Auth with SMS Firebase: Error (auth/argument-error)使用 SMS Firebase 进行身份验证：错误 (auth/argument-error)
【发布时间】：2021-12-21 10:52:36
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript firebase vue.js firebase-authentication quasar

【解决方案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上。

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

【讨论】：