FirebaseUI-Auth：#firebaseui-auth-container登录按钮无法显示问题

问题背景 #

我在HTML页面中添加了<div id="firebaseui-auth-container"></div>来集成FirebaseUI Web认证，渲染逻辑写在js/Auth.js文件里，并且通过<script type="modules" src="js/Auth.js"></script>引入，但浏览器无法加载这个脚本。

相关代码片段 #

index.html 部分代码

<script type="modules" src="js/Auth.js"></script>
</head>
<body class="fp-auth-state-unknown">
  <div class="fp-theatre"><img class="fp-fullpic" alt="Full sized image"></div>
  <section id="page-splash">
    <h3 class="fp-logo">Friendly Pix</h3>
    <div class="fp-caption">The friendliest way to share your pics</div>
    <div class="fp-signed-out-only fp-initially-hidden">
      <div id="firebaseui-auth-container" class="fp-non-eu fp-signed-out-only fp-initially-hidden"></div>
      <a class="fp-non-eu fp-skip" href="/feed">skip sign in</a>

js/Auth.js 核心逻辑

configureFirebaseUi() {
    // 配置并添加FirebaseUI组件
    let signInFlow = 'popup';
    // iOS全屏应用下使用重定向认证模式
    if (('standalone' in window.navigator)
        && window.navigator.standalone) {
      signInFlow = 'redirect';
    }

    // FirebaseUI配置
    this.uiConfig = {
      'signInFlow': signInFlow,
      'signInOptions': [{provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID}],
      'callbacks': {
        'uiShown': function() {
          const intervalId = setInterval(() => {
            const IDPButtons = $('.firebaseui-idp-button');
            const nbIDPButtonDisplayed = IDPButtons.length;
            if (nbIDPButtonDisplayed > 0) {
              clearInterval(intervalId);
              if (!$('#fp-pre-consent').is(':checked')) {
                IDPButtons.attr('disabled', 'disabled');
              }
            }
          }, 1);
        },
      },
    };
    // 初始化FirebaseUI
    this.firebaseUi = new firebaseui.auth.AuthUI(firebase.auth());
  }

  /**
   * 根据用户登录状态切换UI：显示用户信息或登录按钮
   */
  onAuthStateChanged(user) {
    Router.reloadPage();

    this._waitForAuthPromiseResolver.resolve();
    document.body.classList.remove('fp-auth-state-unknown');
    if (!user) {
      this.userId = null;
      this.signedInUserAvatar.css('background-image', '');
      this.firebaseUi.start('#firebaseui-auth-container', this.uiConfig);
      document.body.classList.remove('fp-signed-in');
      document.body.classList.add('fp-signed-out');
      Auth.disableAdminMode();
    } else {
      this.toggleAdminMode();
      document.body.classList.remove('fp-signed-out');
      document.body.classList.add('fp-signed-in');
      this.userId = user.uid;
      this.signedInUserAvatar.css('background-image',
          `url("${Utils.addSizeToGoogleProfilePic(user.photoURL) || '/images/silhouette.jpg'}")`);
      this.signedInUsername.text(user.displayName || 'Anonymous');
      this.usernameLink.attr('href', `/user/${user.uid}`);
    }
  }

尝试内嵌代码后的新问题 #

为解决脚本加载失败问题，我把FirebaseUI认证代码直接内嵌到index.html里，此时浏览器能加载#firebaseui-auth-container容器，但登录按钮完全不显示。

内嵌后的index.html代码片段 #

<script type="modules" src="js/Auth.js"></script>
    <!-- 实验代码 -->
     <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
     <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
     <script type="text/javascript">
       // FirebaseUI配置
       firebase.initializeApp()
       var uiConfig = {
         signInOptions: [
           firebase.auth.GoogleAuthProvider.PROVIDER_ID,
         ],
       };
       // 初始化FirebaseUI组件
       var ui = new firebaseui.auth.AuthUI(firebase.auth());
       // start方法会等待DOM加载完成后执行
       ui.start('#firebaseui-auth-container', uiConfig);
     </script>
     <!-- 实验代码结束 -->
</head>

<body class="fp-auth-state-unknown">
  <div class="fp-theatre"><img class="fp-fullpic" alt="Full sized image"></div>
  <section id="page-splash">
    <h3 class="fp-logo">Friendly Pix</h3>
    <div class="fp-caption">The friendliest way to share your pics</div>
    <div class="fp-signed-out-only fp-initially-hidden">
      <div id="firebaseui-auth-container" class="fp-non-eu fp-signed-out-only fp-initially-hidden"></div> 
      <a class="fp-non-eu fp-skip" href="/feed">skip sign in</a>
    </div>

故障截图 #

解决办法 #

先搞定外部脚本加载失败的问题 #

• 核对路径与运行环境：
  确认js/Auth.js的路径没写错，要是本地直接用file://打开HTML，浏览器安全规则会阻止模块脚本加载，换成本地服务器运行（比如用VS Code的Live Server插件，或者npm install -g http-server后启动）。
• 检查脚本语法与依赖：
  打开浏览器控制台（F12）看有没有加载报错或语法错误。另外，模块脚本(type="module")里不能直接用全局变量，要是Auth.js用到了firebase、jQuery的$，要么改成普通脚本(type="text/javascript")，要么在Auth.js顶部导入依赖：

  import firebase from 'https://www.gstatic.com/firebasejs/9.x.x/firebase-app.js';
  import 'https://www.gstatic.com/firebasejs/9.x.x/firebase-auth.js';
  import $ from 'https://code.jquery.com/jquery-3.6.x.min.js';
  

再解决内嵌代码后按钮不显示的问题 #

• 补全Firebase初始化配置：
  你内嵌代码里firebase.initializeApp()没传项目配置，Firebase没初始化成功，UI自然出不来。去Firebase控制台复制你的项目配置，补上：

  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的MESSAGING_SENDER_ID",
    appId: "你的APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
  

• 检查容器的隐藏类：
  #firebaseui-auth-container带了fp-initially-hidden类，大概率这个类设了display: none，要么删掉这个类，要么在启动UI后手动显示：

  ui.start('#firebaseui-auth-container', uiConfig).then(() => {
    document.getElementById('firebaseui-auth-container').classList.remove('fp-initially-hidden');
  });
  

• 版本兼容性：
  你用的FirebaseUI 6.0.1是比较老的版本，建议换成最新稳定版，避免和Firebase核心库版本不匹配导致的问题。

内容的提问来源于stack exchange，提问作者Krishna Kankipati