使用CSS、HTML、JavaScript實現一個簡單的身份驗證頁

来源:https://www.cnblogs.com/MQSI/archive/2023/09/27/authentication_page.html
-Advertisement-
Play Games

這是我在博客園的第一篇博客，也是我人生中的第一篇博客。希望它能夠記錄我的成長，幫助更多的人。 最近在寫我們社團的社團網站，有一個頁面不太希望普通訪客能訪問到,所以想做一個“統一身份驗證驗證”，但是又苦於社團網站搭建是純靜態站，沒法做資料庫，只能妥協，將賬號密碼字元串組寫到JavaScript腳本里， ...


  這是我在博客園的第一篇博客，也是我人生中的第一篇博客。希望它能夠記錄我的成長，幫助更多的人。

  最近在寫我們社團的社團網站，有一個頁面不太希望普通訪客能訪問到,所以想做一個“統一身份驗證驗證”，但是又苦於社團網站搭建是純靜態站，沒法做資料庫，只能妥協，將賬號密碼字元串組寫到JavaScript腳本里，最後再混淆加密。當然，現在我已經找到了更好的方法，可惜暫時沒有時間完成，我將在後文簡述思路，如有可能，我會另開一篇新方法實現過程。

  思路如下：

    1.首先建立一個遮罩層擋住你要驗證後才能看的內容

    2.建立一個form表單，為其賦予name

    3.然後在表單中添加input密碼賬號輸入框，同時分別建立id（password、account）

    4.在提交按鈕上使用onclick綁定驗證函數

    5.按下提交按鈕時，啟動驗證函數

    6.驗證函數通過.account.value方式分別獲取用戶在input密碼賬號輸入框中輸入的內容

    7.首先查詢賬號，如果賬號在account list中，獲取其在列表的位數

    8.在password list中查詢同位數據，將其與讀取到的用戶輸入的密碼比較

    9.如果正確，關閉遮罩層，顯示內容

    .......

  雖然我主要想分享實現思路，但是想了一下還是把完整的一些樣式給出來吧，畢竟我在學習借鑒的時候被很多只給代碼，樣式半保留，混亂的代碼折磨了很久......

  具體實現如下：

CSS部分

/* 遮罩層，用於擋住內容 */
#overlayverify {
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	background-color: #cccccc;
	z-index: 100
}

/* 模態框主體 */
.popup {
  background-color: #ffffff;
  height: 430px;
  border-radius: 5px;
  margin: 100px auto;
  text-align: center
}

/* 模態框的標題 */
.popup_title {
  height: 60px;
  line-height: 60px;
  border-bottom: solid 1px #cccccc
}

/* 模態框的內容 */
.popup_content {
  text-align: left;
  margin: 0 auto;
  width: 90%;
  height: 200px;
  line-height: 45px;
  padding: 10px 20px;
  text-indent:2em
}
.popup_line{
  margin: 0 auto;
  height: 20px;
  width: 85%;
  border-bottom: 1px solid #dbdbdb
}

/* 模態框的按鈕欄 */
.popup_btn {
  padding-top: 30px
}

/* 彈出框的按鈕 */
.popup_btn button.ds {
  color: #778899;
  width: 40%;
  height: 40px;
  cursor: pointer;
  border: solid 1px #cccccc;
  border-radius: 5px;
  margin: 5px 10px;
  color: #ffffff;
  background-color: rgb(150,150,150)
}

.popup_btn button.ag {
    color: #778899;
    width: 40%;
    height: 40px;
    cursor: pointer;
    border: solid 1px #cccccc;
    border-radius: 5px;
    margin: 5px 10px;
    color: #ffffff;
    background-color: #337ab7
  }

 

HTML部分

<script src="https://new.hkems-stmo.top/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://new.hkems-stmo.top/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!--調用需要的框架文件-->

