如何將 Firebase 身份驗證添加到您的 Webflow 網站

使用 Webflow，您可以添加自定義代碼以創建簡單的用戶身份驗證流程。這使得您可以在網站中添加會員專屬頁面並實現用戶身份驗證。

查看此處的項目預覽：演示

項目設置

首先，您需要創建一個 Firebase 免費項目並擁有一個具有活動主機計劃的 Webflow 項目。

設置 Firebase

設置 Firebase 非常簡單，您只需創建一個帳戶，然後將獲得一個嵌入式網站的配置代碼。本教程的最後一部分將介紹如何將此代碼放入您的網站。

要創建 Firebase 帳戶，請訪問此處的網站，然後使用您的 Google 帳戶登錄。
創建一個新項目並隨意命名。
轉到身份驗證選項並激活 Google 註冊。（您可以使用所有其他註冊選項，但對於本教程，您只需使用 Google 註冊）

‍

在 Firebase 控制台中啟用 Google 身份驗證

轉到授權域名部分，添加您自己的域名。

為 Firebase 登錄授權您的域名

設置 Webflow

首先在 Webflow 中創建一個包含登錄和登出按鈕的登陸頁面（我們的腳本將根據用戶的登錄狀態顯示和隱藏這些按鈕）。
為您的網站添加一個個人資料頁面。在這裡添加一個

條件可見性，以便僅在用戶登錄時顯示它。

整合 Firebase 和 Webflow

首先，從 Firebase 控制台獲取您的 Firebase 設置。選擇項目設置 > 一般 > 您的應用程式 > Firebase SDK 代碼片段 > 配置。複製這段代碼。

接下來，在 Webflow 設置中，轉到項目設置 > 自定義代碼 > 在 </head> 標籤中。在這裡，將複製的 Firebase 配置代碼粘貼到這裡。確保在 <script> 標籤中包裹它。

將 Firebase 代碼粘貼到 Webflow 設置中

現在，我們需要添加自定義登錄和登出腳本。首先，創建一個名為 “firebase-auth.js” 的新 JavaScript 文件。在此文件中添加以下代碼：

javascriptCopy code

// 初始化 Firebase firebase.initializeApp(firebaseConfig); // 檢測用戶狀態變化 firebase.auth().onAuthStateChanged((user) => { if (user) { // 用戶已登錄 document.querySelector(".login").style.display = "none"; document.querySelector(".logout").style.display = "block"; document.querySelector(".user-email").textContent = user.email; } else { // 用戶已登出 document.querySelector(".login").style.display = "block"; document.querySelector(".logout").style.display = "none"; } }); // Google 登錄 function loginWithGoogle() { var provider = new firebase.auth.GoogleAuthProvider(); firebase.auth().signInWithPopup(provider); } // 登出 function logout() { firebase.auth().signOut(); } // 監聽按鈕點擊 document.querySelector(".login").addEventListener("click", loginWithGoogle); document.querySelector(".logout").addEventListener("click", logout);