"Firebase 網絡電話號碼身份驗證不起作用"

Question

我已經搜索了 2 天的 html 和 JavaScript 代碼，用於在我的網站中添加 Firebase 電話號碼身份驗證。 我看到 firebaseui 做這項工作。 但它有自己的表單元素。 我還沒有找到任何文章或視頻顯示“如何在不使用 Firebaseui/nodejs 的情況下使用電話號碼進行 Firebase 網絡身份驗證。真的可以用我自己的文本框和其他按鈕來做到這一點嗎？我已經為此編寫了代碼並且它不起作用。請進行檢查或喜歡任何最好的文章，顯示我想要的確切內容。代碼：

<!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>

提前致謝。

Answer 1

有很多示例，包括 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.
  });

Answer 2

   # Try This Code. I have only add js/jquery code#
    <script>
  // Paste the config your copied earlier
   var firebaseConfig = {
    apiKey: "############################",
    authDomain: "############################",
    databaseURL: "############################",
    projectId: "############################",
    storageBucket: "############################",
    messagingSenderId: "############################",
    appId: "############################",
    measurementId: "############################"
  };
  firebase.initializeApp(firebaseConfig);
  // Create a Recaptcha verifier instance globally
  // Calls submitPhoneNumberAuth() when the captcha is verified
 //set size: "normal" to add recaptcha
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container",
    {
      size: "invisible",
      callback: function(response) {
        submitPhoneNumberAuth();
      }
    }
  );
  // This function runs when the 'sign-in-button' is clicked
  // Takes the value from the 'phoneNumber' input and sends SMS to that phone number
function submitPhoneNumberAuth() {
    $("#wait").css("display", "block");
    $("#sign-in-button").attr("disabled", true);
    var userPhone = document.getElementById("phoneNumber").value;
    if(userPhone.length != 11){
        $("#message").removeClass("alert-info");
        $("#message").addClass("alert-danger");
        $("#message").html("Please Insert 11 digit Phone Number!!!");
        $("#message").css("display", "block");
        $("#wait").css("display", "none");
        $("#sign-in-button").attr("disabled", false);
        return false;
    }
    var phoneNumber = "+88"+userPhone;
    //+88 only for bangladesh.Add your own country code
    var appVerifier = window.recaptchaVerifier;
    firebase
      .auth()
      .signInWithPhoneNumber(phoneNumber, appVerifier)
      .then(function(confirmationResult) {
        document.getElementById('codeDiv').style.display='block'; 
        document.getElementById('getCodeButton').style.display='none';
        window.confirmationResult = confirmationResult;
        $("#message").html("Please check your inbox and insert code!!!");
        $("#message").css("display", "block");
        $("#wait").css("display", "none");
    })
    .catch(function(error) {
        $("#sign-in-button").attr("disabled", false);
        $("#wait").css("display", "none");
        console.log(error.code);
        if(error.code == 'auth/invalid-phone-number'){
            $("#message").removeClass("alert-info");
            $("#message").addClass("alert-danger");
            $("#message").html("Invalid Phone Number!! Try Another Number!!!");
            $("#message").css("display", "block");
            document.getElementById('getCodeButton').style.display='block';
            document.getElementById('codeDiv').style.display='none';
        }
        else if(error.code == 'auth/too-many-requests'){
            $("#message").removeClass("alert-info");
            $("#message").addClass("alert-danger");
            $("#message").html("Too many request from this number. Try Another Number!!");
            $("#message").css("display", "block");
            document.getElementById('getCodeButton').style.display='block';
            document.getElementById('codeDiv').style.display='none';
        }

      });
  }
  // This function runs when the 'confirm-code' button is clicked
  // Takes the value from the 'code' input and submits the code to verify the phone number
  // Return a user object if the authentication was successful, and auth is complete
function submitPhoneNumberAuthCode() {
    $("#wait").css("display", "block");
    $('#confirm-code').attr("disabled", true);
    var code = document.getElementById("code").value;
    confirmationResult
      .confirm(code)
      .then(function(result) {
        var user = result.user;
        $("#wait").css("display", "block");
        $("#message").removeClass("alert-danger");
        $("#message").addClass("alert-info");
        $("#message").html("Thank you!!Code Matched!!");
        $("#message").css("display", "block");
      })
      .catch(function(error) {
        $("#wait").css("display", "none");
        $('#confirm-code').attr("disabled", false);
        console.log(error);
        $("#message").removeClass("alert-info");
        $("#message").addClass("alert-danger");
        $("#message").html("Code Not Matched!!!");
        $("#message").css("display", "block");
      });
  }
  //This function runs everytime the auth state changes. Use to verify if the user is logged in
  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        //You are logged IN from firebase
        $("#message").removeClass("alert-danger");
        $("#message").addClass("alert-info");
        $("#message").html("Congratulations!!!Logging...");
        $("#message").css("display", "block");
        var phone = user.phoneNumber;
        firebase.auth().signOut().then(function() {
         ////You are logged Out from firebase
         console.log("Firebase Signout");
        }).catch(function(error) {
         console.log("Firebase Signout Problem!!");

        });

}

"Firebase 網絡電話號碼身份驗證不起作用"

問題描述

2 個解決方案

解決方案1
1 2017-11-30 07:33:59

解決方案2
0 2019-12-10 06:30:55

"Firebase 網絡電話號碼身份驗證不起作用"

問題描述

2 個解決方案

解決方案1 1 2017-11-30 07:33:59

解決方案2 0 2019-12-10 06:30:55

解決方案1
1 2017-11-30 07:33:59

解決方案2
0 2019-12-10 06:30:55