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

Posted 2023-02-22

【中文标题】使用 SMS Firebase 进行身份验证：错误 (auth/argument-error)

【英文标题】：Auth with SMS Firebase: Error (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

【参考方案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上。

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