Я следую примеру репозитория пользовательского интерфейса firebase, но получаю следующую ошибку:
Uncaught FirebaseError: Firebase: приложение Firebase «[ПО УМОЛЧАНИЮ]» не создано — вызовите Firebase App.initializeApp() (app-compat/no-app).
Я пробовал уже несколько вещей, но они не работают. Когда я проверяю код, кажется, что он сначала запускает строку, содержащую var ui = new firebaseui.auth.AuthUI(firebase.auth());
, до const app = initializeApp(firebaseConfig);
, даже если она после.
Это мой код, помощь будет приветствоваться:
<!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 type = "module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/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: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
</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: "<url-to-redirect-to-on-success>",
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>
Поскольку вы используете совместимые SDK, инициализируйте Firebase SDK, как показано ниже:
const app = firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
Вы должны изменить порядок кода:
<!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/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"
/>
</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>
<script type = "text/javascript">
// FirebaseUI config.
var uiConfig = {
signInSuccessUrl: "<url-to-redirect-to-on-success>",
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>");
},
};
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
messagingSenderId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(app.auth());
// The start method will wait until the DOM is loaded.
ui.start("#firebaseui-auth-container", uiConfig);
</script>
</body>
</html>
Вы используете режим совместимости с Firebase (теперь новый API отличается, https://firebase.google.com/docs/web/modular-upgrade)
Вы должны поместить свой код перед тегом </body>, поэтому, когда DOM будет готов, скрипты вне функции будут загружены (http://www.cev.washington.edu/lc/CLWEBCLB/jst/js_whereto.html )
Обратите внимание, что вы раскрываете конфигурацию Firebase, если вы помещаете ее в строку, вам следует использовать другую стратегию https://medium.com/@devesu/how-to-secure-your-firebase-project-even-when-your- api -ключ-является-общедоступным-a462a2a58843. Есть несколько стратегий, которые вы можете использовать.
Это был потрясающий ответ, и он сработал! СПАСИБО Мауро!
Это не сработало само по себе, но было частью проблемы. Спасибо, в любом случае!