Firebase auth не определяет зарегистрированного пользователя - PullRequest
0 голосов
/ 13 июля 2020

Проблема: я не могу получить доступ к объекту пользователя с помощью firebase.auth().currentUser

Ситуация: для создания учетной записи и входа в систему используется firebaseui-web . После аутентификации пользователь будет перенаправлен на страницу своей учетной записи c. User cook ie проверяется на стороне сервера перед тем, как каждая страница отображается и обслуживается аутентифицированным пользователем, что обеспечивает обслуживание нужного пользовательского контента и отсутствие несанкционированного доступа. Однако при доступе к странице профиля пользователя, где мне нужно получить доступ к объекту пользователя, используя javascript, я получаю только нулевой объект. Более того, консоль регистрирует «пользователь НЕ вошел в систему» ​​и регистрирует «null» для пользователя.

Вопрос: как я могу получить доступ к объекту пользователя? Я загружаю что-то не по порядку? Есть ли что-то еще, что мне нужно проверить или перепроверить?

Страница 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 Ответ

2 голосов
/ 14 июля 2020

У вас идет гонка. Вы помещаете оба сценария firebase в тело. Второй - это прослушивание document ready, которое может срабатывать до того, как вы подключитесь к firebase.auth().

Я бы поместил оба внутри слушателя или подключился через скрипт в <head>, или поставил их в <head> под одним тегом <script> и создайте флаг чтения.

Попробуйте это (все еще ожидая do c ready):

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

Или это (подключите на firebase перед записью в DOM):

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