僅使用 JavaScript（無 PHP 或服務器端）創建基本登錄/注冊系統？

Question

我們在大學遇到了一個挑戰，即僅使用客戶端編程創建一個預約系統，到目前為止進展順利。 我目前正在嘗試創建一個非常簡單的登錄系統，以便用戶可以在網站上查看和重新安排他們的預訂，但是我的互聯網搜索提供的幫助很少。我找到了這篇文章（ https://github.com/ zellwk/zellwk.com/blob/master/src/posts/2020-02-05-frontend-login-system.md ），我認為這是直截了當的，但跳了很多，我不確定最終的 JS 布局是什么應該很相似，而且我很難弄清楚如何將我的代碼連接到它（對不起 JS 新手）。

無論如何，我想知道更多是否可以做到，我可以將憑據存儲到我的localStorage嗎？ 我應該使用JSON嗎？ 我將包含我的基本表單代碼，但我更多的是尋求建議和/或如果有人能指出我可以學習如何完成的文章的正確方向，我能找到的只是 PHP/MySQL 登錄教程。

          <form id="basiclogin" name="basiclogin" onsubmit="basicLogin()" class="col-sm-6">
                    <div class="row">
                        <input type="textbox" placeholder="Username" name="email">
                        <input type="textbox" placeholder="Password" name="password">
                        <input type="submit" value="Submit">
                    </div>
                </form>

Answer 1

要構建任何登錄系統，您需要幾個部分：

1. 將輸入憑據的表單，例如 email 和密碼
2. 存放數據的地方。 任何類型的數據庫。 要玩，您可以在輸入標簽客戶端和本地存儲時存儲到瀏覽器的存儲中。

檢查https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB當然，這個數據存儲對於客戶端來說是本地的，客戶端可以查看它並用它做任何事情。 如果你需要真正的身份驗證，你必須有后端。 要么自己運行類似nodejs express服務器的東西，它會再次連接某種數據存儲來存儲數據，或者將它保存在“內存”中，也就是一些object、數組或其他，當然在服務重啟后會丟失。 將數據保存在文件系統中 - 對於任何類型的更現實的應用程序，使用最少的一些文件 - 來自 sqlite 的數據庫，它可以在沒有任何數據庫安裝的情況下運行到像 AWS DynamoDB 這樣瘋狂的東西。

3. 從表單中收集數據並將其轉發到您擁有數據存儲解決方案的地方，並檢查憑據是否正確。 如果數據庫類似於在服務器上運行的 MySQL，則必須將數據發送到后端，使用 POST 請求。

4. 如果您的憑據正確，請檢查以前保存的數據，並返回將在注銷時刪除的用戶標識符。 這通常是 PHP 應用程序的 session id，對於 JS 某種授權令牌，稍后可用於再次調用后端以授權用戶並列出、刪除、更新數據庫中屬於該用戶的某些數據。

因此，當您有存儲用戶憑據數據的地方時，您需要接受來自表單的數據，將其轉發到后端或客戶端 function，如果此登錄數據正確，它將檢查您存儲的數據 - 創建 session id, auth令牌或任何可以識別用戶的臨時標識符，就是這樣，用戶可以使用它進行身份驗證。

如果不能使用服務器端，請使用本地存儲，Web SQL，IndexedDB。 選擇一個，找到一些示例如何保存數據並擺脫它。 所以你可以注冊和登錄。

打開開發工具，這是您的選擇：

它當然是完全不安全的，而客戶端可以完全訪問數據庫並且它沒有“互聯網”的東西，而它只在您的瀏覽器中運行。

當然，我在這里談論的是使登錄概念“發生”的絕對最低限度，希望它可以幫助您了解系統如何工作:)