个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的代码有问题。我正在用 ReactJS 构建一个包含 3 个选项卡的单页网络应用程序。
当用户转到一个选项卡时，应该会显示来自 FirebaseUI 的身份验证表单。问题是它只在第一次和第二次工作，如果我切换到另一个选项卡并返回，它会崩溃，React 重新呈现使用身份验证表单呈现 div 的组件并抛出错误:
"firebase.js:26 Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists."
我的 index.html 是:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./src/favicon.ico">
<script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAdyeoTYNF0xLK37Zv3nEGHWCKNPQjSPsI",
authDomain: "xxxx.com",
databaseURL: "xxxxx.com",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxx"
};
firebase.initializeApp(config);
</script>
<script src="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/live/0.5/firebase-ui-auth.css" />
<title>Flockin</title>
</head>
<body>
<div id="root" class="container"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` in this folder.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
具有 Firebase 代码并填充 div 的模块位于模块目录中的另一个文件中:
var firebase=global.firebase;
var firebaseui=global.firebaseui;
var FirebaseUIManager=function(){
// FirebaseUI config.
var uiConfig = {
'signInSuccessUrl': '/archive',
'signInOptions': [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
// Terms of service url.
'tosUrl': '<your-tos-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);
var initApp = function() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
var photoURL = user.photoURL;
var uid = user.uid;
var providerData = user.providerData;
user.getToken().then(function(accessToken) {
document.getElementById('sign-in-status').textContent = 'Signed in';
document.getElementById('sign-in').textContent = 'Sign out';
document.getElementById('account-details').textContent = JSON.stringify({
displayName: displayName,
email: email,
emailVerified: emailVerified,
photoURL: photoURL,
uid: uid,
accessToken: accessToken,
providerData: providerData
}, null, ' ');
});
} else {
// User is signed out.
document.getElementById('sign-in-status').textContent = 'Signed out';
document.getElementById('sign-in').textContent = 'Sign in';
document.getElementById('account-details').textContent = 'null';
}
}, function(error) {
console.log(error);
});
};
initApp();
};
export default FirebaseUIManager;
最后，每次我返回 componentDidMount 方法时重新呈现表单的组件是:
import React, { Component } from 'react';
import FirebaseUIManager from './../modules/firebase-auth-login-manager.js';
class FlockinList extends Component {
componentDidMount(){
FirebaseUIManager();
}
render() {
return (
<div>
<div id="firebaseui-auth-container"></div>
<div id="sign-in-status"></div>
<div id="sign-in"></div>
<div id="account-details"></div>
</div>
);
}
}
export default FlockinList;
关于如何解决这个问题的任何想法？谢谢!
最佳答案
您不应该在每次显示时都初始化一个新的 FirebaseUI 实例:
var ui = new firebaseui.auth.AuthUI(firebase.auth());
这应该在外部进行初始化。如果你想渲染，调用
ui.start('#firebaseui-auth-container', uiConfig);
当你想删除时，调用:
ui.reset();
但不要每次都初始化一个新的实例。
关于javascript - ReactJS 应用认证 : Firebase+FirebaseUI Uncaught Error: Firebase App named '[DEFAULT]-firebaseui-temp' already exists，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39736739/
25
4
0
我的代码有问题。我正在用 ReactJS 构建一个包含 3 个选项卡的单页网络应用程序。 当用户转到一个选项卡时，应该会显示来自 FirebaseUI 的身份验证表单。问题是它只在第一次和第二次工作，
我正在尝试实现 Firebase 身份验证。使用提供的用户界面， 我不知道单击“取消”按钮时调用了什么方法。似乎没有记录，https://github.com/firebase/firebaseui-
我在使用 FirebaseUI 时遇到问题。问题是，它会在启动时启动电子邮件登录流程，而无需单击任何内容。我希望它显示不同的登录选项，但它一直在启动电子邮件登录流程。我想让它显示这个: image 但
我正在使用firebaseui-web-react。在注册流程中，我想在创建用户之前验证用户提供的 displayName。特别是，我想确保 displayName 是唯一的。 我知道如何使用 Fir
我使用 FirebaseUI 进行登录。无论我如何尝试，我都无法使登录屏幕保持纵向模式。我在这里做错了什么？我怀疑这是 list 中的内容。 有趣的是，启动屏幕保持纵向模式，然后立即进入横向模式。我找
我已经创建了用于身份验证的自定义布局，但未显示该布局，而是显示了电子邮件登录屏幕 val customLayout = AuthMethodPickerLayout.Builder(R.layout.
这个问题已经有答案了: How can I detect if user first time in Firebase [duplicate] (4 个回答) 已关闭 3 年前。 我有一个 Andro
我想在我的项目中实现 FirebaseUI，但登录页面未显示任何输入字段或按钮: 显示FUIAuth的代码: @IBAction func logInButtonTapped(_ sender: An
我正在使用 FirebaseUI Android 用户使用以下代码登录: startActivityForResult( AuthUI.getInstance().c
我不太明白 recyclerView 和 glide 在缓存信息和图像数据方面是如何工作的，所以我想知道是否有人可以提供帮助。 目前，我将有关图像的元数据存储在实时数据库中。元数据有足够的信息可以进行
在我最近访问 Firestore 之后，我尝试使用 Firebase-UI 的 RecyclerView，但我找不到将新元素添加到特定位置的方法。 这是我对基本 RecyclerView 的处理方式:
我想使用 FirebaseUI RecyclerView。 我目前的应用程序(build.gradle)如下: implementation 'com.android.support:appc
我正在学习我在 Firebase (Udacity) 中的第一门类(class)，并且有看起来像这样实现 Firebase Auth 的代码 private FirebaseAuth mFirebas
我正在使用 FirebaseUI 数据库使用 FirebaseListAdapter 从 ListView(在 ListFragment 上)的 Firebase 数据库引用中检索对象列表。我在 bu
我正在尝试为我的网站实现强制登录。我遇到的问题是我找不到这样做的方法。假设我创建了一个登录页面，例如... var uiConfig = { signInSuccessUrl: '',
我目前正从 Android 开发转向使用 Firebase 的 Swift 开发。 在 Android 中，很容易将 Firebase 检索到的快照解析为对象(例如 dataSnapshot.getv
按照 here 指南，我正在尝试将 Apple 登录添加到我的 iOS 应用程序。我已经使用这种方法成功实现了谷歌登录，但 Apple 似乎无法正常工作。我可以到达它要求我的苹果密码的地步，但它只是继
我正在使用 FirebaseUI for Web — 身份验证小部件来简化身份验证工作流程，但我遇到了一个问题。第一次一切正常。但是，在我登录后，小部件内容会清除，并且“使用...登录”按钮再也不会出
我有一个 JS 文件，我正在尝试使用 Firebase。 这是导致问题的部分(特别是 firebaseUI) var firebase = require('firebase'); var fireb
我正在努力解决一些看起来小菜一碟的问题，但我仍然无法找到解决方案。 我正在使用reactjs和firebaseUI web react实现firebase身份验证过程。一切都很好，除了当我尝试使用电子
我是一名优秀的程序员,十分优秀！