时间戳

首页 > 解决方案 > 构建简单的网络应用程序时，Firebase UI 无法显示在按钮中

javascript - 构建简单的网络应用程序时，Firebase UI 无法显示在按钮中

问题描述

我只是在使用 Firebase 构建您的第一个 Web 应用程序中关注 Google Developers Pathways 上的教程，我在第 6 步。每当我通过单击 RSVP 按钮测试注册时，该按钮都不会响应，就像 firebase UI 注册无法显示在浏览器的对话框中一样。我当然遵循所有步骤和代码。

我尝试在按钮中使用检查元素，并显示出类似这样的错误

preview-f4664a6cfd526d580909b.js:1 [2021-09-04T13:11:04.250Z]  @firebase/auth: Auth (9.0.0): INTERNAL ASSERTION FAILED: Expected a class definition
console.<computed> @ preview-f4664a6cfd526d580909b.js:1
assert.ts:243 Uncaught (in promise) Error: INTERNAL ASSERTION FAILED: Expected a class definition
    at debugFail (assert.ts:243)
    at debugAssert (instantiator.ts:1)
    at _getInstance (instantiator.ts:48)
    at Array.map (<anonymous>)
    at _initializeAuthInstance (location.ts:1)
    at eval (register.ts:77)
    at Component.eval [as instanceFactory] (register.ts:79)
    at Provider.getOrInitializeService (provider.ts:351)
    at Provider.initialize (provider.ts:257)
    at new Auth (auth.ts:108)

这是我的 HTML 代码

<head>
  <meta charset="utf-8">
  <title>Firebase Meetup</title>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:300,400,700&display=swap"
    rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="app">

    <!-- <img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/firestore.png?alt=media&token=56d039dc-4a6c-477b-a153-a4bb8234646f" /> -->
    <!-- <img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/hosting.png?alt=media&token=57c8adb6-08c4-43f7-9395-4c299896a36c" /> -->
    <img src="https://firebasestorage.googleapis.com/v0/b/fir-images-a61c9.appspot.com/o/codelab.png?alt=media&token=f45f808c-ce40-4b34-944c-8d8fac00e13d" />

    <section id="event-details-container">
      <h1>Firebase Meetup</h1>

      <p><i class="material-icons">calendar_today</i> October 30</p>
      <p><i class="material-icons">location_city</i> San Francisco</p>

      <!-- ADDED RVSP BUTTON -->
      <button id="startRsvp">RSVP</button>

    </section>

    <hr>

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

    <section id="description-container">
      <h2>What we'll be doing</h2>
      <p>Join us for a day full of Firebase Workshops and Pizza!</p>
    </section>

    <section id="guestbook-container">
    </section>

  </div>
</body>

<script type="module">
  // Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDj4RNohGUdcRR1slvgZdUVNbKJ2odJkNc",
  authDomain: "fir-web-codelab-398dd.firebaseapp.com",
  projectId: "fir-web-codelab-398dd",
  storageBucket: "fir-web-codelab-398dd.appspot.com",
  messagingSenderId: "390940575886",
  appId: "1:390940575886:web:5fc4e675e08423b59a21df"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
</script>

这是我的 Javascript 代码

// Import stylesheets
import './style.css';
// Firebase App (the core Firebase SDK) is always required
import { initializeApp } from 'firebase/app';

// Add the Firebase products and methods that you want to use
import { getAuth, EmailAuthProvider } from 'firebase/auth';
import {} from 'firebase/firestore';

import * as firebaseui from 'firebaseui';

// Document elements
const startRsvpButton = document.getElementById('startRsvp');
const guestbookContainer = document.getElementById('guestbook-container');

const form = document.getElementById('leave-message');
const input = document.getElementById('message');
const guestbook = document.getElementById('guestbook');
const numberAttending = document.getElementById('number-attending');
const rsvpYes = document.getElementById('rsvp-yes');
const rsvpNo = document.getElementById('rsvp-no');

let rsvpListener = null;
let guestbookListener = null;

let db, auth;

async function main() {
  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: 'AIzaSyDj4RNohGUdcRR1slvgZdUVNbKJ2odJkNc',
    authDomain: 'fir-web-codelab-398dd.firebaseapp.com',
    projectId: 'fir-web-codelab-398dd',
    storageBucket: 'fir-web-codelab-398dd.appspot.com',
    messagingSenderId: '390940575886',
    appId: '1:390940575886:web:5fc4e675e08423b59a21df'
  };
  // Initialize Firebase
  initializeApp(firebaseConfig);
  auth = getAuth();

  // const app = initializeApp(firebaseConfig);

  // FirebaseUI config
  const uiConfig = {
    credentialHelper: firebaseui.auth.CredentialHelper.NONE,
    signInOptions: [
      // Email / Password Provider.
      EmailAuthProvider.PROVIDER_ID
    ],
    callbacks: {
      signInSuccessWithAuthResult: function(authResult, redirectUrl) {
        // Handle sign-in.
        // Return false to avoid redirect.
        return false;
      }
    }
  };

  const ui = new firebaseui.auth.AuthUI(auth);

  // Listen to RVSP button clicks
  startRsvpButton.addEventListener('click', () => {
    ui.start('#firebaseui-auth-container', uiConfig);
  });
}
main();

标签： javascriptfirebase

解决方案

当我注意到即使我按照这些步骤操作也不会出现 firebase UI 并且我还尝试运行 firebase 提供的示例代码并且当时它可以工作时，我正在回答我自己的问题。但是突然，当我尝试刷新应用程序并再次单击 RVSP 按钮时，firebase UI 将不再显示。我回去阅读说明，它说“你不希望页面刷新，因为你正在构建一个单页 Web 应用程序。” 而在这一点上，经过这么多天的思考和领悟，我终于明白了问题所在，我能够将自己推向极限。

推荐阅读