找不到 FirebaseUI 小部件错误

Question

我正在尝试使用 firebaseui auth 为单页网络应用制作登录屏幕。我复制了 firebaseui 的示例代码来创建登录屏幕：

<script src="/__/firebase/init.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.0.0/firebaseui.css" />
  <script type="text/javascript">
  // FirebaseUI config.
  var uiConfig = {
    signInOptions: [
      // Leave the lines as is for the providers you want to offer your users.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID
    ]
  };

  // Initialize the FirebaseUI Widget using Firebase.
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  // The start method will wait until the DOM is loaded.
  ui.start('#firebaseui-auth-container', uiConfig);
</script>

然后我就插入了一个

<div id="firebaseui-auth-container'></div>

加载登录屏幕。常规的 firebase 东西加载得很好，但 auth 屏幕没有。这是我得到的错误：

Uncaught Error: Could not find the FirebaseUI widget element on the page.

我在网上其他地方找不到这个错误，我不确定它是什么意思或为什么会出现。我应该怎么做才能加载授权屏幕？

Answer 1

从这里抛出错误：https://github.com/firebase/firebaseui-web/blob/cac4047490ed90b0d3d741d6deb8b28905f5db4b/javascript/widgets/authui.js#L481

似乎找不到 html 元素。您可以尝试从控制台调用 document.querySelector('#firebaseui-auth-container'); 以确认该页面上存在该元素吗？

Answer 2

您的代码示例：

<div id="firebaseui-auth-container'></div>

包含不一致的引号，第一个是双引号，第二个是单引号。我相信您打算将其编码为：

<div id="firebaseui-auth-container"></div>

或

<div id='firebaseui-auth-container'></div>

找不到 FirebaseUI 小部件错误

Could not find FirebaseUI widget error

javascript

authentication

web-applications

firebase

firebaseui