處理 JavaScript 以允許用戶訪問 html 頁面的最佳方法是什么？

Question

問題：允許用戶輸入並等待直到收到用戶輸入。 如果用戶輸入匹配，則允許用戶訪問該網站。 否則，您將被導航到 error.html。

我嘗試了以下 javascript 代碼。

var code = prompt("Please enter code: ")

function myfunction(code) {
  if (code !=123) {
    window.alert("error has occured.");
    window.location.href="error.html";
  }
}

預期的結果應該是提示允許足夠的時間並輸入授權碼，如果成功我們將顯示頁面內容。

該函數正在正確加載，但沒有足夠的時間輸入密碼，因為幾秒鍾后它會自動重定向到 error.html。 這是因為身體負荷嗎？

如果每個人都可以建議任何額外的驗證，我可以添加，我將不勝感激。

Answer 1

讓我們首先明確這一點：在客戶端處理身份驗證絕對不安全。 即使只有最少量知識的用戶也可以輕松訪問您的網站； 他們所要做的就是查看源代碼以找到您將他們重定向到的“代碼”或 URL。

如果這對用戶來說只是一個小小的減速帶，按照隱藏電影劇透或其他東西的重要性的順序，那可能沒問題； 但是如果你想隱藏任何重要的東西，你必須使用服務器端身份驗證。

安全的客戶端身份驗證是不可能的。

順便說一句：

您的代碼的問題在於提示和您的函數根本沒有相互連接。 您在頁面加載時觸發myfunction() ，而您真正想要的是它在用戶在提示中輸入后運行。

通常，在捕獲用戶輸入時，您需要編寫由（例如）輸入字段的change事件觸發的事件處理程序。 prompt和alert是特殊情況； 與瀏覽器中的幾乎所有其他內容不同，它們在打開時凍結 javascript 執行，並在提示關閉后在下一行代碼處再次拾取。

因此，在使用prompt您根本不想將其結果的測試包裝在一個函數中； 只需將整個內容內聯到您的頁面中：

 var userinput = prompt("Enter the not-actually-a-password") /* JS execution pauses here until the user has closed the dialog box. */ if (userinput == 123) { console.log("successfully entered the not-actually-a-password"); } else { // wrong code; redirect: window.location.href = "https://example.com" }

Answer 2

正如 Marcus Parsons 所提到的，這似乎不是一個好的做法。 不過，我認為您可以在某種程度上隱藏您的內容，直到使用文檔就緒事件偵聽器進行代碼驗證。

function myFunc(){
var code = prompt("Please enter code: ");
if(code==""||code==null||code!='1234'){
  //Handle Error
  window.alert("error has occured.");
  window.location.href="error.html";
}}
document.onreadystatechange = () => {
         document.addEventListener('readystatechange', event => {
                  if (event.target.readyState === "complete") {
                      myFunc();
                  }
              });
}

如果您想在沒有自己的后端的情況下對客戶端上的用戶進行身份驗證，則可以使用 firebase 身份驗證。 您不必擔心服務器端的東西。

看看這個： https : //firebase.google.com/products/auth/