NgSysV.A Serious Svelte InfoSys：客戶端-伺服器版本

// server-side +server.js code
export async function POST({ request }) {
  const { idToken } = await request.json();
}

// src/routes/login-and-set-cookie/+page.svelte
<script>
    import { onMount } from "svelte";
    import { auth, app } from "$lib/utilities/firebase-client";
    import { goto } from "$app/navigation"; // SvelteKit's navigation for redirection
    import { signInWithEmailAndPassword } from "firebase/auth";

    let redirect;
    let email = "";
    let password = "";

    onMount(() => {
        // Parse the redirectTo parameter from the current URL
        const urlParams = new URLSearchParams(window.location.search);
        redirect = urlParams.get("redirect") || "/";
    });

    // this code will run after a successful login.
    auth.onAuthStateChanged(async (user) => {
        if (user) {
            const idToken = await user.getIdToken();

            console.log("In login_awith-cookie : idToken: ", idToken);

            // Send token to the server to set the cookie
            fetch("/api/set-cookie", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ idToken }),
            });

            window.alert("In with-cookie : cookie set");
            goto(redirect);
        }
    });

    async function loginWithMail() {
        try {
            const result = await signInWithEmailAndPassword(
                auth,
                email,
                password,
            );
        } catch (error) {
            window.alert("login with Mail failed" + error);
        }
    }
</script>

<div>





<pre class="brush:php;toolbar:false">// src/routes/api/set-cookie/+server.js
import admin from 'firebase-admin';
import cookie from 'cookie';

export async function POST({ request }) {
  const { idToken } = await request.json();

  try {
    // Verify the token with Firebase Admin SDK
    const decodedToken = await admin.auth().verifyIdToken(idToken);

    // Use the cookie.serialize method to create a 'Set-Cookie' header for inclusion in the POST
    // response. This will instruct the browser to create a cookie called 'idToken' with the value of idToken
    // that will be incorporated in all subsequent browser communication requests to pages on this domain.

    const headers = {
      'Set-Cookie': cookie.serialize('idToken', idToken, {
        httpOnly: true,          // Ensures the cookie is only accessible by the web server
        secure: true,            // Ensures the cookie is only sent over HTTPS
        sameSite: 'None',        // Allows the cookie to be sent in cross-site requests
        maxAge: 60 * 60,         // 1 hour (same as Firebase ID token expiry)
        path: '/'                // Ensures the cookie is sent with every request, regardless of the path.
      })
    };

    let response = new Response('Set cookie from login', {
      status: 200,
      headers,
      body: { message: 'Cookie set successfully' }  // Optional message
    });

    console.log("Cookie set")

    return response;

  } catch (err) {
    console.error("Error in login server function: ", err);

    let response = new Response('Set cookie from login', {
      status: 401,
      body: { message: 'Unauthorized' }  // Optional message
    });

    return response;
  }
};

// src/routes/products-maintenance-sv/ page.svelte

    從“svelte”導入{onMount}；
    從“$lib/utilities/firebase-client”導入{auth}；
    從“$app/navigation”導入{goto}；
    從“$lib/utilities/productNumberIsNumeric”導入{productNumberIsNumeric}；

    // 將對驗證狀態變更的檢查放在 onMount 內的 onAuthStateChanged 回呼中。這似乎
    // 奇怪，但似乎是完成伺服器端活動並使 auth.currentUser 進入穩定狀態的唯一方法
    // 狀態。這在客戶端“規則友好”版本上不是問題，但很快就成為問題
    // 新增了帶有 actions() 的 page.server.js 檔案。

    onMount(異步() => {
        auth.onAuthStateChanged（非同步（使用者）=> {
            if (!auth.currentUser) {
                // 如果未通過身份驗證，則重定向到登入。該參數告訴登入如何返回這裡
                goto(“/login-and-set-cookie?redirect=/products-maintenance-sv”);
            }
        });
    });

    讓產品編號；
    讓產品詳細資訊；

    讓產品編號類別=「產品編號」；
    讓submitButtonClass =“submitButton”;

    出口許可證表格；
腳本>


    
        產品編號
        



<p>要在您的開發伺服器中執行此程序，請先使用 http://localhost:5173/logout 登出。然後執行http://localhost:5173/products-maintenance-sv。這將邀請您登入登入並設定 cookie 頁面。 </p>

<p>成功登入後，您將看到熟悉的表單，邀請您建立新產品。 </p>

