英文:
Following Firebase tutorial, and getting Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created
问题
抱歉，我只提供翻译服务。以下是您提供的代码的翻译部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例FirebaseUI应用</title>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script type="module">
// 从您需要的SDK中导入所需的函数
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-analytics.js";
// TODO: 添加您想要使用的Firebase产品的SDK
// https://firebase.google.com/docs/web/setup#available-libraries
// 您的Web应用的Firebase配置
// 对于Firebase JS SDK v7.20.0及更高版本，measurementId是可选的
const firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX"
};
// 初始化Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />
<script type="text/javascript">
// FirebaseUI配置。
var uiConfig = {
signInSuccessUrl: 'www.bbco.co.uk',
signInOptions: [
// 保留提供给用户的提供商的行不变。
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
// tosUrl和privacyPolicyUrl可以接受URL字符串或回调函数
// 服务条款URL/回调。
tosUrl: '<your-tos-url>',
// 隐私政策URL/回调。
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
// 使用Firebase初始化FirebaseUI Widget。
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// start方法将等待DOM加载完成。
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<!-- FirebaseUI不会改变周围的HTML。
您的应用程序可以使用该空间进行品牌、控件和其他自定义。-->
<h1>欢迎来到我的精彩应用</h1>
<div id="firebaseui-auth-container"></div>
</body>
</html>
希望这有助于解决您的问题。如果您需要更多帮助，请随时提出。
英文:
So I'm new to creating login pages and my backend is in Django.
But I thought I could follow the simple instructions here:
https://github.com/firebase/firebaseui-web
I copied the example code they provide then went to the Firebase console to get my appl initialization settings and pasted it into the section where the code said I should but I get this error:
> Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app)
and when rendering the page through Django instead of showing a login box it displays my config parameters as text.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.22.1/firebase-analytics.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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />
<script type="text/javascript">
// FirebaseUI config.
var uiConfig = {
signInSuccessUrl: 'www.bbco.co.uk',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
// tosUrl and privacyPolicyUrl accept either url string or a callback
// function.
// Terms of service url/callback.
tosUrl: '<your-tos-url>',
// Privacy policy url/callback.
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<!-- The surrounding HTML is left untouched by FirebaseUI.
Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
</body>
</html>
I did try asking ChatGPT and it did say:
> "indicates that the Firebase app is not being initialized properly, or
> It's being called before the initialization.
>
> The issue here is due to the mix of Firebase v9 (modular) and v8
> (compact) in your code. The Firebase UI library you're using
> (firebase-ui-auth.js) is not yet compatible with v9 at the time of the
> last training cut-off in September 2021."
What I don't get is that I'm simply following the instructions that Firebase provided.
I've also this post but I'm not using cloud functions so not sure if the solution applies.
答案1
得分: 1
以下是翻译好的内容：
好的，我通过自己的搜索和与ChatGPT的来回交流成功使它工作了。
解释如下：
我混合了Firebase版本9的模块化语法与较旧的命名空间（版本8及以下）语法。
在Firebase版本9中，SDK已更新为使用ES模块。因此，不再使用firebase命名空间，您必须单独导入每个功能。但我尝试在新的基于模块的SDK中使用旧的firebase命名空间，这导致了错误。
正确的解决方案是：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例FirebaseUI应用程序</title>
<!-- 始终需要核心Firebase JS SDK，并且必须首先列出 -->
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<!-- 用于身份验证的FirebaseUI -->
<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />
<script>
var firebaseConfig = {
apiKey: "XXXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX"
};
// 初始化Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
// FirebaseUI配置。
var uiConfig = {
signInSuccessUrl: '/success.html',
signInOptions: [
// 保留所需提供程序的行。
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
tosUrl: '<your-tos-url>',
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
// 使用Firebase初始化FirebaseUI Widget。
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// start方法将等待DOM加载完毕。
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<h1>欢迎来到我的精彩应用程序</h1>
<div id="firebaseui-auth-container"></div>
</body>
</html>
希望这对你有所帮助。
英文:
Ok I managed to get it to work through a combination of my own searches and back and forth with ChatGPT.
Exaplanation is:
I was mixing of Firebase version 9 module-based syntax with the older namespace (version 8 and below) syntax.
In Firebase version 9, the SDK has been updated to use ES Modules. Because of this, the firebase namespace is not used anymore, and you must import each feature individually. But I was trying to use the new module-based SDK with the old firebase namespace, which is causing the error.
Correct solution is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample FirebaseUI App</title>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<!-- FirebaseUI for Authentication -->
<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />
<script>
var firebaseConfig = {
apiKey: "XXXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX",
measurementId: "XXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
// FirebaseUI config.
var uiConfig = {
signInSuccessUrl: '/success.html',
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.TwitterAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.PhoneAuthProvider.PROVIDER_ID,
firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
],
tosUrl: '<your-tos-url>',
privacyPolicyUrl: function() {
window.location.assign('<your-privacy-policy-url>');
}
};
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论