javascript - Firebase 网络电话号码身份验证不起作用

标签 javascript firebase firebase-authentication

我已经在谷歌上搜索了 2 天的 html 和 JavaScript 代码,以便在我的网站中添加 firebase 电话号码身份验证。 我看到 firebaseui 正在做这项工作。 但它有自己的形式元素。 我还没有找到任何文章或视频显示“如何使用电话号码进行 Firebase Web 身份验证,而不使用 Firebaseui/nodejs。 真的可以用我自己的文本框和其他按钮来做到这一点吗? 我为此编写了一段代码,但它不起作用。 请进行检查或选择任何最好的文章,展示我想要的确切内容。 代码:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Untitled</title>
      <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
      <script>
  // Initialize Firebase
  var config = {
    apiKey: "*****",
    authDomain: "********.firebaseapp.com",
    databaseURL: "https://********.firebaseio.com",
    projectId: "*******",
    storageBucket: "*********.appspot.com",
    messagingSenderId: "**********"
  };
  firebase.initializeApp(config);
      </script>
   </head>
   <body>
            <script>
var phoneNumber = getPhoneNumberFromUserInput();
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
    alert('sms sent');
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
}).catch(function (error) {
// Error; SMS not sent
// ...
alert('sms not send');
});
      </script>
      <form>
      <input type="tel" id="number">
        <input type="number" id="otp_code">
        <input type="submit">
        </form>
   </body>
</html>

提前致谢。

最佳答案

有很多示例,包括 Firebase GitHub 示例快速入门应用:https://github.com/firebase/quickstart-js/blob/master/auth/phone-invisible.html

另请查看官方文档:https://firebase.google.com/docs/auth/web/phone-auth

以下是使用电话号码登录用户的快速片段:

firebase.auth().signInWithPhoneNumber("+xxxxxxxx", window.recaptchaVerifier)
  .then((confirmationResult) => {
    // At this point SMS is sent. Ask user for code.
    let code = window.prompt('Please enter the 6 digit code');
    return confirmationResult.confirm(code);
  })
  .then((result) {
    // User is now signed in and accessible via result.user.
  });
  .catch((error) => {
    // Error occurred.
  });

关于javascript - Firebase 网络电话号码身份验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47552584/

相关文章:

node.js - firebase node.js/express.js 添加多个 firebase 函数

reactjs - 如何修复从 firestore 数据库获取数据时 react 中的状态更新

python - Firebase python admin sdk isNewUser ()

iOS Firebase 身份验证错误

javascript - 使用 Jquery 有条件地将类添加到图像

javascript - 如何在 ecma6 中创建一个封装类?

firebase - Actions on Google - 登录并交换 UID 的访问 token

swift - Firebase AuthUI 对于“使用 Apple 登录”中的显示名称和电子邮件返回 nil

javascript - 上传时保持图像比例

javascript - 框架7 : Navbar hidden when I'm move to anothers views