Fatal编程技术网
  • javascript/
  • Javascript 如何为web上的多个页面维护Firebase身份验证？

Javascript 如何为web上的多个页面维护Firebase身份验证？

javascript web firebase

Javascript 如何为web上的多个页面维护Firebase身份验证？,javascript,web,firebase,firebase-authentication,Javascript,Web,Firebase,Firebase Authentication,我正在使用Firebase作为web应用程序。目标是允许用户登录/注册一个熟悉的页面，在该页面中用户注册或登录一个页面，并在成功验证后将其带到主页 该流将如下所示： 登录/注册->（允许访问）->[主页、个人资料、搜索、好友等] 我使用的是Javascript（没有AngularJs，因为我对它完全不熟悉）。我遇到的问题是，一旦用户成功登录或注册，他们的“用户对象”在使用时变为空 window.location='home.html' 这是完整的代码。我现在正在使用Find Firebase示例

我正在使用Firebase作为web应用程序。目标是允许用户登录/注册一个熟悉的页面，在该页面中用户注册或登录一个页面，并在成功验证后将其带到主页

该流将如下所示： 登录/注册->（允许访问）->[主页、个人资料、搜索、好友等]

我使用的是Javascript（没有AngularJs，因为我对它完全不熟悉）。我遇到的问题是，一旦用户成功登录或注册，他们的“用户对象”在使用时变为空 
window.location='home.html'

这是完整的代码。我现在正在使用Find Firebase示例进行身份验证过程，但home.html是我的工作：

<!DOCTYPE html>
<html>
    <head>

        <!--Bootstrap CSS CDN-->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!---jQuery CDN-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>






        <script type="text/javascript">
    /**
     * Handles the sign in button press.
     */
    function toggleSignIn() {
      if (firebase.auth().currentUser) {
        // [START signout]
        firebase.auth().signOut();
        // [END signout]
      } else {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        if (email.length < 4) {
          alert('Please enter an email address.');
          return;
        }
        if (password.length < 4) {
          alert('Please enter a password.');
          return;
        }
        // Sign in with email and pass.
        // [START authwithemail]
        firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // [START_EXCLUDE]
          if (errorCode === 'auth/wrong-password') {
            alert('Wrong password.');
          } else {
            alert(errorMessage);
          }
          console.log(error);
          document.getElementById('quickstart-sign-in').disabled = false;
          // [END_EXCLUDE]
        });
        // [END authwithemail]
        window.location = '/1home.php'
      }
      document.getElementById('quickstart-sign-in').disabled = true;
    }
    /**
     * Handles the sign up button press.
     */
    function handleSignUp() {
      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;
      if (email.length < 4) {
        alert('Please enter an email address.');
        return;
      }
      if (password.length < 4) {
        alert('Please enter a password.');
        return;
      }
      // Sign in with email and pass.
      // [START createwithemail]
      firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // [START_EXCLUDE]
        if (errorCode == 'auth/weak-password') {
          alert('The password is too weak.');
        } else {
          alert(errorMessage);
        }
        console.log(error);
        // [END_EXCLUDE]
      });
      // [END createwithemail]
    }
    /**
     * Sends an email verification to the user.
     */
    function sendEmailVerification() {
      // [START sendemailverification]
      firebase.auth().currentUser.sendEmailVerification().then(function() {
        // Email Verification sent!
        // [START_EXCLUDE]
        alert('Email Verification Sent!');
        // [END_EXCLUDE]
      });
      // [END sendemailverification]
    }
    function sendPasswordReset() {
      var email = document.getElementById('email').value;
      // [START sendpasswordemail]
      firebase.auth().sendPasswordResetEmail(email).then(function() {
        // Password Reset Email Sent!
        // [START_EXCLUDE]
        alert('Password Reset Email Sent!');
        // [END_EXCLUDE]
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // [START_EXCLUDE]
        if (errorCode == 'auth/invalid-email') {
          alert(errorMessage);
        } else if (errorCode == 'auth/user-not-found') {
          alert(errorMessage);
        }
        console.log(error);
        // [END_EXCLUDE]
      });
      // [END sendpasswordemail];
    }
    /**
     * Handles registering callbacks for the auth status.
     *
     * This method registers a listener with firebase.auth().onAuthStateChanged. This listener is called when
     * the user is signed in or out, and that is where we update the UI.
     *
     * When signed in, we also authenticate to the Firebase Realtime Database.
     */
    function initApp() {
      // Listening for auth state changes.
      // [START authstatelistener]
      firebase.auth().onAuthStateChanged(function(user) {
        // [START_EXCLUDE silent]
        document.getElementById('quickstart-verify-email').disabled = true;
        // [END_EXCLUDE]
        if (user) {
          // User is signed in.
          var displayName = user.displayName;
          var email = user.email;
          var emailVerified = user.emailVerified;
          var photoURL = user.photoURL;
          var isAnonymous = user.isAnonymous;
          var uid = user.uid;
          var refreshToken = user.refreshToken;
          var providerData = user.providerData;
          // [START_EXCLUDE silent]
          document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
          document.getElementById('quickstart-sign-in').textContent = 'Sign out';
          document.getElementById('quickstart-account-details').textContent = JSON.stringify({
            displayName: displayName,
            email: email,
            emailVerified: emailVerified,
            photoURL: photoURL,
            isAnonymous: isAnonymous,
            uid: uid,
            refreshToken: refreshToken,
            providerData: providerData
          }, null, '  ');
          if (!emailVerified) {
            document.getElementById('quickstart-verify-email').disabled = false;
          }
          // [END_EXCLUDE]
        } else {
          // User is signed out.
          // [START_EXCLUDE silent]
          document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
          document.getElementById('quickstart-sign-in').textContent = 'Sign in';
          document.getElementById('quickstart-account-details').textContent = 'null';
          // [END_EXCLUDE]
        }
        // [START_EXCLUDE silent]
        document.getElementById('quickstart-sign-in').disabled = false;
        // [END_EXCLUDE]
      });
      // [END authstatelistener]
      document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
      document.getElementById('quickstart-sign-up').addEventListener('click', handleSignUp, false);
      document.getElementById('quickstart-verify-email').addEventListener('click', sendEmailVerification, false);
      document.getElementById('quickstart-password-reset').addEventListener('click', sendPasswordReset, false);
    }
    window.onload = function() {
      initApp();
    };
    </script>
    </head>

    <body>
    <div class="jumbotron text-center"> 

    </div>

    <div class="container">
    <div class="jumbotron">

        <div class="row">
            <div class="col-md-6">
                <!--<img src="" style="width:500px; height:340px">-->

            </div>

        <div class="col-md-6">

        <!-- Container for the demo -->
        <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
            <div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
                <h2 class="mdl-card__title-text">Sign Up</h2>
            </div>

            <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                <p>Enter an email and password below and either sign in to an existing account or sign up</p>

                <input class="mdl-textfield__input" style="display:inline;width:auto;" type="text" id="email" name="email" placeholder="Email"/>
                &nbsp;&nbsp;&nbsp;
                <br /><br />
                <input class="mdl-textfield__input" style="display:inline;width:auto;" type="password" id="password" name="password" placeholder="Password"/>
                <br/><br/>
            <button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in" name="signin">Sign In</button>
            &nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-up" name="signup">Sign Up</button>
            &nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-button--raised" disabled id="quickstart-verify-email" name="verify-email">Send Email Verification</button>
            &nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-password-reset" name="verify-email">Send Password Reset Email</button>

                <!-- Container where we'll display the user details -->
                <div class="quickstart-user-details-container">
                    <!--Firebase--> sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
                    <div><!--Firebase--> auth <code>currentUser</code> object value:</div>
                    <pre><code id="quickstart-account-details">null</code></pre>
                </div>
            </div><!---->
        </div>

      </div>
      </div>

    </div>



    <!--Bootstrap Js CDN-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!--Firebase Initialization-->
    <script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "XXXXXXXXXXXXXXXXX",
            authDomain: "XXXXXXXXXXXXXX",
            databaseURL: "XXXXXXXXXXXXX",
            storageBucket: "XXXXXXXXXXXXXXXX",
        };
        firebase.initializeApp(config);
    </script>



    </body>
