Firebase身份验证未检测到登录用户

时间:2020-07-13 10:56:59

标签: javascript firebase google-app-engine firebase-authentication

问题: 我无法使用firebase.auth().currentUser

访问用户对象

情况: 帐户创建和登录使用firebaseui-web。身份验证后,用户将重定向到他的帐户特定页面。在呈现每个页面并将其提供给经过身份验证的用户之前,将在服务器端对用户cookie进行验证,以确保提供了正确的用户内容,并且不会发生未经授权的访问。但是,当访问需要使用javascript访问用户对象的用户个人资料页面时,我只会得到一个空对象。此外,控制台会记录“用户未登录”,并为用户记录“空”。

问题: 如何访问用户对象?我加载的东西是否乱序?我还需要检查还是再次检查?

html页面:

<!doctype html>
<html class="no-js h-100" lang="en">
  <head>
    <!-- redacted -->  
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" href="/static/dashboard/styles/shards-dashboards.1.1.0.min.css">
    <link rel="stylesheet" href="/static/dashboard/styles/extras.1.1.0.min.css">
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css"> 
</head>

  <body class="h-100">
    <div class="container">
        <!-- The page content goes here-->
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script src="https://unpkg.com/shards-ui@latest/dist/js/shards.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sharrre/2.0.1/jquery.sharrre.min.js"></script>
    <script src="/static/dashboard/scripts/extras.1.1.0.min.js"></script>
    <script src="/static/dashboard/scripts/shards-dashboards.1.1.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.min.js"></script>
    <script src="/static/dashboard/scripts/app/app-blog-new-post.1.1.0.js"></script>

    <!-- toastr -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-auth.js"></script>


    <script>
        // Your web app's Firebase configuration
        var firebaseConfig = {
          apiKey: "MyApiKey",
          authDomain: "MyAuthDomain",
          databaseURL: "myDatabaseURL",
          projectId: "myProjectId",
          storageBucket: "myStorageBucket",
          messagingSenderId: "myMessagingSenderId",
          appId: "myAppId"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>

    <script>

      $(document).ready(function(){
        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            // User is signed in.
            console.log("user is signed in");
          } else {
            // No user is signed in.
            // The user gets 
            console.log("user is NOT signed in");
          }
        });
        var user = firebase.auth().currentUser;

        console.log(user);
        //logs 'null'

        // additional code redacted
      })
    </script>

  </body>
</html>

1 个答案:

答案 0 :(得分:2)

您正在进行一场比赛。您将两个firebase脚本都放在了正文中。第二个是监听document ready,这可能是在您连接到firebase.auth()之前触发的。

我会把它们都放在侦听器中,或者通过<head>中的脚本进行连接,或者将它们放在一个<head>标签下的<script>中,并创建一个读取标志。

尝试一下(仍在等待文档准备就绪):

<body>
<script>
      $(document).ready(function(){

        // Your web app's Firebase configuration
        var firebaseConfig = {
          apiKey: "MyApiKey",
          authDomain: "MyAuthDomain",
          databaseURL: "myDatabaseURL",
          projectId: "myProjectId",
          storageBucket: "myStorageBucket",
          messagingSenderId: "myMessagingSenderId",
          appId: "myAppId"
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            // User is signed in.
            console.log("user is signed in");
          } else {
            // No user is signed in.
            // The user gets 
            console.log("user is NOT signed in");
          }
        });
        var user = firebase.auth().currentUser;

        console.log(user);
        //logs 'null'

        // additional code redacted
      })
</script>

或者这个(在写入DOM之前先连接到firebase

<head>
<script>
      $(document).ready(function(){

        // Your web app's Firebase configuration
        var firebaseConfig = {
          apiKey: "MyApiKey",
          authDomain: "MyAuthDomain",
          databaseURL: "myDatabaseURL",
          projectId: "myProjectId",
          storageBucket: "myStorageBucket",
          messagingSenderId: "myMessagingSenderId",
          appId: "myAppId"
        };

        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
</script>
</head>

<body>
<script>
        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            // User is signed in.
            console.log("user is signed in");
          } else {
            // No user is signed in.
            // The user gets 
            console.log("user is NOT signed in");
          }
        });
        var user = firebase.auth().currentUser;

        console.log(user);
        //logs 'null'

        // additional code redacted
      })
</script>