Login with authentication token using jquery and ajax

Asked

Viewed 328 times

2

I’m venturing to try to log in using token for authentication, using jquery and ajax. I have the user screen and password with the login button and another screen where there is a table with information for the user to move. When I click the login button it returns me the user name, a JWT token and the expiration of that token.

What I’m trying to do is that by clicking on the login it records this token on the server and goes straight to the screen with the table, taking the token with it. When the token expires he will have it logged in again. Someone can give me a light?

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Login</title>

<link href="index-css/login.css" rel="stylesheet">
<link href="index-css/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="index-css/site_global.css?crc=444006867" />

</head>

<body>

<img src="imagens/telabg.jpg" alt="pontual-logo" />
<style>
    img {
        width: 100%;
        height: 400%;
    }
</style>

<!-- BOX DE CADASTRO -->

<form action="https://www.teste.teste.com:3000/api/v1/sign-in " method="post" name="login" id="login">
    <div class="box">
        <div class="box-top">
            <p style="position:absolute; top:30px; left:160px; color:white; font-size: 150%;">Logar</p>

        </div>

    </div>

    <div>
        <input type="text" id="name" class="input_text" name="name" placeholder="Usuário" value="pontual">

        <div class="container">

            <input type="password" id="password" name="password" class="input_text" placeholder="Senha" value="#P0ntu@l">
            <i id="eye" class="fa fa-eye"></i>
        </div>

        <script>
            // script mostrar/ocultar senha
            var senha = document.getElementById('senha');
            var eye = document.getElementById('eye');

            eye.addEventListener('click', togglePass);

            function togglePass() {

                eye.classList.toggle('active');
                (senha.type == 'password') ? senha.type = 'text':
                    senha.type = 'password';
            }
        </script>

        <input type="hidden" class="input_text" name="type_login" id="type_login" value="service" />
        <div>

        </div>

    </div>

    <button type="submit" id="salvar" name="myButton" value="foo">Logar</button>

    </div>
</form>

</body>

</html>

No answers

Browser other questions tagged

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