网络上的 Firebase 电话号码身份验证答案

【问题标题】：Firebase phone number authentication on web网络上的 Firebase 电话号码身份验证
【发布时间】：2018-01-10 02:07:45
【问题描述】：

我尝试使用此代码进行 Firebase 电话号码身份验证：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Firebase Phone Number Auth
        </title>
        </head>
        <body>
            Updated
            <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
            <script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp.com",
    databaseURL: "https://groupinger-users.firebaseio.com",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot.com",
    messagingSenderId: "432661298034"
  };
  firebase.initializeApp(config);
  </script>
  <script>
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign- in-button', { 
  'size': 'invisible', 
  'callback': function(response) { 
  // reCAPTCHA solved, allow signInWithPhoneNumber. 
  onSignInSubmit(); 
  } 
  });   firebase.auth().signInWithPhoneNumber("+91XXXXXXXXXX", window.recaptchaVerifier) 
    .then((confirmationResult) => { 
    // At this point SMS is sent. Ask user for code. 
    alert('A confirmation message was just sent.');
    var code = window.prompt('Please enter the 6 digit code'); 
    return confirmationResult.confirm(code); 
    }).then((result) => { 
    console.log(result); 
    // User is now signed in and accessible via result.user. 
    }).catch((error) => { 
    // Error occurred. 
    }); 
  </script>
 </body>
</html>

但它不起作用。我是 Firebase 的真正新手。请有人帮忙。（注意：您也可以在 Localhost 上进行测试。）代码位于https://GroupinGer.cu.ma/ph/ 另外，我想在另一个名为 details.html 的文件中显示用户数据（电话号码、UID 等）。我试过这段代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Logged in</title>
   </head>
   <body>
      Your details are shown below.
      <br>
        <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
                <script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp.com",
    databaseURL: "https://groupinger-users.firebaseio.com",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot.com",
    messagingSenderId: "432661298034"
  };
  firebase.initializeApp(config);
</script>
<script>
    var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);
        alert(credential);
        alert('nope.');
</script>
   </body>
</html>

也请看一下。再次，非常感谢。

【问题讨论】：

您可以通过访问给定的网址尝试检查控制台。
您不应公开发布 API 密钥。

标签： javascript firebase firebase-authentication

【解决方案1】：

首先，你需要像这样初始化一个recaptchaVerifier：

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-
in-button', {
  'size': 'invisible',
  'callback': function(response) {
   // reCAPTCHA solved, allow signInWithPhoneNumber.
   onSignInSubmit();
 }
});

其次，您的代码有语法错误。请尝试以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Firebase Phone Number Auth</title>
</head>
<body>
  <form>
    <input type="text" id="verificationcode" value="enter verification">
    <input type="button" value="Submit" onclick="myFunction()">
  </form>
  <div id="recaptcha-container"></div>
  <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
  <script type="text/javascript">
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp.com",
    databaseURL: "https://groupinger-users.firebaseio.com",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot.com",
    messagingSenderId: "432661298034"
  };
  firebase.initializeApp(config);
</script>
<script type="text/javascript">
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
  firebase.auth().signInWithPhoneNumber("replace with your phone number with country code, start with +1 if US.", window.recaptchaVerifier) 
  .then(function(confirmationResult) {
    window.confirmationResult = confirmationResult;
    console.log(confirmationResult);
  });
  var myFunction = function() {
    window.confirmationResult.confirm(document.getElementById("verificationcode").value)
    .then(function(result) {
      console.log(result);
    }).catch(function(error) {
      console.log(error);
    });
  };
  </script>
</body>
</html>

更多细节可以参考 firebase auth doc 的 phone auth 部分。 https://firebase.google.com/docs/auth/web/phone-auth

【讨论】：

@user8984670 更新了，可以再试一次吗？
我想添加类似 ´firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION) .then(function() { // 现有和未来的 Auth 状态现在持久化的代码// 仅在当前会话中。关闭窗口将清除任何现有状态 // 即使用户忘记注销。 // ... // 新登录将通过会话持久性进行持久化。 return firebase.auth( ).signInWithEmailAndPassword(email, password); }) .catch(function(error) { // 在这里处理错误。var errorCode = error.code; var errorMessage = error.message; });´
怎么做？
这是本主题的最后一个问题。请告诉我如何提醒用户数据。
我在 Firebase 文档中的变量中没有找到任何代码来登录用户的电话号码。