时间戳

首页 > 解决方案 > 仅使用 JavaScript（无 PHP 或服务器端）创建基本登录/注册系统？

javascript - 仅使用 JavaScript（无 PHP 或服务器端）创建基本登录/注册系统？

问题描述

我们在大学遇到了一个挑战，即仅使用客户端编程创建一个预约系统，到目前为止进展顺利。我目前正在尝试创建一个非常简单的登录系统，以便用户可以在网站上查看和重新安排他们的预订，但是我的互联网搜索提供的帮助很少。我找到了这篇文章（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>

标签： javascriptjsonauthenticationlocal-storageclient-side

解决方案

要构建任何登录系统，您需要几个部分：

  1. 将输入凭据的表单，例如电子邮件和密码
  2. 存放数据的地方。任何类型的数据库。要玩，您可以在输入标签客户端和本地存储时存储到浏览器的存储中。

检查https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB 当然，这个数据存储对于客户端来说是本地的，客户端可以查看它并用它做任何事情。如果你需要真正的身份验证，你必须有后端。要么自己运行类似nodejs express服务器的东西，它会再次连接某种数据存储来存储数据，要么将其保存在“内存”中，即某个对象、数组或其他，当然，在服务重启后会丢失。将数据保存在文件系统中 - 对于任何类型的更现实的应用程序，使用最少的一些文件 - 从 sqlite 可以在没有任何数据库安装的情况下运行的数据库到像 AWS DynamoDB 这样疯狂的东西。

  1. 从表单中收集数据并将其转发到您拥有数据存储解决方案的地方，并检查凭据是否正确。如果数据库类似于在服务器上运行的 MySQL，则必须将数据发送到后端，使用 POST 请求。

  2. 如果您的凭据正确，请检查以前保存的数据，并返回将在注销时删除的用户标识符。这通常是 PHP 应用程序的会话 ID，对于 JS 某种授权令牌，稍后可用于再次调用后端以授权用户并列出、删除、更新数据库中属于该用户的某些数据。

因此，当您有存储用户凭据数据的地方时，您需要从表单接受数据，将其转发到后端或客户端功能，如果此登录数据正确，则该功能将检查您存储的数据 - 创建会话 ID，身份验证令牌或任何可以识别用户的临时标识符，就是这样，用户可以使用它进行身份验证。

如果不能使用服务器端，请使用本地存储、Web SQL、IndexedDB。选择一个，找到一些示例如何保存数据并摆脱它。所以你可以注册和登录。

打开开发工具，这是您的选择： 在此处输入图像描述

它当然是完全不安全的，而客户端可以完全访问数据库并且它没有“互联网”的东西，而它只在您的浏览器中运行。

当然，我在这里谈论的是使登录概念“发生”的绝对最低限度，希望它可以帮助您了解系统如何工作:)

推荐阅读