这次我们来尝试在之前用create-react-app创建的React项目上添加一个登录页面。

让我们使用 Firebase。

关于登录界面，Firebase提供了非常好用的功能。
通过引入它，可以轻松实现登录功能。
https://firebase.google.com/

Firebase は、ユーザーに愛されるアプリやゲームの構築と拡大を支援するアプリ開発プラットフォームです。
Google のインフラが支える、世界中の多くの企業から高い信頼を得ているサービスです。

我要编辑React。

将以下内容插入到 App.js 中。这表示我们正在定义一个名为 Login 的组件。

import './App.css';

function App() {
  return (
    <div className="App">
        <p>Hello React!</p>
        <Login />
      </header>
    </div>
  );
}

export default App;

这个Login.js还在制作的过程中。

import React from 'react'

function Login() {
    function loginGoogle() =>{

    }
    return (
        <div>Login
            <Button onClick={loginGoogle}>googleでログイン</Button>
        </div>
    )
}
export default Login

Firebase web连接

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

const firebaseApp = firebase.initializeApp({
    ここにfirebaseConfigの中身をコピペする
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""  
})

const db = firebaseApp.firestore();

const auth = firebase.auth();
export { db, auth };

完成登录.js。

import React from 'react'
import { auth } from "../firebase.js";
import firebase from "firebase/compat/app"
import { Button} from 'react-bootstrap';


function Login() {
    function loginGoogle() {
        const provider = new firebase.auth.GoogleAuthProvider();
        auth.signInWithPopup(provider);
    }
    return (
        <div>
            <Button onClick={loginGoogle}>googleでログイン</Button>
        </div>
    )
}
export default Login

实现Logout.js

在登录后，为了能够注销，我也会创建一个名为Logout.js的文件。
请同样在components文件夹下创建它。

import React from 'react'
import { auth } from "../firebase.js";
import { Button} from 'react-bootstrap';

function Logout() {
  return (
    <div>
      <Button onClick={() => auth.signOut()}>ログアウト</Button>
      <h3>{auth.currentUser.displayName}</h3>
    </div>
  );
}

export default Logout

最后修改App.js

import './App.css';
import LogIn from "./components/Login";
import LogOut from "./components/Logout";
import { auth } from "./firebase.js";
import { useAuthState } from "react-firebase-hooks/auth";

function App() {
  const [user] = useAuthState(auth);
  return <div>{user ? <LogOut /> : <LogIn />}</div>;
}

export default App;

启动

运行npm start。

Failed to compile.

Module not found: Error: Can't resolve 'react-firebase-hooks/auth' in '/Users/k.morikawa/Downloads/react-try/my-app/src'
ERROR in ./src/App.js 8:0-57
Module not found: Error: Can't resolve 'react-firebase-hooks/auth' in '/Users/k.morikawa/Downloads/react-try/my-app/src'

ERROR in ./src/components/Login.js 7:0-41
Module not found: Error: Can't resolve 'react-bootstrap' in '/Users/k.morikawa/Downloads/react-try/my-app/src/components'

ERROR in ./src/components/Logout.js 6:0-41
Module not found: Error: Can't resolve 'react-bootstrap' in '/Users/k.morikawa/Downloads/react-try/my-app/src/components'

webpack compiled with 3 errors
^C
k.morikawa@gdcadminnoMacBook-Pro-2 my-app % 

出现了错误。
安装了react-firebase-hooks/auth。

npm install react-bootstrap-validation --save

将 react-firebase-hooks 和 react-bootstrap 安装进去。

npm install --save react-firebase-hooks 
npm install react-bootstrap-validation --save

再次运行 npm start ，它能正常工作！

总结

我只用了少量的编码就实现了使用Google身份验证进行登录。我没有提供源代码的详细说明，但我会在下次发布时提供更详细的说明。
虽然详细了解源代码也是必要的，但首先让其运行起来是最重要的，因为这样可以保持动力。我在写这篇文章时就想让人们先运行代码，而不是过于担心细节的源代码。
如果有任何问题，请务必告诉我。

最终

如果有任何不熟悉的朋友们，年轻的工程师们，在学习方法上有任何疑问，请随时提问！我将继续撰写文章，希望得到你们的关注和赞，以提高动力。