Question

我正在学习网络上的Firebase Auth UI，并且关注YouTube上的Firecast Tutorial个视频。我创建了以下页面。但是用户界面未加载！有什么我想念的吗？

注意：
1.我正在使用本地服务器加载页面。（在cmd中使用Firebase服务）
2.出于安全原因，我隐藏了API密钥的详细信息。

var config = {
  apiKey: "myapiKey",
  authDomain: "myauthDomain",
  databaseURL: "mydatabaseURL",
  projectId: "myprojectId",
  storageBucket: "mystorageBucket",
  messagingSenderId: "mymessagingSenderId"
};
firebase.initializeApp(config);

//  Firebase UI auth
var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: 'localhost:5000/success.html',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>'
};

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

ui.start('#firebaseui-auth-container', uiConfig);

//  Auth state change listener
firebase.auth().onAuthStateChanged(function(user) {
  console.log("Inside onAuthStateChanged Function");
  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 providerData = user.providerData;
    console.log(displayName);
    console.log(email);
    console.log(emailVerified);
    console.log(photoURL);
    console.log(isAnonymous);
    console.log(uid);
    console.log(providerData);
  } else {
    console.log("Use is not si");
  }
});

<html>

<head>
  <title>Firebase Web Tutorial</title>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-firestore.js"></script>

  <!-- Firebase Auth UI -->
  <script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js" />
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
</head>

<body>
  <div id="firebaseui-auth-container"></div>
  <script src="index.js"></script>
</body>

</html>

这是我在chrome开发人员模式下看到的：

Answer 1

我知道这是一篇旧帖子，但我在创建将使用 firebase 的 Vue 项目时遇到了类似的问题。我在 firebaseui-web github 文档上找到了一些信息：

https://github.com/firebase/firebaseui-web#installation

为我修复的是添加一行直接导入样式。

所以它是这样的：

import * as firebase from 'firebase/app'
import * as fireabaseui from 'firebaseui'

为此：

import * as firebase from 'firebase/app'
import * as firebaseui from 'firebaseui'

/* the line below added in the styling for me */
import 'firebaseui/dist/firebaseui.css'

我从来没有在这里回答过，但这是我发现并解决的第一个问题，所以我想我应该发布它以防其他人遇到它！

*编辑添加了一个让我恼火的缺失“:”。

Firebase Auth UI在Web中不起作用

1 个答案: