React 如何使用 firebase 串接 fb 或 google 登入 ?

串接 facebook 或 google 登入，如果沒有使用 firebase 的話，可以直接引入 js sdk。

但是如果是要使用 firebase 整套驗證，就要在專案中安裝firebase套件。

安裝 firebase

內容都是參考官網步驟

$ yarn add firebase

裝好之後要初始化，先登入到你的firebase後台

這個前提是你已經創建好一個 firebase 專案並且創建好應用程式了。

點選專案總覽右邊的小齒輪，選擇「專案設定」

找到應用程式，複製裡面的 firebaseConfig。（如果你沒有應用程式，就右上角按下去新增一個web的。）

新增一個檔案hook/firebase.js

再新增一個檔案/assets/serviceAccountKey.json

把json檔案引入到firebase.js。

import { initializeApp } from "firebase/app";
import FirebaseConfig from "assets/serviceAccountKey.json";
const useFirebase = () => {
  initializeApp(FirebaseConfig);
};
export default useFirebase;

{
  apiKey: "...",
  authDomain: "....firebaseapp.com",
  projectId: "...",
  storageBucket: "....appspot.com",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "G-..."
};

從App.js引用

import useFirebase from "hook/firebase";
export default function App(props) {
  useFirebase();
//...
}

 

使用facebook登入

首先我們應該會有一個facebook登入按鈕

const LoginPage = () => {
  return <button>使用facebook登入</button>
}

export default LoginPage

新增一個檔案hook/facebook.js

import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
const useFB = () => {
  const handleLoginFB = () => {
    const provider = new FacebookAuthProvider();
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then(async result => {
        const user = result.user;
        console.log(user);
        // 在這邊把user資料寫入locaStorage或是進行後端寫入資料庫等等的操作
      })
      .catch(error => {
        console.log(error, credential);
      });
  };
  return { handleLoginFB };
};
export default useFB;

在頁面中引用：

import userFB from "hook/facebook"
const LoginPage = () => {
  const { handleLoginFB } = userFB();
  return <button onClick={handleLoginFB}>使用facebook登入</button>
}

export default LoginPage

  

使用google登入

首先我們應該會有一個google登入按鈕

const LoginPage = () => {
  return <button>使用google登入</button>
}

export default LoginPage

新增一個檔案hook/google.js

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
const useGoogle = () => {
  const handleLoginGoogle = async () => {
    const provider = new GoogleAuthProvider();
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then(async result => {
        const user = result.user;
        console.log(user);
        // 在這邊把user資料寫入locaStorage或是進行後端寫入資料庫等等的操作
      })
      .catch(error => {
        console.log(error);
      });
  };

  return { handleLoginGoogle };
};
export default useGoogle;

在頁面中引用：

import userGoogle from "hook/google"
const LoginPage = () => {
  const { handleLoginGoogle } = userGoogle();
  return <button onClick={handleLoginGoogle}>使用google登入</button>
}

export default LoginPage