如何在HTML或JAVASCRIPT中製作登錄驗證頁面

我來自電子背景知識，因此對設計網頁沒有太多的瞭解。我正在做一個以太網項目，爲此我需要創建一個網頁，但在該網頁之前，我還需要創建一個登錄驗證網頁。我不知何故設法使用HTML JAVASCRIPT做到這一點，但問題是任何人都可以通過查看頁面源來查看用戶名密碼。如何在HTML或JAVASCRIPT中製作登錄驗證頁面

我很難認證。我有HTML和JAVASCRIPT的基本知識，但準備學習。我能在google上找到的是登錄模板，但我甚至不知道如何使用它們。

任何人都可以給我一個例子或指向我一些很好的鏈接。

來源

2016-01-30 user007

-1

只是嘗試這個代碼 -

function validate(){ 
 
var username = document.getElementById("username").value; 
 
var password = document.getElementById("password").value; 
 
if (username == "username1" && password == "password1"){ 
 
alert ("Login successfully"); 
 
    } 
 
    else{ 
 
    alert("Invalid username or password"); 
 
    } 
 
    return false; 
 
    }

<html> 
 
<head> 
 
<title>Javascript Login Form Validation</title> 
 
<!-- Include JS File Here --> 
 
<script src="js/login.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<form id="form_id" method="post" name="myform"> 
 
<label>User Name :</label> 
 
<input type="text" name="username" id="username"/> 
 
<label>Password :</label> 
 
<input type="password" name="password" id="password"/> 
 
<input type="button" value="Login" id="submit" onclick="validate()"/> 
 
</form> 
 
</div> 
 
</body> 
 
</html>

來源

2016-01-30 10:03:51

請提供正確的問題描述 – arch

我想你沒有得到我的問題。如果有人查看網頁來源，他可以輕鬆查看用戶名和密碼。我不想要這個頁面的國王 – user007

只需將java腳本放在名爲login.js的新JavaScript文件中，然後在調用vaidate函數時將值發送到java腳本。那麼Java腳本文件不會顯示在源代碼中 –

<html> 
 
<head> 
 

 
<title>Login paget</title> 
 
</head> 
 
<script type="text/javascript"> 
 
