Mulitple Benutzer und Passwörter Javascript Login

Question

Ich weiß nicht, ob das möglich ist, ich bin neu in js, also behalte das im Hinterkopf. Ich möchte mehrere Passwörter und mehrere Benutzernamen in meiner kleinen Form haben. Der Javascript-Code ist:

var attempt = 3; 
function validate(){ 
var username = document.getElementById("username").value; 
var password = document.getElementById("password").value; 
if (username == "root" && password == "root"){ // here is password and username 
sweetAlert ("Login successfully"); 
window.location = "success.html"; 
return false; 
} 
else{ 
attempt --;// Decrementing by one. 
sweetAlert("You have "+attempt+" attempt(s) left."); 
// Disabling fields after 3 attempts. 
if(attempt == 0){ 
sweetAlert("Oops...", "You have failed to log in 3 times, Fields have been turned off. Please try again later", "error"); 
document.getElementById("username").disabled = true; 
document.getElementById("password").disabled = true; 
document.getElementById("submit").disabled = true; 
return false; 
} 
} 

Answer 1

Hier ist eine Lösung, die eine Karte verwendet, um die Logins und Passwörter zu speichern. Es ist leichter zu handhaben als die Verwendung von if Anweisungen, da jede Anmeldung eine Änderung Ihrer Logik bedeuten würde.

let 
 
    attempts = 3, 
 
    logins = new Map([ 
 
    ['root', 'root'], 
 
    ['admin', 'admin'] 
 
    ]); 
 
    formElement = document.getElementById('form'); 
 

 
function disableForm() { 
 
    const 
 
    usernameInput = document.getElementById('username'), 
 
    passwordInput = document.getElementById('password'), 
 
    submitButton = document.getElementById('submit'); 
 

 
    usernameInput.setAttribute('disabled', 'disabled'); 
 
    passwordInput.setAttribute('disabled', 'disabled'); 
 
    submitButton.setAttribute('disabled', 'disabled'); 
 
} 
 

 
function decreaseAttemptsLeft() { 
 
    // Decrease attempts by 1. 
 
    attempts--; 
 
    
 
    // Check if attempts is 0... 
 
    if (attempts === 0) { 
 
    // ... and disable the form controls. 
 
    disableForm(); 
 
    // ... and show the user a message. 
 
    alert('You have failed to log in 3 times, Fields have been turned off. Please try again later'); 
 
    } else { 
 
    // Show a message with login attempts left. 
 
    const 
 
     message = `You have ${attempts} attempt(s) left.`; 
 
    alert(message); 
 
    } 
 
} 
 

 
function onFormSubmit(event){ 
 
    // prevent the actual form submission. 
 
    event.preventDefault(); 
 
    
 
    const 
 
    usernameInput = document.getElementById('username'), 
 
    passwordInput = document.getElementById('password'); 
 
    
 
    if (
 
    // When the logins map doesn't have a key for the username OR 
 
    !logins.has(usernameInput.value) || 
 
    // The password doesn't match the value for the user name 
 
    logins.get(usernameInput.value) !== passwordInput.value 
 
) { 
 
    // Decrease the number of attempts left. 
 
    decreaseAttemptsLeft(); 
 
    // Exit the method. 
 
    return; 
 
    } 
 
    
 
    // Show the success message. 
 
    alert('Login success!'); 
 
    // Reset the attempts counter. 
 
    attempts = 3; 
 
} 
 
    
 
form.addEventListener('submit', onFormSubmit);

<form id="form"> 
 
    <label> 
 
    Username: 
 
    <input type="text" id="username"/> 
 
    </label> 
 
    <label> 
 
    Password: 
 
    <input type="password" id="password"/> 
 
    </label> 
 
    
 
    <button id="submit">Login</button> 
 
</form>

Nur ganz klar zu sein: Das ist extrem schlechte Sicherheit. Mach das nicht für etwas anderes, als deine kleine Schwester/deinen Bruder zu täuschen.

Answer 2

Dies kann mit einer else if Anweisung gelöst werden.

if (username == "root" && password == "root") { 
    // login user 1 
} 
else if(username == "username2" && password == "password2") { 
    // login user 2 
} 
else { 
    // reject 
} 

Beachten Sie, dass (wie dies vor Ort zu sein scheint auf dem Browser des Benutzers ausgeführt wird) es trivial wäre für einen Benutzer den Code direkt auf der Seite zu bearbeiten jede Anmeldung zu akzeptieren, die sie wählen. Sehen Sie sich an, um die Anmeldeinformationen des Benutzers auf dem Server zu akzeptieren, wobei nur Sie auswählen können, welcher Benutzername und welches Passwort funktionieren.