Example login with javascript

Asked

Viewed 5,228 times

-1

How do I get this login to accept 3 users? And being a valid user it directs to the index?

function Login() {
  var done = 0;
  var usuario = document.getElementsByName('username')[0].value;
  usuario = usuario.toLowerCase();
  var senha = document.getElementsByName('password')[0].value;
  seha = senha.toLowerCase();

  if (usuario == "bcf" && senha == "bcf") {
    window.location = "index.html";
    done = 1;
  }
  if (done == 0) {
    alert("Dados incorretos, tente novamente");

  }
}
<div class="row">
  <div class="container login col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
    <br />
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="title-login">Login</h1>
      </div>
      <div class="panel-body">
        <form method="post">

          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon"> <i
										class="glyphicon glyphicon-user" style="width: auto"></i>

									</span> <input id="txtUsuario" runat="server" type="text" class="form-control" name="username" placeholder="Usuário" required="" />

            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon"> <i
										class="glyphicon glyphicon-lock" style="width: auto"></i>
									</span> <input id="txtSenha" runat="server" type="password" class="form-control" name="password" placeholder="Senha" required="" />
            </div>
          </div>
          <!--div class="alert alert-danger">
								<strong>Atenção!</strong> Usuário e/ou senha incorretos.
							</div-->
          <div>
            <input class="btn btn-xm btn-block btn-entrar" type="submit" value="Entrar" onclick="Login()" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

javascript login logic

  • You are entering the password in lowercase?

  • 2

    The two current responses already mention this, but I will insist: you are aware that the safety of this method is zero, right? Anyone who knows how to work the browser console or display the source code will be able to see the login list and password. There is no 100% secure solution in client-size JS, login is to be handled on the server.

  • I’m just exercising my js because of college

  • Ok Isa, I just wanted to make sure that you knew what you were doing. I’ll keep the note up for unsuspecting ones to get here by google.

  • I asked if you type the passwords in lower case because of this: seha = senha.toLowerCase(); - Note that you used seha without the letter n.

2 answers

2

I would put valid users in a JSON variable.

However, the correct thing would be to validate this in a back-end. Otherwise, it’s very easy to get everyone’s passwords and the security of that is zero.

Ah, note that in HTML, I’m using onclick="return Login()". That one return there is very important. The function Login() returns true or false.

var usuarios = [
    {"login": "bcf", "senha": "bcf"},
    {"login": "mamae", "senha": "abacaxi"},
    {"login": "papai", "senha": "melancia"},
];

function Login() {
    var usuario = document.getElementsByName('username')[0].value.toLowerCase();
    var senha = document.getElementsByName('password')[0].value;

    for (var u in usuarios) {
        var us = usuarios[u];
        if (us.login === usuario && us.senha === senha) {
            window.location = "index.html";
            return true;
        }
    }
    alert("Dados incorretos, tente novamente.");
    return false;
}
<div class="row">
  <div class="container login col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
    <br />
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="title-login">Login</h1>
      </div>
      <div class="panel-body">
        <form method="post">
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-user" style="width: auto"></i>
              </span>
              <input id="txtUsuario" runat="server" type="text" class="form-control" name="username" placeholder="Usuário" required="" />
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">
                <i class="glyphicon glyphicon-lock" style="width: auto"></i>
              </span>
              <input id="txtSenha" runat="server" type="password" class="form-control" name="password" placeholder="Senha" required="" />
            </div>
          </div>
          <!--div class="alert alert-danger">
            <strong>Atenção!</strong> Usuário e/ou senha incorretos.
          </div-->
          <div>
            <input class="btn btn-xm btn-block btn-entrar" type="submit" value="Entrar" onclick="return Login()" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

  • I used his example but he still doesn’t direct to another page, because?

  • @Isa I edited the answer. And now?

  • not yet. page gives an updated but back to login same, does not change page

  • @Isa What was to be "index.html"? The test I did here, by typing one of the three registered logins/passwords, goes to a page where it is written "The custom error module does not recognize this error." - When typing anything else, appears the alert. The reason for this is that it tries to redirect to the stacksnippets "index.html" (which is where the javascript examples of stackoverflow run), but obviously, they don’t have an "index.html". What should happen if the password is accepted?

  • I created another page to redirect, and nothing happens. If the login was accepted I would have to direct to another page

  • @Isa The test here, by clicking on the "Run" button above works (even if it falls on "The custom error module does not recognize this error.")? If yes, then your problem is somewhere else in your system other than what you posted in the question. If not, then I’d like to know what happened instead.

Show 1 more comment

0

The right thing would be... 

function Login(event) {
  event.preventDefault();
  var usuario = document.getElementsByName('username')[0].value;
  usuario = usuario.toLowerCase();
  var senha = document.getElementsByName('password')[0].value;
  senha = senha.toLowerCase();

  if (usuario == "bcf" && senha == "bcf") {
    alert("dados corretos");
    window.location = "index.html";
  }else{
    alert("Dados incorretos, tente novamente");
  }
}
<div class="row">
  <div class="container login col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
    <br />
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="title-login">Login</h1>
      </div>
      <div class="panel-body">
        <form method="post">

          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon"> <i
										class="glyphicon glyphicon-user" style="width: auto"></i>

									</span> <input id="txtUsuario" runat="server" type="text" class="form-control" name="username" placeholder="Usuário" required="" />

            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon"> <i
										class="glyphicon glyphicon-lock" style="width: auto"></i>
									</span> <input id="txtSenha" runat="server" type="password" class="form-control" name="password" placeholder="Senha" required="" />
            </div>
          </div>
          <!--div class="alert lert-danger">
								<strong>Atenção!</strong> Usuário e/ou senha incorretos.
							</div-->
          <div>
            <input class="btn btn-xm btn-block btn-entrar" type="submit" value="Entrar" onclick="Login(event)" />
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<script>

</script>

But this should never be implemented in production.

Browser other questions tagged javascript login logic

You are not signed in. Login or sign up in order to post.