使用 SMS Firebase 进行身份验证：错误（身份验证/参数错误）

Question

我\xc2\xb4m 尝试在 Vuejs (Quasar) 应用程序上使用带有电话号码的 firebase 身份验证。\n按照文档，第一步是获取验证码。我相信这是我不能正确做的地方：

\n

使用单个文件测试 i\xc2\xb4m:\nHTML 模板上的 Div：

\n

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

\n

下面是脚本中的身份验证代码。为了安全起见，我改变了敏感键。它们是正确的，I\xc2\xb4m 使用相同的密钥通过 GoogleAuth 成功进行了身份验证

\n

import { initializeApp } from "firebase/app"\nimport { getAuth, RecaptchaVerifier,GoogleAuthProvider,signInWithPopup } from "firebase/auth"\n\nconst firebaseConfig = {\n  apiKey: "xxxxxxxxxxxxxxxx",\n  authDomain: "xxxxxx.firebaseapp.com",\n  projectId: "dev-meetups-aa72b",\n  storageBucket: "xxxxxxxx.appspot.com",\n  messagingSenderId: "xxxxxx",\n  appId: "xxxxxxxxxxxxxxxxx",\n  measurementId: "G-xxxxxx"\n};\n\n// Initialize Firebase\nconst app = initializeApp(firebaseConfig)\nconst provider = new GoogleAuthProvider();\nconst auth = getAuth(app)\n

\n

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

\n

 created() {\n    this.initilizeCaptcha()\n  },\n

\n

方法：

\n

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

\n

可以看到，对象 RecapthaVerifier 从 recaptha html div 接收 id 和另一个参数，包括对象 auth。

\n

但是，当执行此操作时，我收到此错误：

\n

\n

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

\n

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

\n

Answer 1

对我来说，错误是因为我的 DIV 中有 HTML 注释。这会导致错误FirebaseError: Firebase: Error (auth/argument-error)

给出错误的代码

 <div
      id="recaptcha-container"
      class="justify-center flex"
    >
      <!-- Recaptcha Widget will be rendered here -->
 </div>

修复错误的代码

 <div
      id="recaptcha-container"
      class="justify-center flex"
 ></div>    

Answer 2

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

\n

问题之一在这里：

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n