Javascript 基于web的Firebase电话号码认证_Javascript_Firebase_Firebase Authentication

Javascript 基于web的Firebase电话号码认证

javascript firebase

Javascript 基于web的Firebase电话号码认证,javascript,firebase,firebase-authentication,Javascript,Firebase,Firebase Authentication,我尝试使用以下代码进行Firebase电话号码验证： <!DOCTYPE html> <html lang="en"> <head> <title> Firebase Phone Number Auth </title> </head> <body> Updated &l

我尝试使用以下代码进行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电话号码验证
更新
//初始化Firebase
变量配置={
apiKey：“AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4”，
authDomain:“groupinger users.firebaseapp.com”，
数据库URL:“https://groupinger-users.firebaseio.com",
projectId:“groupinger用户”，
storageBucket:“groupinger users.appspot.com”，
messagingSenderId：“432661298034”
};
firebase.initializeApp（配置）；
window.recaptchaVerifier=new firebase.auth.recaptchaVerifier（'登录按钮'，{
“大小”：“不可见”，
“回调”：函数（响应）{
//已解决reCAPTCHA，允许使用PhoneNumber登录。
onSignensubmit（）；
} 
});   firebase.auth（）
.然后（（确认结果）=>{
//此时会发送短信。请用户输入代码。
警报（“刚刚发送了确认消息”）；
var代码=window.prompt（'请输入6位代码'）；
返回确认结果。确认（代码）；
}).然后（（结果）=>{
控制台日志（结果）；
//用户现在已登录并可通过result.User访问。
}).catch（（错误）=>{
//发生错误。
});

但它不起作用。我是Firebase的新手。请有人帮忙。（注意：您也可以在本地主机上测试它。）代码是实时的另外，我想在另一个名为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>


登录
您的详细信息如下所示。


//初始化Firebase
变量配置={
apiKey：“AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4”，
authDomain:“groupinger users.firebaseapp.com”，
数据库URL:“https://groupinger-users.firebaseio.com",
projectId:“groupinger用户”，
storageBucket:“groupinger users.appspot.com”，
messagingSenderId：“432661298034”
};
firebase.initializeApp（配置）；
var credential=firebase.auth.PhoneAuthProvider.credential（confirmationResult.verificationId，代码）；
警报（凭证）；
警惕（‘不’）；

请也看一看。

再次感谢您。

首先，您需要像下面这样初始化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电话号码验证
//初始化Firebase
变量配置={
apiKey：“AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4”，
authDomain:“groupinger users.firebaseapp.com”，
数据库URL:“https://groupinger-users.firebaseio.com",
projectId:“groupinger用户”，
storageBucket:“groupinger users.appspot.com”，
messagingSenderId：“432661298034”
};
firebase.initializeApp（配置）；
window.recaptchaVerifier=new firebase.auth.recaptchaVerifier（'recaptcha-container'）；
firebase.auth（）
.然后（函数（确认结果）{
window.confirmationResult=确认结果；
控制台日志（确认结果）；
});
var myFunction=function（）{
window.confirmationResult.confirm（document.getElementById（“verificationcode”）.value）
.然后（函数（结果）{
控制台日志（结果）；
}).catch（函数（错误）{
console.log（错误）；
});
};

有关更多详细信息，请参阅firebase auth doc的电话验证部分。

首先，您需要像这样初始化RecaptChaverier：

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电话号码验证
//初始化Firebase
变量配置={
apiKey：“AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4”，
authDomain:“groupinger users.firebaseapp.com”，
数据库URL:“https://groupinger-users.firebaseio.com",
projectId:“groupinger用户”，
storageBucket:“groupinger users.appspot.com”，
messagingSenderId：“432661298034”
};
firebase.initializeApp（配置）；
window.recaptchaVerifier=new firebase.auth.recaptchaVerifier（'recaptcha-container'）；
firebase.auth（）
.然后（函数（确认结果）{
window.confirmationResult=确认结果；
控制台日志（确认结果）；
});
var myFunction=function（）{
window.confirmationResult.confirm（document.getElementById（“verificationcode”）.value）
.然后（函数（结果）{
控制台日志（结果）；
}).catch（函数（错误）{
console.log（错误）；
});
};

有关更多详细信息，请参阅firebase auth doc的电话验证部分。

您可以通过访问给定的web地址来检查控制台。您可以通过访问给定的web地址来检查控制台。@user8984670已更新，可以再试一次吗？我想添加类似“firebase.auth（）.setPersistence（firebase.auth.auth.Persistence.SESSION）”的代码。然后（function（）{//现有和未来的身份验证状态现在仅在当前//会话中持久化。关闭窗口将清除任何现有状态，即使//用户忘记注销。//……//新登录将通过会话持久化来持久化。返回firebase.Auth（）.signInWithEmailAndPassword（电子邮件，密码）；}。捕获（函数（错误）{//handleerrors here.var errorCode=error.code；var errorMessage=error.message；}）´如何做？这是本主题的最后一个问题。请告诉我如何提醒用户数据。在Firebase文档的变量中，我没有找到任何可以登录用户电话号码的代码。@user8984670 Updated，可以再试一次吗？我想添加类似“Firebase.auth（）.setPersistence（Firebase.auth.auth.persistence）”的代码