<div class="container">
  <div class="row">
    <div id="overlayverify" style="display: block;">
      <!--建立遮罩層擋住內容-->

      <div class="col-sm-2 col-lg-4"></div>
      <!--bootstarp框架，用於調節樣式-->

      <div class="popup col-sm-8 col-lg-4">
        <!--建立一個模態框-->

        <p class="popup_title">統一身份驗證驗證</p>
        <p class="popup_content overflow-auto" style="line-height: 40px;">歡迎訪問科技社規劃備忘錄，在進行瀏覽前，我們需要驗證你的身份。</p>
        <!--說明-->

        <form name="AandP" style="margin-top: -20%;">
          <!--建立名為AandP的表單（Account and Password），容納用戶輸入進輸入框的內容-->

          <input class="form-control signinput" id="account" placeholder="請輸入賬號："
            style="width: 80%;margin-left: 10%;margin-bottom: 15px;" />
          <input class="form-control" id="password" type="password" placeholder="請輸入密碼"
            style="width: 80%;margin-left: 10%;margin-bottom: 10px;" />
          <!--分別設置了賬號密碼的輸入框，各自用id="xxx"來標識-->
        </form>

        <div id="out" style="color: red;"></div>
        <!--建立一個id為out的輸出反饋的div，登陸失敗等信息被寫入到這-->

        <div class="popup_line"></div>
        <div class="popup_btn" style="margin-top: -20px;">
          <button class="cancelBtn ds overflow-hidden" onclick="dontknow()">我不知道密碼</button>
          <button class="confirmBtn ag overflow-hidden" onclick="verify()">驗證並訪問</button>
          <!--用onclick綁定函數，點擊按鈕運行onclick指定的函數-->

        </div>
      </div>
      <div class="col-sm-2 col-lg-4"></div>
      <!--bootstarp框架，用於調節樣式-->
    </div>
  </div>
</div>
<div>
  <!--在這裡寫入你想在通過驗證之後展示的內容-->
</div>

Javascript部分

var testV = 3;
/*定義最高嘗試次數*/
var error = 0;
/*定義初始錯誤量*/
var accountlist = ['賬戶1', '賬戶2', '賬戶3', '賬戶4'];
var passwordlist = ['密碼1', '密碼2', '密碼3', '密碼4'];
/*定義賬號密碼列表*/
function verify() {
/*用戶提交驗證*/
    var account = AandP.account.value;
    var password = AandP.password.value;
    /*從AandP表單里獲取用戶輸入的賬號密碼，為相應的變數名賦值*/
    if(testV > 1){
    /*如果嘗試機會>1*/
        if(accountlist.indexOf(account) == -1){
            /*則使用accountlist.indexOf(account)方法獲得輸入的用戶名在用戶列表的位數，用if語句判斷如果等於-1（即不存在）*/
            error += 1;
            /*則使error變數+1*/
        }
        else{
        /*如果不等於-1，即意味著用戶輸入的用戶名存在，就可以接著進行密碼的核驗*/
            var Correspondingpassword = passwordlist[accountlist.indexOf(account)];
            /*用 列表名[位數（通過accountlist.indexOf(account)獲得）] 方法查詢到用戶輸入的用戶名相對應的密碼，賦入Correspondingpassword變數*/
            if(Correspondingpassword == password){
                out.innerHTML = '賬號密碼正確，驗證通過';
            }
            /*將用戶輸入的密碼與查詢到與用戶輸入的用戶名相對應的密碼對比，如果成功則用innerHTML將提示輸出到id為out的塊組件*/
            else{
                error += 1;
            }
            /*如果不匹配，對error變數+1*/
        }
        if(error != 0){
        /*驗證部分結束。如果error變數不等於零，即至少發生了賬號錯誤或賬號密碼不匹配中的一個事件：*/
            testV -= 1
            out.innerHTML = '賬號或密碼錯誤，你還剩'+ testV+ '次機會';
            /*讓嘗試次數testV-1，然後用innerHTML將提示輸出到id為out的塊組件*/
        }
        else{
        /*如果error變數等於零，則驗證成功*/
            overlayverify.style.display = "none";
            /*為擋住頁面的模態框寫入“display:none”的樣式，使其消失*/
        }
    }
    else{
    /*如果嘗試機會<1，即沒有嘗試機會了*/
        out.innerHTML = '登陸凍結，請刷新或聯繫管理員';
        /*用innerHTML將提示輸出到id為out的塊組件*/
    }
    document.getElementById("AandP").reset();
    /*重置用戶輸入的數據*/
}

