Firebase 身份验证重复错误答案

【问题标题】：Repeated errors with Firebase AuthenticationFirebase 身份验证重复错误
【发布时间】：2021-10-17 15:14:52
【问题描述】：

我第一次尝试在一个非常基本的网站上设置 FirebaseUI 电子邮件和密码身份验证，但遇到了多个错误，并且没有显示登录/注册 UI 应该在哪里。它只是空的，只有装载机显示。首先，我确保 Firebase 已正确实施，并且托管和部署工作正常。我还在控制台中启用了电子邮件和密码身份验证，并按照文档进行了设置。这是我到目前为止所做的：

<head>
    <script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.css" />
</head>

<body>
    <h2>Testing</h2>
     <h1>firebase auth practice</h1>
     <div id="firebaseui-auth-container"></div>
     <div id="loader">Loading...</div>

    <script>
        var firebaseConfig = {
            // I've omitted this part for the purposes of the question.
        };
        firebase.initializeApp(firebaseConfig);
        
        import * as firebase from 'firebase';
        import * as firebase from 'firebase/auth';

        var ui = new firebaseui.auth.AuthUI(firebase.auth());

        ui.start('#firebaseui-auth-container', {
            signInOptions: [
                firebase.auth.EmailAuthProvider.PROVIDER_ID
            ]
            });

        var uiConfig = {
            callbacks: {
                signInSuccessWithAuthResult: function(authResult, redirectUrl) {
                return true;
                },
                uiShown: function() {
                document.getElementById('loader').style.display = 'none';
                }
            },
            signInFlow: 'popup',
            signInSuccessUrl: 'loggedin.html',
            signInOptions: [
                firebase.auth.EmailAuthProvider.PROVIDER_ID
            ],
            tosUrl: 'tos.html',
            privacyPolicyUrl: 'privacy.html'
            };

         ui.start('#firebaseui-auth-container', uiConfig);
    </script>

</body>

loggedin.html、tos.html 和 privacy.html 几乎都是空的。所有这些都取自文档，但我收到错误说 firebase.auth() 不是一个函数，然后我尝试了import 部分，并收到错误说 import 语句不能在 a 之外使用模块。我试图尝试其他有这些错误的人在 SO 上所做的事情，例如使用 type="module"，但无济于事。我怀疑这个问题可能与导入位有关，但在 SO 或文档中都找不到任何修复。

对此的任何帮助将不胜感激！

【问题讨论】：

标签： javascript html firebase firebase-authentication firebaseui

【解决方案1】：

您尚未导入 FirebaseUI 所依赖的 Firebase 身份验证 SDK。

您需要将此行添加到您的 script 部分：

<script src="https://www.gstatic.com/firebasejs/8.9.1/firebase-auth.js"></script>

请注意，可能还有更多问题，但此更改应该可以解决您提到的firebase.auth() is not a function。

如果您在此之后还有更多问题，请为每个问题单独发布一个问题，并附上自己的MCVE（请阅读链接，因为它非常有用）。

【讨论】：