设置Firebase身份验证时遇到问题

时间:2019-10-08 21:19:17

标签: reactjs firebase firebase-authentication

我正在尝试为投资组合构建项目设置Firebase身份验证。我将react用作前端,并且在firebase文档中说将web凭据发布在body标签的底部。我正在使用react,所以我没有在使用body标签,也不清楚在哪里发布此标签。我也遇到错误

Line 71, parsing error: Unexpected token, expected "}";
  69 |       
  70 |       var firebaseConfig = {
> 71 |         apiKey: "_apikey_",
     |               ^
  72 |         authDomain: "_domain_.firebaseapp.com",
  73 |         databaseURL: "https://_domain_.firebaseio.com",
  74 |         projectId: "_projectid_",

。有人可以看看这个,并帮助我开始使用Firebase Auth吗?谢谢!

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Topbar from './components/Topbar'
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

var firebase = require('firebase');
var firebaseui = require('firebaseui');

function Home() {
 return (
    <div>
      <Topbar />
      <div  className = "MakeACheap">
        <p>Make a Cheep</p>

      </div>
      <div className = "InputBox">
        <textarea rows="10" cols="80">
        </textarea>
      </div>
      <div className = "Chirpfeed">
      <p>Chirp Feed</p>
      </div>



    </div>
  );
}

function Register() {
 return (
    <div>
      <Topbar />


    </div>
  );
}

function App() {
  return (
    <div>
    <Router>
    <div>
        <Switch>

          <Route path="/register">
          <Register />
          </Route>

          <Route path="/">
            <Home />
          </Route>

        </Switch>
        </div>
    </Router>



    <script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-app.js"></script>


    <script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-analytics.js"></script>

    <script>

      var firebaseConfig = {
        apiKey: "_apikey_",
        authDomain: "_project_.firebaseapp.com",
        databaseURL: "https://_project_.firebaseio.com",
        projectId: "_projectid_",
        storageBucket: "",
        messagingSenderId: "1043088880002",
        appId: "_Appid_",
        measurementId: "G-YXC3FVYE48"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    </script>
</div>
  );


}

export default App;
//

1 个答案:

答案 0 :(得分:0)

如果您只想使用分析功能,则可以将代码粘贴到公用文件夹中index.html文件中的脚本标签中。

否则,如果您想从Firebase中集成更多内容,我建议您为Firebase初始化创建另一个文件,例如。 firebase.js

npm install firebase 

将Firebase导入文件

import * as firebase from 'firebase';

仅将配置放入此文件

       var firebaseConfig = {
                apiKey: "_apikey_",
                authDomain: "_project_.firebaseapp.com",
                databaseURL: "https://_project_.firebaseio.com",
                projectId: "_projectid_",
                storageBucket: "",
                messagingSenderId: "1043088880002",
                appId: "_Appid_",
                measurementId: "G-YXC3FVYE48"
    }

      var fire = firebase.initializeApp(firebaseConfig);

export default fireApp;

现在将此文件导入您的app.js并运行功能,例如

import fireApp from './yourdirectoryPath';

     var analytics = fireApp.analytics();
        analytics.logEvent();

我希望这会对您有所帮助。