前面已經介紹兩個 Firebase 的服務，怎麼能錯過第三方登入呢？！
我第一次串接的契機是，我真他媽受不了那個主管，偷偷出去面試，進而遇到某家公司的小測驗，它需求之一就是串接第三方登入，第二次就是現在公司裡的某專案的需求。今天就暫時撇開爛人爛事，以小測驗的 Google 第三方登入為例，簡單説説串接的過程吧～

1. 施展地獄業火的魔法第一步：
   在 Firebase 建立專案，新增應用，並取得 Firebase SDK，並回到自己的專案本身進行初始化，過程可以參考我的這篇～

2. 施展地獄業火的魔法第二步：
   回到 Firebase 的專案，點開側欄的 Authentication
   
   並點開登入方式，可以看到很多的選擇，選擇 Google
   
   點開啟用的 toggle，會看到這樣的畫面，這邊可以修改專案的公開名稱，並設置支援的 eamil，填完後即可點按儲存
   
   這樣就完成新增登入的選項了
   

3. 施展地獄業火的魔法第三步：
   回到專案本身，打開 firebase.js，在其中加入：

   import { getAuth } from 'firebase/auth';
   
   const auth = getAuth(app)
   
   export { auth }
   

4. 施展地獄業火的魔法第四步：
   在 Google 第三方登入按鈕牽上這個登入邏輯：

   import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
   import { auth } from "../firebase";
   
   export const signInWithGoogle = async () => {
     try{
       //Firebase 提供內建的 Google 帳號登入機制，這裡初始化一個供應商物件
       const provider = new GoogleAuthProvider();
       //使用 signInWithPopup 來彈出 Google 登入視窗，讓用戶選擇 Google 帳號登入
       const result = await signInWithPopup(auth, provider);
       const userEmail = result.user.email
   
       if (!userEmail || typeof userEmail !== "string") return null
   
       await setDoc(doc(db, "users", userEmail), {
         email: userEmail
       })
        return result.user;
      }catch{
        return null
      }
   }
   

   就算完成了～

在公司的專案，作法稍微再複雜一點：Google 第三方登入成功後，Google 回傳的憑證，也就是 result 那包，會傳給後端，去跟 Google 驗證這個憑證，驗證成功後，後端才會建立或查詢系統中的使用者帳號，並產生
token 回傳給前端。

Firebase 系列就先這樣吧～原本明天想要繼續講 LINE 第三方登入的串接，但明天連假最後一天，想來講一個烤肉稍微相關的套件，為中秋節預先應景一下～