function display(form){ 
 
if (form.username.value=="root") { 
 
\t \t if (form.password.value=="root") {    
 
\t \t \t \t \t \t \t \t \t \t location="page2.html" 
 
\t \t \t \t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t alert("Invalid Password") 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } else { alert("Invalid Username") 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t </script> \t \t \t 
 
<body > 
 

 
<form > 
 
<input type="text" name="username" /><br><br> 
 
<input type="password" name="password"/><br><br> 
 
<input type="button" value="Login" onClick="display(this.form)"/> 
 

 
</form> 
 

 
</body> 
 
</html>

你好，我已經創建了一個登錄頁面，您使用HTML和JavaScript的。用戶名和密碼是 root。你看，如果你輸入正確的用戶名和密碼後，頁面定向到page2.html，這會告訴你

此網頁無法找到

ERR_FILE_NOT_FOUND

所以你必須用你的下一個頁面名稱替換page2.html。

來源

2016-01-30 10:13:04

我想你沒有得到我的問題。如果有人查看網頁來源，他可以輕鬆查看用戶名和密碼。我不希望這個國王的頁面 – user007

哦，是的！你可以分離出這個javascript代碼並創建一個單獨的file.js，並且可以在你的html代碼中引用這個js文件。 –

HTML和Javascript在client side上解釋。對於登錄目的而言，它是通常用於驗證憑證的服務器端代碼 - 僅僅因爲您已經知道這一事實 - 通過簡單的客戶端實現，您可以在源代碼中看到憑證，服務器端也是更容易處理，一旦你瞭解它，它對於進一步的開發更加靈活，它更加安全，並且它在這個任務中到處使用。

爲此，使用PHP，ASP，Ruby（或任何其他server side語言）是一個好主意。如果你不想這樣做，你需要讓用戶很難從源代碼中讀取憑證。

爲了做到這一點，您可以使用各種方法，如加密或obfuscation。密碼學強烈建議使用混淆，因爲它可以爲您的應用程序增加更多的安全性。混淆基本上意味着你改變源代碼的方式很難閱讀 - 你添加了編碼字符串的函數，這樣你的「密碼」就不會一見成效。然而，模糊處理總是可以被繞過，而且通常很容易使用一個好的調試工具。

所以，讓我們來看看密碼學。你在找什麼是使用one way hash functions。你有很多選擇 - MD5，SHA1，SHA256，...提供不同級別的安全性。 SHA256 implementation in Javascript是一個可以使用的例子。還有很多其他的庫和示例，所以只需使用Google並找到您喜歡的那個。

現在，該怎麼辦？假設你有sha256（）函數接受一個字符串並將其散列作爲一個字符串返回。對於您擁有的每個用戶和密碼，您需要預先安裝字符串「user + password」的SHA256哈希值。

說，你希望你的用戶名是「Pedro」，這個帳戶的密碼是「MyPassword」。

您預先安排了「PedroMyPassword」的散列 - 例如，與with online hashing tool。你可以看到它的SHA256哈希是

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21

這個哈希值是你放入你的Javascript代碼。

當用戶輸入他們的用戶名和密碼時，可以在「用戶名+密碼」上調用sha256函數，並將其與預先安排的哈希值進行比較。

請注意，你必須選擇真正的強密碼，否則某些攻擊（如字典攻擊）將很容易使用來打破你的散列。

現在的問題是，您沒有指定，接下來要做什麼。例如，您可能希望將經過身份驗證的用戶重定向到下一頁，但在這裏您再次遇到同樣的問題 - 如果您在JavaScript中將代碼重定向到「secondpage.html」，則可能會跳過身份驗證並導航到第二個直接頁面。

你可以在這種情況下，做的是，你命名你的第二個頁面

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

即用戶+通字符串的哈希值。在這個變體中，你根本不把哈希放在代碼中。 Web服務器只會爲所有未通過身份驗證的用戶返回錯誤404。例如，如果有人試圖用「佩德羅」和「123456」作爲密碼時，SHA256將

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517

，如果你重定向到

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517.html

它贏得不存在，因爲你的第二頁文件被稱爲

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

您需要爲每個用戶/傳球組合創建這些第二頁。然後你可以把簡單的重定向代碼放到真正的第二頁上。

但要確保你使用的是HTTPS協議，否則，第二頁會經過加密線...

這一切都將正常工作，不過，我強烈建議你考慮服務器端的方式。

來源

2016-01-30 10:33:07 Wapac

感謝這個好消息。這就是我要的。你可以請解釋服務器端的方式還是指向我一些有用的鏈接。？ – user007

服務器端到處都是。一旦你瞭解了它，它就會更容易，更安全，更靈活地用於未來的開發，並且只是要使用的東西。對於服務器端來說，這取決於您可以在服務器上使用哪種技術。如果您自己託管它，您可以選擇所有不同的技術（ASP，PHP，Ruby，NodeJs等）。但是，如果你在第三方託管，你通常是有限的。成本最低的主機通常運行在Linux操作系統上並提供PHP。互聯網上有大量的資源 - 例如http://www.phpeasystep.com/phptu/6.html是一個簡單的PHP + MySQL示例。 – Wapac

如果您不想使用數據庫，那麼您可以簡單地修改該示例以關閉DB代碼。在這個主題上也有許多SO問題，所以請搜索「簡單的PHP登錄表單」。或者你可以試試這個http://www.tutorialspoint.com/php/php_login_example.htm，這裏有很多很多選項。你只需要識別你可以使用的服務器端技術，然後學習它的基礎知識。 – Wapac

在我以前的回答中，我使用的是客戶端技術，這就是爲什麼如果我們檢查頁面源，用戶名和密碼不安全和隱藏。現在

，我們將使用服務器端的技術，爲此，你需要網絡服務器軟件包，如WAMP，XAMPP等

下載並安裝這些軟件包中的一個。（如果你有這兩個中的一個，那麼它的以及好）

我使用XAMPP，所以我會用XAMPP解釋。

如果您已成功下載XAMPP，則請在XAMPP文件夾中查找htdocs文件夾。 Mine是「C：\ xampp \ htdocs」

複製下面的代碼並創建新的php文件並將其保存爲login.php文件htdocs directory。

這裏是php代碼。

<?php 
 
$usr="root"; 
 
$pwd="root"; 
 

 
if(isset($_POST['username']) && !empty($_POST['username']) && isset($_POST['password']) && !empty($_POST['password'])){ 
 

 
$username=$_POST['username']; 
 
$password=$_POST['password']; 
 

 
    
 
\t \t \t if(($username==$usr) && ($password==$pwd)){ 
 

 
\t \t \t \t \t \t \t \t echo '<br>login successfull'; 
 

 
\t \t \t \t }else{ 
 

 
\t \t \t \t \t \t \t echo '<br>login unsuccessfull'; 
 
\t \t \t \t \t \t \t } 
 
\t }else{ 
 
\t \t \t echo "<br>Connot be left empty!"; 
 
\t \t \t } 
 
?>

好的！現在創建一個簡單的HTML 頁面包含登錄表單和它保存爲login.html的

下面是HTML代碼

<html> 
 
<head> 
 

 
<title>Login</title> 
 
</head> 
 

 
<body> 
 

 
<form action="login.php" method="POST" align="center"> 
 
<br> 
 
Username:<input type="text" name="username"><br><br><br> 
 
Password :<input type="text" name="password"><br><br> 
 

 
<input type="Submit" value="Submit"> 
 

 
</form> 
 
</body> 
 
</html>

現在，轉到瀏覽器的>鍵入http://localhost/login.html和運行插入用戶名和密碼爲root。

我假設你有PHP的基本知識，如果不經過它，它是很容易的，也瞭解HTTP請求

GET
POST

來源

2016-01-30 12:38:54

你可以用」真的只有一個使用JavaScript和HTML的安全認證系統。

我建議您在服務器上使用Basic HTTP authentication，因爲它更安全（不完美，但至少採用標準的服務器端訪問控制方法）。

如果您必須在JavaScript中實現某些功能，則可以根據隱藏目錄的名稱執行僅密碼方案。像下面的內容（注意這是未經測試，以便將需要一些調整）：

（代碼貸款以及從this question改編）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
    $(function() { 
     var url = "some_url"; 
     $.ajax(url, 
     { 
     if (statusCode == 200) { 
      document.location.href = url; 
     } 
     else { 
      alert('Incorrect password') 
     } 
     } 
    }); 
}); 
</script> 

<input type="password" /><a href="javascript:void(0)">Login</a>

的代碼應該完成，這樣的函數被調用時，該按鈕點擊。因此，如果密碼爲foo，則在您的網站上設置一個名爲foo的目錄，並且如果JQuery JavaScript檢測到輸入的密碼與目錄名稱相匹配（例如/foo/），則用戶將被重定向到那裏。因此，您將創建一個/foo/index.html以照顧用戶的登錄會話。

請注意，這是您使用JavaScript和HTML可以完成的最安全的事情，它具有以下漏洞。

它要求URL保密，儘管這可以通過瀏覽器歷史記錄和服務器/代理日誌由引用標頭泄露。
一旦用戶登錄，他們總是登錄（他們可以爲登錄頁面添加書籤）
有沒有簡單的方法來撤銷密碼。
只有一個密碼。
任何有權查看服務器上的文件的人都可以查看目錄結構並瞭解密碼。
URL可能會被分析工具泄漏。
假設您的服務器上的目錄瀏覽被禁用（或者在私人頁面的父目錄中有默認頁面）。

無論如何，請始終使用TLS/SSL保護您的服務器。我的建議是使用OWASP的建議正確創建用戶認證系統。以上只顯示了基本HTML中可實現的功能（不多）。但是，它比在客戶端文件中公開密碼要好。

來源

2016-02-01 11:09:43 SilverlightFox

如何在HTML或JAVASCRIPT中製作登錄驗證頁面

回答

相關問題