使用 React 进行 Firebase Google 身份验证

各位开发者朋友们，大家好！
今天我们将学习如何使用 Firebase 通过 Google 登录对我们的 React 应用进行身份验证。

首先，我们来简单了解一下 Firebase 是什么。Google
Firebase是一款由 Google 支持的应用开发软件，它使开发者能够开发 iOS、Android 和 Web 应用。Firebase 提供各种工具，用于跟踪分析、生成报告、修复应用崩溃以及创建营销和产品实验。Firebase 提供多种服务，包括：

分析
验证
云消息传递
实时数据库
性能及其他更多……

Firebase Authentication 提供后端服务、易于使用的 SDK 和现成的 UI 库，用于验证用户对您应用的访问权限。它支持使用密码、电话号码、流行的联合身份提供商（例如 Google、Facebook 和 Twitter）等进行身份验证。

现在让我们开始我们的项目吧。

首先，我们将设置 Firebase 项目。为此，请访问firebase.google.com并使用您的 Google 帐户登录。现在，我们将初始化我们的应用。

点击网页右上角的“开始使用”或“前往控制台” 。

现在我们将进入“添加项目”页面。选择“添加项目”，项目名称可以随意设置。接下来，系统会要求我们选择一个 Firebase 帐户。我们选择默认帐户。之后，系统会将我们重定向到“项目概览”页面。

要添加应用，请点击网页图标。这样我们就可以创建应用并为其命名。

现在，在注册完我们的应用之后，让我们复制 firebaseConfig 对象，它稍后将帮助我们初始化 Web 应用并将其连接到 Firebase。该配置对象大致如下所示：

现在要启用身份验证，让我们回到项目概览页面，点击身份验证选项卡，然后设置登录方法并启用 Google 身份验证。

耶！我们项目的第一部分完成了。现在到了有趣的部分——编写代码。

首先，我们要开始编写代码，首先使用终端中的以下命令创建我们的初始项目目录：

npx create-react-app google-auth //google-auth 是我的目录名称

它将为我们创建一个基本的 React 应用样板。

现在我们将使用以下终端命令在应用程序中安装 Firebase：

npm install firebase

注意：如果您是第一次在系统上安装 Firebase，请在终端中输入以下命令：

npm install -g firebase-tools

现在让我们把这些知识付诸实践。
我们将创建一个服务文件夹，并将 firebase.js 文件添加到其中，然后添加以下代码。

src/service/firebase.js

import firebase from "firebase/app";
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

// Initialize Firebase 
firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

接下来，我们将创建一个登录功能，允许我们使用谷歌账户登录。

src/service/firebase.js

export const auth = firebase.auth();

const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });

export const signInWithGoogle = () => auth.signInWithPopup(provider);

完整的代码如下所示：

要使用此函数，我们需要将其导入到登录组件中，并在登录按钮上添加一个 onClick 事件处理程序。因此，让我们在 components 文件夹中创建一个登录组件，并添加以下代码：

src/components/Login.js

import { signInWithGoogle } from '../services/firebase';

import '../App.css';

const Login = () => {
  return (
    <div>
      <button className="button" onClick={signInWithGoogle}><i className="fab fa-google"></i>Sign in with google</button>
    </div>
  )
}

export default Login;

让我们把登录组件导入到 App.js 文件中。
这样就完成了。现在我们可以通过 Google 帐户登录我们的应用了。

现在让我们存储用户信息，以便在应用程序中使用。请在 App.js 文件中添加以下代码。

src/App.js

import { useState, useEffect } from 'react';

import Login from './components/Login';
import Home from './components/Home';
import firebase from './services/firebase';

import './App.css';



function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
      setUser(user);
    })
  }, [])

  console.log(user);

  return (
    <div className="app">
      <Login />
    </div>
  );
}

export default App;

让我们创建一个“首页”组件，用来使用登录后获取的信息。在组件应用中创建一个“首页”组件，并将以下代码添加到其中：

src/components/Home.js

import React from 'react';

import { auth } from '../services/firebase'

import '../App.css';

const Home = ({ user }) => {
  return (
    <div className="home">
      <h1>Hello, <span></span>{user.displayName}</h1>
      <img src={user.photoURL} alt="" />
      <button className="button signout" onClick={() => auth.signOut()}>Sign out</button>
    </div>
  )
}

export default Home;