Question

我尝试使用此代码进行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("+919072644297", 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>

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

Answer 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

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

1 个答案: