React:使用 firebase-ui 设置 firebase 身份验证
Posted
技术标签:
【中文标题】React:使用 firebase-ui 设置 firebase 身份验证【英文标题】:React: setting up firebase auth with firebase-ui 【发布时间】:2018-09-25 01:40:00 【问题描述】:我正在尝试按照说明 here 使用 firebase ui 设置 firebase 身份验证。
我使用 yarn 添加了 firebase ui 模块。我的 react 应用程序的根目录中有一个 firebase 文件夹。在其中,我有一个 firebase.js 文件:
import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui'
const config =
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
;
firebase.initializeApp(config);
const database = firebase.database();
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error)
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
);
当我尝试检查我在这一点上是否正确时,我收到一个控制台错误,上面写着:
firebaseApp.js:339 Uncaught FirebaseError code: "app/duplicate-service", message: "Firebase: Firebase service named 'auth' already registered (app/duplicate-service).", name: "auth", stack: "auth: Firebase: Firebase service named 'auth' alre…t
我不会在应用程序的其他任何地方调用 firebase,所以我认为这可能是错误的唯一方法是 firebaseui 已经导入了 firebase。我尝试删除第一个 import 语句,但随后出现错误,提示未定义 firebase。
有人知道如何正确设置吗?我见过this question。我可以看到方法的差异。我尝试使用问题中使用的配置语句。我仍然遇到同样的问题。
自从发布此问题后,我聘请了一名工作人员为我设置此问题。尽管花了 400 美元,我仍然有这个问题。其他问题已发布此问题并确定了角耀斑的重复。我不使用角度。
上工承包商设置如下:
const config =
apiKey: settings.FIREBASE_API_KEY,
authDomain: settings.FIREBASE_AUTH_DOMAIN,
databaseURL: settings.FIREBASE_DB_URL,
projectId: settings.FIREBASE_PROJECT_ID,
storageBucket: settings.FIREBASE_STORAGE_BUCKET,
messagingSenderId: settings.FIREBASE_MESSAGE_ID,
if (!firebase.apps.length)
firebase.initializeApp(config);
const database = firebase.database();
const auth = firebase.auth()
export firebase, auth, database ;
此块中有一个用于 firebase.auth 的额外 const。我尝试删除它,但它没有任何区别。控制台错误仍然出现。
我上面链接的 SO 问题显示了从库导入的导入语句。我所有的导入语句都会导入我的 firebase.js 文件,该文件本身会导入 firebase。我想知道这是否是重复的?但是,导入中有 if 语句,所以我不明白为什么这可能是问题所在。我确实在我的组件中导入了 FirebaseUI,但我不知道这是否会以某种方式重复导入 firebase。
我正在寻找带有反应的解决方案。有谁知道如何配置 Firebase 以与 React 应用程序一起使用?
【问题讨论】:
看firebaseui demo,我看到firebaseui是在firebase初始化后才导入的。但是,在您的方法中,首先导入firebase
和 firebaseui
,然后对其进行初始化。参考:github.com/firebase/firebaseui-web/blob/master/demo/public/…
【参考方案1】:
EDIT 2021:现在有一个官方的 React 组件 - 请参阅下面 saurabh 的回答。
我不确定您的错误是怎么回事,但我使用 create-react-app
创建了一个 React 应用程序并立即运行。
首先我创建了“firebase.js”:
import firebaseui from 'firebaseui'
const config = (
// your config
)
// This is our firebaseui configuration object
const uiConfig = (
signInSuccessUrl: '/',
signInOptions: [
window.firebase.auth.GoogleAuthProvider.PROVIDER_ID
],
tosUrl: '/terms-of-service' // This doesn't exist yet
)
// This must run before any other firebase functions
window.firebase.initializeApp(config)
// This sets up firebaseui
const ui = new firebaseui.auth.AuthUI(window.firebase.auth())
// This adds firebaseui to the page
// It does everything else on its own
const startFirebaseUI = function (elementId)
ui.start(elementId, uiConfig)
export startFirebaseUI
然后将现有的 App.js 编辑成这样:
import React, Component from 'react';
import startFirebaseUI from './firebase.js'
class App extends Component
componentDidMount()
startFirebaseUI ('#firebaseui')
render()
return (
<div id="firebaseui"></div>
);
export default App;
Firebaseui 将为您创建用户,您无需手动执行此操作。如果找不到元素,它也会抛出一个令人讨厌的错误,因此请确保 如果没有页面上的元素,你永远不会调用它!
如果您需要在登录或注销时运行某个功能,您可以挂钩到firebase.auth.onAuthStateChanged
:
firebase.auth().onAuthStateChanged((user) =>
// if user isn't null then we logged in
if (user)
// login
else
// logout
)
我怀疑您的错误与 firebaseui
干扰 firebase.auth()
有关,但我可能无法重现它。
【讨论】:
任何在 import firebaseui from 'firebaseui' 上遇到错误的人都可以将其替换为 import * as firebaseui from 'firebaseui' 执行良好 @Matt O'Tousa 你在项目的 index.html 中添加了 firebaseui.css 吗?对我来说,在我添加之前,样式不起作用.. Google 徽标很大,必须添加 css 才能应用样式。【参考方案2】:对于所有到这里来将 Firebase-UI 集成到 react 应用程序中的用户,我强烈推荐官方节点模块。 https://www.npmjs.com/package/react-firebaseui
在 npm 中很好地捕捉到了它。简而言之:
假设您的项目中已经有 firebase,请通过以下命令安装 react-firebaseui:$ npm install --save react-firebaseui
const uiConfig =
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',
// Redirect to /signedIn after sign in is successful. Alternatively you can
provide a callbacks.signInSuccess function.
signInSuccessUrl: '/signedIn',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
]
;
然后在组件的渲染/返回中添加以下标签:
<StyledFirebaseAuth uiConfig=uiConfig firebaseAuth=firebase.auth()/>
【讨论】:
绝对是现代的方式!【参考方案3】:我也遇到了这个问题,很可能是因为最近 npm 无法在 windows 上使用最新版本的 firebase。
问题是 node_modules/firebasui/dist/npm.js 中的文件将其作为第一行。
var firebase = require('firebase/app'); require('firebase/auth');
我将其替换为:
var firebase=window.firebase;
我认为先导入firebase并显式放入window对象,然后再导入firebaseui:
var firebase = require('firebase');
window.firebase = firebase;
var firebaseui = require('firebaseui');
【讨论】:
以上是关于React:使用 firebase-ui 设置 firebase 身份验证的主要内容,如果未能解决你的问题,请参考以下文章
与 Crashlytics 一起运行 Firebase-Auth + Firebase-UI
com.firebase.ui.auth.FirebaseUiException:提供程序错误 - Firebase-UI 身份验证 Facebook 登录不起作用