function dontknow() {
    /*用戶不知道密碼*/
    window.location.href = '其他頁面的url'
    /*跳轉到其他頁面*/
}

JavaScript在錄入賬號密碼後可以進行混淆加密。

註意：！！！bootstarp框架應在合理位置放置，否則會發生錯誤！

完整示例

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="page-enter" content="revealTrans(duration=5.0,transition=20)">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>身份驗證頁(頁面標題)</title>
    <link rel="prefetch" href="/images/UI/logo-big.png">
    <link rel="prefetch" href="/function/header.html">
    <link rel="prefetch" href="/function/footer.html">
    <meta name="keywords" content="關鍵詞,發佈於恍惚交錯落花雨的博客園,禁止CSDN轉載" />
    <meta name="description" content="簡介" />
    <meta name="revised" content="MQSI, 2023年9月25日" />
    <meta name="author" content="MQSI, [email protected]">
    <meta name="renderer" content="webkit">
    <meta name="copyright" content="本示例網頁版權歸恍惚交錯落花雨所有，禁止CSDN轉載">
    <!--以上標識頭可以不保留-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://new.hkems-stmo.top/css/bootstrap.min.css" />
    <script src="https://new.hkems-stmo.top/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!--調用需要的框架文件-->

    <style>
        /* 遮罩層，用於擋住內容 */
        #overlayverify {
            position: fixed;
            left: 0px;
            top: 0px;
            height: 100%;
            background-color: #cccccc;
            z-index: 100
        }

        /* 模態框主體 */
        .popup {
            background-color: #ffffff;
            height: 430px;
            border-radius: 5px;
            margin: 100px auto;
            text-align: center
        }

        /* 模態框的標題 */
        .popup_title {
            height: 60px;
            line-height: 60px;
            border-bottom: solid 1px #cccccc
        }

        /* 模態框的內容 */
        .popup_content {
            text-align: left;
            margin: 0 auto;
            width: 90%;
            height: 200px;
            line-height: 45px;
            padding: 10px 20px;
            text-indent: 2em
        }

        .popup_line {
            margin: 0 auto;
            height: 20px;
            width: 85%;
            border-bottom: 1px solid #dbdbdb
        }

        /* 模態框的按鈕欄 */
        .popup_btn {
            padding-top: 30px
        }

        /* 彈出框的按鈕 */
        .popup_btn button.ds {
            color: #778899;
            width: 40%;
            height: 40px;
            cursor: pointer;
            border: solid 1px #cccccc;
            border-radius: 5px;
            margin: 5px 10px;
            color: #ffffff;
            background-color: rgb(150, 150, 150)
        }

        .popup_btn button.ag {
            color: #778899;
            width: 40%;
            height: 40px;
            cursor: pointer;
            border: solid 1px #cccccc;
            border-radius: 5px;
            margin: 5px 10px;
            color: #ffffff;
            background-color: #337ab7
        }
    </style>
    <script>
        var testV = 3;
        /*定義最高嘗試次數*/
        var error = 0;
        /*定義初始錯誤量*/
        var accountlist = ['賬戶1', '賬戶2', '賬戶3', '賬戶4'];
        var passwordlist = ['密碼1', '密碼2', '密碼3', '密碼4'];
        /*定義賬號密碼列表*/
        function verify() {
            /*用戶提交驗證*/
            var account = AandP.account.value;
            var password = AandP.password.value;
            /*從AandP表單里獲取用戶輸入的賬號密碼，為相應的變數名賦值*/
            if (testV > 1) {
                /*如果嘗試機會>1*/
                if (accountlist.indexOf(account) == -1) {
                    /*則使用accountlist.indexOf(account)方法獲得輸入的用戶名在用戶列表的位數，用if語句判斷如果等於-1（即不存在）*/
                    error += 1;
                    /*則使error變數+1*/
                }
                else {
                    /*如果不等於-1，即意味著用戶輸入的用戶名存在，就可以接著進行密碼的核驗*/
                    var Correspondingpassword = passwordlist[accountlist.indexOf(account)];
                    /*用 列表名[位數（通過accountlist.indexOf(account)獲得）] 方法查詢到用戶輸入的用戶名相對應的密碼，賦入Correspondingpassword變數*/
                    if (Correspondingpassword == password) {
                        out.innerHTML = '賬號密碼正確，驗證通過';
                    }
                    /*將用戶輸入的密碼與查詢到與用戶輸入的用戶名相對應的密碼對比，如果成功則用innerHTML將提示輸出到id為out的塊組件*/
                    else {
                        error += 1;
                    }
                    /*如果不匹配，對error變數+1*/
                }
                if (error != 0) {
                    /*驗證部分結束。如果error變數不等於零，即至少發生了賬號錯誤或賬號密碼不匹配中的一個事件：*/
                    testV -= 1
                    out.innerHTML = '賬號或密碼錯誤，你還剩' + testV + '次機會';
                    /*讓嘗試次數testV-1，然後用innerHTML將提示輸出到id為out的塊組件*/
                }
                else {
                    /*如果error變數等於零，則驗證成功*/
                    overlayverify.style.display = "none";
                    /*為擋住頁面的模態框寫入“display:none”的樣式，使其消失*/
                }
            }
            else {
                /*如果嘗試機會<1，即沒有嘗試機會了*/
                out.innerHTML = '登陸凍結，請刷新或聯繫管理員';
                /*用innerHTML將提示輸出到id為out的塊組件*/
            }
            document.getElementById("AandP").reset();
            /*重置用戶輸入的數據*/
        }

        function dontknow() {
            /*用戶不知道密碼*/
            window.location.href = '其他頁面的url'
            /*跳轉到其他頁面*/
        }
    </script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div id="overlayverify" style="display: block;">
                <!--建立遮罩層擋住內容-->
                <div class="col-sm-2 col-lg-4"></div>
                <!--bootstarp框架，用於調節樣式-->
                <div class="popup col-sm-8 col-lg-4">
                    <!--建立一個模態框-->
                    <p class="popup_title">統一身份驗證驗證</p>
                    <p class="popup_content overflow-auto" style="line-height: 40px;">歡迎訪問科技社規劃備忘錄，在進行瀏覽前，我們需要驗證你的身份。
                    </p>
                    <!--說明-->
                    <form name="AandP" style="margin-top: -20%;">
                        <!--建立名為AandP的表單（Account and Password），容納用戶輸入進輸入框的內容-->
                        <input class="form-control signinput" id="account" placeholder="請輸入賬號："
                            style="width: 80%;margin-left: 10%;margin-bottom: 15px;" />
                        <input class="form-control" id="password" type="password" placeholder="請輸入密碼"
                            style="width: 80%;margin-left: 10%;margin-bottom: 10px;" />
                        <!--分別設置了賬號密碼的輸入框，各自用id="xxx"來標識-->
                    </form>
                    <div id="out" style="color: red;"></div>
                    <!--建立一個id為out的輸出反饋的div，登陸失敗等信息被寫入到這-->
                    <div class="popup_line"></div>
                    <div class="popup_btn" style="margin-top: -20px;">
                        <button class="cancelBtn ds overflow-hidden" onclick="dontknow()">我不知道密碼</button>
                        <button class="confirmBtn ag overflow-hidden" onclick="verify()">驗證並訪問</button>
                        <!--用onclick綁定函數，點擊按鈕運行onclick指定的函數-->
                    </div>
                </div>
                <div class="col-sm-2 col-lg-4"></div>
                <!--bootstarp框架，用於調節樣式-->
            </div>
        </div>
    </div>
    <div>
        <p>本示例網頁版權歸恍惚交錯落花雨所有，禁止CSDN轉載</p>
        <!--在這裡寫入你想在通過驗證之後展示的內容-->
    </div>
