使用JavaScript(初学者)获得用户和密码身份验证

我正在研究前端开发，目前正在与其他5位同事一起从事一个项目。我必须实现登录页面。我们还必须实现寄存器和注销页面。这就是我的HTML的一部分和登录页面的JS代码的样子，看起来像：

<script src="../models/Auth.js" type="text/javascript"></script>

<body>
  <div class="login-box">
    <h1>Login here</h1>
       <form>
        <p id ="Username">Username</p>
        <input type= "text"  placeholder = "Enter Username">
        <p id ="Password">Password</p>
        <input type= "password"  placeholder =" Enter Password">
        <input type="submit" id="submitButton" value ="Login">
            <a href="#"> Lost your password?</a><br>
            <a href="#"> Don't have an account?</a>
    </form>
</div>

(Javascript)
window.addEventListener("load",function (){
var username = document.getElementById("Username");
var password = document.getElementById("Password");
var submit=document.getElementById("submitButton");
var messageContainer=document.getElementById("Login");
var auth =new Auth();
submit.addEventListener("click",function ()
{
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
});
auth.Login();


auth.Login(username,password)
.then(function(response){
const token=response.accessToken;
auth.login(auth.Token);
auth.token=token;
document.cookie="accessToken="+token;
console.log(response.accessToken);
})
.catch(function(e) {
console.log(e) ;
loginContainer.innerHTML=e.status+ " You have to be registered in order to 
login";
});
});

function Auth(){
}
Auth.prototype.Login=function(Username, Password){
var root = 'https://ancient-caverns-16784.herokuapp.com';
return $.post(root+"/auth/login",{
username: 'test',
   password: 'test'
},
function(response) {
var xmlhttp = new XMLHttpRequest();
console.log(xmlhttp);
xmlhttp.open("post", "Login", true);
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 401 && xmlhttp.status == 200) {
        loginResults();
    }
 };
 console.log(response);
 });

 };

据我了解，我只需要将用户名和密码添加到auth功能中即可。我遇到了一个错误，上面写着：auth.login不是一个函数。我想念什么吗？我将感谢提供的任何帮助。

谢谢！

您必须通过其标签包围所有JavaScript代码。例如：

<script>
window.addEventListener("load",function (){
var username = document.getElementById("Username");
var password = document.getElementById("Password");
var submit=document.getElementById("submitButton");
var messageContainer=document.getElementById("Login");
var auth =new Auth();
submit.addEventListener("click",function ()
{
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
});
auth.Login();


auth.Login(username,password)
.then(function(response){
const token=response.accessToken;
auth.login(auth.Token);
auth.token=token;
document.cookie="accessToken="+token;
console.log(response.accessToken);
})
.catch(function(e) {
console.log(e) ;
loginContainer.innerHTML=e.status+ " You have to be registered in order to 
login";
});
});

function Auth(){
}
Auth.prototype.Login=function(Username, Password){
var root = 'https://ancient-caverns-16784.herokuapp.com';
return $.post(root+"/auth/login",{
username: 'test',
   password: 'test'
},
function(response) {
var xmlhttp = new XMLHttpRequest();
console.log(xmlhttp);
xmlhttp.open("post", "Login", true);
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 401 && xmlhttp.status == 200) {
        loginResults();
    }
 };
 console.log(response);
 });

 };
</script>

相关内容

最新更新

热门标签：