如何在没有注册的情况下创建一个简单的安全登录系统？

Question

我正在尝试在我的网站上创建一个不需要任何注册过程的简单登录系统。 我将为每个要使用的客户端设置用户名和密码。

基本上，这个想法是有一个登录页面，允许客户访问和查看文件和信息（而不是使用电子邮件）。

下面代码的问题在于“用户名”和“密码”是硬编码的，即可以通过“检查元素”功能轻松查看。

由于我是新手，我想知道是否可以创建一个简单的安全系统而不使用数据库和 php。

HTML：

<form name="login" class="form">
        <p class="title">Client Dashboard</p>
        <p class="login-description">This dashboard allows you to manage your project and files</p>
        <input type="text" name="userid" placeholder="Username" class="text-field"/>
        <input type="password" name="pswrd" placeholder="Password" class="text-field"/>
        <input type="submit" class="button" onclick="check(this.form)" value="Login"/>
</form>

Javascript：

function check(form) { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if(form.userid.value == "johnsmith" && form.pswrd.value == "password123") {
                window.open('dashboard.html')/*opens the target page while Id & password matches*/
            }
            else {
                alert("Error Password or Username")/*displays error message*/
            }
        }

Answer 1

尽管客户端代码拥有登录凭据很危险，但您可以将用户信息存储在对象数组中，然后检查数组是否具有这些值。

var users = [{
  username: 'admin',
  password: 'abc123'
},{
  username: 'user1',
  password: '321cba'
}];

var index = users.indexof(function (user) {
  return users.username === user.username &&
  users.password === user.password;
})

if (index !== -1) {
  window.open('dashboard.html')/*opens the target page while Id & password matches*/
}
else {
  alert("Error Password or Username"
)/*displays error message*/