基于B/S三层体系结构的用户身份认证系统设计与开发

最新推荐文章于 2024-09-21 10:19:52 发布

Kun.A.A

最新推荐文章于 2024-09-21 10:19:52 发布

阅读量970

点赞数 9

文章标签： javascript 前端算法

本文链接：https://blog.csdn.net/qq_52788258/article/details/140151059

版权

大三的一个实验设计，因为当时正在学前端和nodejs，用了跟老师不同的技术实现一个简单的验证页面

实验目的

基于B/S三层体系结构，实现用户身份验证。能够熟练应用哈希算法，实现一个基本的用户身份认证系统，具备完善的功能和良好的页面交互功能，基本掌握身份验证的整个流程。

实验原理

什么是B/S架构：B/S架构，即浏览器和服务器架构模式，在这种架构下，用户工作界面是通过浏览器来实现，极少部分事务逻辑在前端（Browser）实现，但是主要事务逻辑在服务器端(Server)实现，形成所谓三层结构。

密码取hash值是指前端用户输入密码之后在前端对密码取哈希值，然后将哈希值代替原始密码存储到数据库中去

密码取hash值是指前端用户输入密码之后在前端对密码取哈希值，然后将哈希值去跟数据库存储的哈希值进行比较

运行环境

操作系统：windows操作系统

开发环境：JavaScript语言编译环境 + node.JS + AXIOS前端

数据库环境：MySQL + Navicat

开发工具：Visual Studio Code

A.创建数据库及对应的表

数据库名为exp3，表名为user，表中包含字段：userid、password，

id为自增主键，userid为用户名，password为密码

navicat用于连接数据库，实现方便、快捷的查看数据库

B.基于Node.js构建后端APP.ALL接口

login接口：接收post请求，接收userid和password参数，返回登陆成功 or 登陆失败
enroll接口：接收post请求，接收userid和password参数，返回注册成功 or 该用户已存在，无法注册

然后在Node.js中操作数据库将获取的参数与数据库进行对比或将数据存入数据库

C.基于前端技术(HTML\CSS\JavaScript/twitter-bootstrap/axios完成前端页面)

使用sha512.js中实现前端对密码取哈希值，具体使用方法如下：

首先引入sha512.js：<script src="./sha512.js" type="text/javascript"></script>，然后使用hex_sha512 (password)对password取哈希值。

前端引入/twitter-bootstrap axios

D.前后端交互实现

最后实现的前后端交互效果实验结果所示

前端HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验</title>
    <link rel="stylesheet" href="inedx.css">
    <script crossorigin="anonymous"src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
    <link crossorigin="anonymous" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div id="login_box">
        <h2>登 录</h2>
        <div id="form">
            <div id="input_box">
                <input id="userid" type="text" placeholder="请输入用户名">
            </div>
            <div id="input_box">
                <input id="passport"type="password" placeholder="请输入密码">
            </div>
        </div>
        <button id="sign_in">登录</button>
        <br>
        <button id="enroll">注册</button>
    </div>

    <script src="./sha512.js" type="text/javas