</html>
//初始化Firebase 变量配置={ apiKey:“XXXXXXXXXXXXXX”， authDomain:“XXXXXXXXXXXXX”， 数据库URL:“XXXXXXXXXXXX”， storageBucket:“XXXXXXXXXXXXXX”， }; firebase.initializeApp（配置）； 此外，身份验证屏幕重定向到的页面正在使用
onAuthStateChanged
监视身份验证状态。这是使用
console.log（用户）的地方
返回null，尽管使用
console.log（“尝试登录”）；
已打印。我从Firebase Auth示例复制了initApp函数。可能我在错误的位置使用了它

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
   window.location = '/1home.php';
  }
}


函数initApp（）{
//正在侦听身份验证状态更改。
//[启动authstatelistener]
firebase.auth（）.onAuthStateChanged（函数（用户）{
//[启动\u排除静默]
//[完]
控制台日志（“尝试登录”）；
console.log（用户）；
如果（用户）{
//用户已登录。
console.log（“尝试登录成功”）；
var displayName=user.displayName；
var email=user.email；
var emailVerified=user.emailVerified；
var photoURL=user.photoURL；
var isAnonymous=user.isAnonymous；
var uid=user.uid；
var refreshttoken=user.refreshttoken；
var providerData=user.providerData；
控制台日志（uid）；
console.log（displayName）；
控制台日志（电子邮件）；
console.log（photoURL）；
//[启动\u排除静默]
如果（！emailVerified）{
}
//[完]
}否则{
//用户已注销。
//[启动\u排除静默]
//[完]
}
//[启动\u排除静默]
//[完]
});
//[结束authstatelistener]
}
window.onload=函数（）{
initApp（）；
//注册每次身份验证状态更改时要触发的回调
参考onAuth（函数（authData）{
if（authData）{
console.log（“用户”+authData.uid+”使用“+authData.provider”登录）；
}否则{
console.log（“用户已注销”）；
}
});
};
因此，为了重新讨论这个问题和目标：我希望能够在这个页面上对用户进行身份验证（上面的代码表示登录/注册屏幕），然后向他们发送一组基于Firebase ID加载内容的页面。

我认为您调用重定向太早。请尝试将其放置在onAuthStateChanged回调中。如果您在本地Firebase客户端有时间注册身份验证更改之前重定向，您的会话将没有时间存储在localStorage中，因此当您到达目的地时将不会有任何会话。登录过程实际上是短路的

试试像这样的东西

就是这样！谢谢！所以在我注销之前，身份验证将在任何页面上保持活动状态（他们单击“注销”）？是的！一旦身份验证保存在localStorage中，它将一直保存在该浏览器中，直到localStorage被清除或您的身份验证会话超时。我不知道如何使用新的Firebase控制超时，但我相信有一种方法。明白了。再次非常感谢。我非常感谢itonAuthStateChanged（）当我们移动到多用户页面网站中的其他页面时调用，为什么会这样？我们如何在重定向页面上传递firebase.auth（）以提供注销功能。这里是您可以尝试的工作版本。 
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
   window.location = '/1home.php';
  }
}