javascript - Firebase phone number authentication on web

I tried this code for making Firebase phone number authentication:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Firebase Phone Number Auth
        </title>
        </head>
        <body>
            Updated
            <script src=".8.1/firebase.js"></script>
            <script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp",
    databaseURL: "",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot",
    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>

But it's not working. I'm a real newbie on Firebase. Please somebody help. (Note: you can also test it on Localhost.) The code is live at / Also, I would like to show the user data(Phone number, UID etc.) In another file called details.html. I tried this code:

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

Please have a look at it too. Again, thanks a lot.

I tried this code for making Firebase phone number authentication:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>
            Firebase Phone Number Auth
        </title>
        </head>
        <body>
            Updated
            <script src="https://www.gstatic./firebasejs/4.8.1/firebase.js"></script>
            <script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp.",
    databaseURL: "https://groupinger-users.firebaseio.",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot.",
    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>

But it's not working. I'm a real newbie on Firebase. Please somebody help. (Note: you can also test it on Localhost.) The code is live at https://GroupinGer.cu.ma/ph/ Also, I would like to show the user data(Phone number, UID etc.) In another file called details.html. I tried this code:

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

Please have a look at it too. Again, thanks a lot.

Share Improve this question edited Sep 23, 2019 at 12:05 M.Monoo 5910 bronze badges asked Jan 10, 2018 at 2:07 user8984670 211 gold badge2 silver badges5 bronze badges

You can try checking console by visiting the given web address. – user8984670 Commented Jan 10, 2018 at 2:10
You should not post API Keys publicly. – Debu Shinobi Commented Sep 28, 2021 at 10:55

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

First of all, you need to initialize a recaptchaVerifier like this:

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

Second, your code has syntax error. Try the following:

<!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./firebasejs/4.8.1/firebase.js"></script>
  <script type="text/javascript">
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp.",
    databaseURL: "https://groupinger-users.firebaseio.",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot.",
    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>

For more details, you can refer to the phone auth part of firebase auth doc. https://firebase.google./docs/auth/web/phone-auth

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Firebase phone number authentication on web - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)