</body>

</html>

優點：好像沒什麼優點....

缺點：防防不懂技術的得了......懂技術的直接就把遮罩層刪了。

當然現在這段代碼可以改裝一下連上資料庫來查詢，這樣就會變得較為安全可靠。

 

希望這篇文章能幫到大家，也希望大家能指出我的不足之處。

本人自學野路子，文中部分用語不規範，求各位大佬輕噴。

 

轉載請取得同意並標明原作者。禁止轉載至CSDN。

恍惚交錯落花雨

2023年9月25日


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • WhaleStudio 分鐘級構建 AI 模型，強大 Ops 能力簡化模型調度與部署
    什麼是機器學習(ML)? 它有什麼作用 機器學習(ML)是人工智慧(AI)的一個子集，通過演算法發現數據中的通用模式，並根據持續不斷的訓練來優化調整最終結果。ML模型從過去的經驗中學習，並根據已有的經驗進行預測。例如，現在的電商已不再會使用普遍性降價或優惠券等手段吸引客戶，取而代之的是根據每個客戶的歷 ...
  • 生態相容性進一步提升！白鯨開源 WhaleStudio 與火山引擎ByteHouse完成產品互認
    數據作為新型生產要素，已快速融入生產、分配、流通、消費和社會服務管理等各環節，深刻改變著生產方式、生活方式和治理方式。越來越多企業也在嘗試充分利用數據要素，開闢全新發展路徑，進一步實現業務價值提升。 在數字化轉型的大背景之下，白鯨開源旗下WhaleStudio與火山引擎ByteHouse依托於雙方完 ...
  • ora2pg使用記錄
    ora2pg使用記錄 前言 這篇文章是我在學習使用ora2pg過程中的學習記錄，以便日後遺忘查閱； 諸君也可跟隨我的步伐瞭解一下ora2pg，或可移步如下官方文檔參考學習：Ora2Pg : Migrates Oracle to PostgreSQL (darold.net) 本文的ora2pg安裝和 ...
  • GreatSQL一個關於主從複製的限制描述與規避
    一、背景 分享一個在項目運維中遇到的一個主從複製限制的一個坑，項目的架構為主集群+災備集群，每個集群為一主兩從模式。主集群到災備集群的同步為主從複製的方式，根據業務需求災備集群需要忽略系統庫跟某些配置表，所以才會觸發此限制，而這個限制如果我們之前沒有遇到過，那麼排查起來也是相對不易的。 二、限制描述 ...
  • 20個提升效率的JS簡寫技巧，告別屎山！
    JavaScript 中有很多簡寫技巧，可以縮短代碼長度、減少冗餘，並且提高代碼的可讀性和可維護性。本文將介紹 20 個提升效率的 JS 簡寫技巧，助你告別屎山，輕鬆編寫優雅的代碼！ 移除數組假值 可以使用 filter() 結合 Boolean 來簡化移除數組假值操作。假值指的是在條件判斷中被視為 ...
  • 模塊化打包工具-初識Webpack
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 生在國旗下，長在春風裡！國慶將至，採黎為大家帶來 定製頭像2.0（國慶頭像），讓我們用代碼的形式為祖國慶生！歡迎大家點贊收藏加關註哦 前言 想看效果或者想定製春節頭像的小伙伴請直奔 效果區域； 想一睹定製頭像2.0小工具的原理及實現思路請 ...
  • display: none與visibility: hidden的區別
    在前端面試中，一般比較側重JavaScript方面的考察，CSS佈局方面考察的內容會相對少一些，其中display: none與visibility: hidden的區別是較常見的考點，這兩個css配置都可以從視覺上隱藏DOM元素，那這兩者的使用上有什麼區別呢？ ...
  • JS三大運行時全面對比：Node.js vs Bun vs Deno
    全文約 5100 字，預計閱讀需要 15 分鐘。 JavaScript 運行時是指執行 JavaScript 代碼的環境。目前，JavaScript 生態中有三大運行時：Node.js、Bun、Deno。老牌運行時 Node.js 的霸主地位正受到 Deno 和 Bun 的挑戰，下麵就來看看這三個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類