我一直在尝试在一个真正基本的网站上第一次设置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
部分,并得到了错误,说导入语句不能在模块之外使用。我试图尝试其他人对SO所做的这些错误,例如使用type="module"
,但无济于事。我怀疑这个问题可能与导入位有关,但在SO或文档中无法找到任何修复。
任何帮助,这将是非常感激!
您还没有导入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(请阅读链接,因为它非常有用)。