Firebase身份验证重复错误

顺晟科技

2021-08-15 10:52:17

212

我次尝试在一个真正基本的网站上设置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语句不能在模块之外使用。我尝试了其他有这些错误的人在SO上所做的事情，比如使用type="module"，但没有成功。我怀疑这个问题可能与导入位有关，但在导入位或文档中都找不到任何修复方法。

不胜感激！

顺晟科技：

您还没有导入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（请阅读链接，因为它非常有用）。

上一篇：替换HTML页面上所有出现的子字符串下一篇：HTML5(十一)——WebSock

网站建设

Html

Firebase身份验证重复错误