<p>此時，登入並設定 cookie 頁面應該已在您的瀏覽器中安全地設定了 idToken cookie。當您輸入資料並提交表單時，控制權將傳遞到 products-maintenance-sv/page.server.js 中的伺服器端程式碼。它透過呈現專案中內建的服務代碼來進行自身驗證，然後從 Sveltekit 請求中的表單物件中取得標頭中的 idToken 及其輸入資料。程式碼不會對 idToken 中可用的使用者資料執行任何有用的操作，但會在 VSCode 終端機中顯示一條顯示 userEmail 值的日誌訊息。最後，Firestore 管理程式碼會將新產品新增至產品資料庫集合中。 </p>

<p>您可以透過執行舊的 http://localhost:5173/products-display-rf 頁面來確認更新已成功應用。 </p>

<p>請注意，提交表單後，它會顯示一條確認訊息並清除其輸入欄位。 「表單刷新」是表單提交後 Javascript 的預設操作。 </p><p>您可能想知道當http://localhost:5173/products-display-rf 頁面仍在執行Firestore <strong>客戶端</strong> API 程式碼伺服器端並在產品集合上設定Firestore 驗證規則時，它是如何工作的。不同之處在於這些規則僅適用於寫入。 products-display-rfcode 只是讀取文件。 </p>

<p>在實踐中，我認為如果您擔心避免混淆並決定創建 products-display-sv 的 products-display-sv 版本，您會希望在整個過程中使用 Firestore <strong>Admin</strong> API 呼叫。但請記住，您需要先提供您的服務帳戶憑證來初始化應用程式。 </p>

<h3>
  
  
  三、總結
</h3>

<p>這是一篇很長的文章，將會讓您的 Javascript 達到極限。如果你此時仍然和我在一起——幹得好。真的，幹得好——你表現出了非凡的毅力！ </p>

<p>上一篇文章介紹的「客戶端」技術使用起來很愉快，但我希望您會欣賞伺服器端安排的安全性和速度優勢。憑藉經驗，伺服器端程式碼開發將變得像客戶端工作一樣簡單自然。 </p>

<p>但是還有一件事要做。儘管您現在已經開發了一個包含許多頁面的 Web 應用程序，這些頁面在您的開發伺服器中運作得很好，但這些頁面在 Web 上尚不可見。 </p>

<p>下一篇文章將告訴您如何「建置」和部署」您的 Web 應用程式到 Google AppEngine 上，從而將其發布給熱切的公眾。這將是一個重要的時刻！</p>

<p>我希望您仍有精力繼續閱讀並找出您需要做什麼。不是太難。 </p>

<h3>
  
  
  後記：當出現問題時 - 在檢查器中查看標題
</h3>

<p>實際上，在本節中可能出現問題的地方可能接近無限。盡量不要過度恐慌，並密切注意專案的文件結構。很容易將正確的程式碼放入錯誤的檔案中，或將正確的檔案放入錯誤的資料夾中。此外，您可能會發現透過終止並重新啟動終端會話定期「清理地面」很有幫助。至少，這可以讓您在尋找錯誤序列的最初原因時獲得一張乾淨的紙。 </p>

<p>但是，由於您現在正在使用標頭和 cookie，您也會發現了解瀏覽器的檢查器工具可以讓您直觀地了解這些內容很有用。檢查器可以<strong>向您顯示</strong>嵌入在頁面請求標頭中的cookie。 </p><p>要查看此功能的運作情況，首先請確保您已使用 https://myLiveUrl/logout 在即時系統上登出（其中 myLiveUrl 是您部署的 Web 應用程式的位址）。然後執行 products-maintenance=sv 頁面（網址為 https://https://myLiveUrl/products-maintenance-sv）。登入後，開啟「輸入新產品」表單上的檢查器，然後按一下「網路」標籤。現在顯示頁面發出的網路請求的清單。 </p>

<p>現在使用網路應用程式插入新產品並注意「請求」清單是如何刷新的。這些是執行簡單更新所需的網路請求 - 一個令人驚訝的長列表！向上捲動到此清單的頂部，您應該會找到 products-maintenance-sv 頁面的條目。如果按一下此按鈕，請求清單右側的面板應顯示交易的回應和請求標頭的完整詳細資訊。下面的螢幕截圖顯示了嵌入在請求標頭中的 cookie。 </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173301818045981.jpg" alt="NgSysV.A Serious Svelte InfoSys: A Client-Server Version"></p>