JavaScriptログインしないで制限付きページにアクセスしないようにする

Question

ページに記録された後にログインページがあります。私は次のページに移動します（歓迎）。 問題は、次のページ（歓迎）ページのURLをコピーして貼り付けると、ログインアクセスなしで次のページを開くように制限したいということです。 ガイド私に何をするか。

スクリプト

function click() { 
    inputname = $('#name').val(); 
    inputpassword =$('#pass').val(); 

    for (i in data.username)  //to match username with provided array 
     { 
     name = data.username[i]; 

     for (i in data.password){ 
      pass = data.password[i]; 

      if (inputname == name & inputpassword == pass){ 
       window.open('welcome1.html','_self'); 
      }    
     } 
    } 

    if (inputname != name & inputpassword != pass){ 
     alert("Wrong Password"); 
    } 
} 

HTML

<input type="mail" id="name"> 
<input type="password" id="pass"> 
<input type="submit" id="submit" value="log In" onclick= "click()"> 

Answer 1

これは、認証の安全な方法ではありません。このソリューションは、安全にしたいシステム上にあってはなりません。認証は、クライアントではなくサーバー上で行う必要があります。

あなたの質問では、ユーザーが最初のページで認証された場合、2番目のページにチェックインすることはありません。これを確認するには、セッションストレージを使用する必要があります。

// LOGIN.js 
 
function click() { 
 
    inputname = $('#name').val(); 
 
    inputpassword =$('#pass').val(); 
 

 
    for (i in data.username)  //to match username with provided array 
 
    { 
 
     name = data.username[i]; 
 

 
     for (i in data.password){ 
 
      pass = data.password[i]; 
 

 
      if (inputname == name & inputpassword == pass){ 
 
       //The user has successfully authenticated. We need to store this information 
 
       //for the next page. 
 
       sessionStorage.setItem("AuthenticationState", "Authenticated"); 
 
       
 
       //This authentication key will expire in 1 hour. 
 
       sessionStorage.setItem("AuthenticationExpires", Date.now.addHours(1)); 
 
       
 
       //Push the user over to the next page. 
 
       window.open('welcome1.html','_self'); 
 
      }    
 
     } 
 
    } 
 

 
    if (inputname != name & inputpassword != pass){ 
 
     alert("Wrong Password"); 
 
    } 
 
} 
 

 
//addHours to a date. 
 
//Credit to: Kennebec 
 
//https://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object 
 
Date.prototype.addHours = function(h) {  
 
    this.setTime(this.getTime() + (h*60*60*1000)); 
 
    return this; 
 
}

<!-- LOGIN.html ---> 
 

 
<input type="text" id="name" name="name" /> 
 
<input type="text" id="pass" name="pass" /> 
 
<input type="submit" id="sub" name="sub" onclick="click();" />

してから2番目のページに、ユーザーが認証されているかどうかを確認してください。そうでない場合は、アクセス拒否ページにプッシュします。

//Is the user authenticated? 
 
if (sessionStorage.getItem('AuthenticationState') === null) { 
 
    window.open("AccessDenied.html", "_self"); 
 
} 
 
//Is their authentication token still valid? 
 
else if (Date.now > new Date(sessionStorage.getItem('AuthenticationExpires'))) { 
 
     window.open("AccessDenied.html", "_self"); 
 
} 
 
else { 
 
    //The user is authenticated and the authentication has not expired. 
 
}