首页 > 其他分享 >开发网页版加密访问文档

开发网页版加密访问文档

时间：2024-06-30 19:59:44浏览次数：17  
标签：网页 res require js token 文档 import 加密 const

开发一个支持加密访问文档的网页版应用程序涉及多个步骤，包括用户认证、文档加密和解密、文件上传和下载，以及确保整个过程中的数据安全性。下面是一个详细的步骤指南：

步骤1：设置项目环境

首先，设置一个新的项目环境。假设你使用的是Node.js和React.js进行前后端开发。

  1. 初始化项目：

    npx create-react-app encrypted-docs-app
cd encrypted-docs-app
npm init -y

  2. 安装必要的依赖：

    npm install express mongoose bcryptjs jsonwebtoken dotenv multer crypto-js
npm install --save-dev nodemon

步骤2：设置后端（Node.js + Express）

  1. 创建服务器文件：
    在项目根目录下创建server.js文件。

    const express = require('express');
const mongoose = require('mongoose');
const dotenv = require('dotenv');
const cors = require('cors');
const authRoutes = require('./routes/auth');
const docRoutes = require('./routes/docs');

dotenv.config();
const app = express();

app.use(cors());
app.use(express.json());

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true });

app.use('/api/auth', authRoutes);
app.use('/api/docs', docRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

  2. 用户认证：
    创建一个新的目录routes，并在其中创建auth.js文件。

    const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');

const router = express.Router();

// 注册
router.post('/register', async (req, res) => {
    const { username, password } = req.body;
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(password, salt);
    const newUser = new User({ username, password: hashedPassword });

    try {
        const savedUser = await newUser.save();
        res.status(201).json(savedUser);
    } catch (err) {
        res.status(400).json(err);
    }
});

// 登录
router.post('/login', async (req, res) => {
    const { username, password } = req.body;
    try {
        const user = await User.findOne({ username });
        if (!user) return res.status(400).json({ message: "User not found" });

        const isMatch = await bcrypt.compare(password, user.password);
        if (!isMatch) return res.status(400).json({ message: "Invalid credentials" });

        const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
        res.status(200).json({ token });
    } catch (err) {
        res.status(500).json(err);
    }
});

module.exports = router;

  3. 文档上传和下载：
    在routes目录下创建docs.js文件。

    const express = require('express');
const multer = require('multer');
const jwt = require('jsonwebtoken');
const fs = require('fs');
const crypto = require('crypto');
const path = require('path');

const router = express.Router();

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/');
    },
    filename: (req, file, cb) => {
        cb(null, `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`);
    }
});

const upload = multer({ storage });

// 中间件验证JWT
const verifyToken = (req, res, next) => {
    const token = req.header('x-auth-token');
    if (!token) return res.status(401).json({ message: 'No token, authorization denied' });

    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        req.user = decoded;
        next();
    } catch (err) {
        res.status(400).json({ message: 'Token is not valid' });
    }
};

// 文件加密
const encryptFile = (filePath) => {
    const cipher = crypto.createCipher('aes-256-ctr', process.env.ENCRYPTION_SECRET);
    const input = fs.createReadStream(filePath);
    const output = fs.createWriteStream(`${filePath}.enc`);

    input.pipe(cipher).pipe(output);
};

// 文件解密
const decryptFile = (filePath, res) => {
    const decipher = crypto.createDecipher('aes-256-ctr', process.env.ENCRYPTION_SECRET);
    const input = fs.createReadStream(filePath);
    const output = res;

    input.pipe(decipher).pipe(output);
};

// 上传文档
router.post('/upload', verifyToken, upload.single('document'), (req, res) => {
    const filePath = req.file.path;
    encryptFile(filePath);
    fs.unlinkSync(filePath); // 删除原始文件，保留加密文件
    res.status(200).json({ message: 'File uploaded and encrypted successfully' });
});

// 下载文档
router.get('/download/:filename', verifyToken, (req, res) => {
    const filePath = `uploads/${req.params.filename}`;
    decryptFile(filePath, res);
});

module.exports = router;

  4. 创建用户模型：
    在models目录下创建User.js文件。

    const mongoose = require('mongoose');

const UserSchema = new mongoose.Schema({
    username: { type: String, required: true, unique: true },
    password: { type: String, required: true },
});

module.exports = mongoose.model('User', UserSchema);

步骤3：设置前端（React）

  1. 创建登录和注册页面：
    在src目录下创建components目录，并在其中创建Login.js和Register.js文件。

    // src/components/Register.js
import React, { useState } from 'react';
import axios from 'axios';

const Register = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.post('http://localhost:5000/api/auth/register', { username, password });
            console.log(res.data);
        } catch (err) {
            console.error(err);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
            <button type="submit">Register</button>
        </form>
    );
};

export default Register;

    // src/components/Login.js
import React, { useState } from 'react';
import axios from 'axios';

const Login = ({ setToken }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.post('http://localhost:5000/api/auth/login', { username, password });
            setToken(res.data.token);
        } catch (err) {
            console.error(err);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    );
};

export default Login;

  2. 创建文档上传和下载页面：
    在src/components目录下创建Upload.js和Download.js文件。

    // src/components/Upload.js
import React, { useState } from 'react';
import axios from 'axios';

const Upload = ({ token }) => {
    const [file, setFile] = useState(null);

    const handleFileChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('document', file);

        try {
            await axios.post('http://localhost:5000/api/docs/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'x-auth-token': token
                }
            });
            alert('File uploaded and encrypted successfully');
        } catch (err) {
            console.error(err);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
Upload ); };

export default Upload;


```jsx
// src/components/Download.js
import React, { useState } from 'react';
import axios from 'axios';

const Download = ({ token }) => {
    const [filename, setFilename] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const res = await axios.get(`http://localhost:5000/api/docs/download/${filename}`, {
                headers: {
                    'x-auth-token': token
                },
                responseType: 'blob'
            });

            const url = window.URL.createObjectURL(new Blob([res.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', filename);
            document.body.appendChild(link);
            link.click();
        } catch (err) {
            console.error(err);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={filename} onChange={(e) => setFilename(e.target.value)} placeholder="Filename" />
            <button type="submit">Download</button>
        </form>
    );
};

export default Download;

  1. 设置App组件和路由：
    修改src/App.js文件，整合上述组件并设置路由。

    // src/App.js
import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './components/Login';
import Register from './components/Register';
import Upload from './components/Upload';
import Download from './components/Download';

const App = () => {
    const [token, setToken] = useState('');

    return (
        <Router>
            <div>
                <Switch>
                    <Route path="/register">
                        <Register />
                    </Route>
                    <Route path="/login">
                        <Login setToken={setToken} />
                    </Route>
                    <Route path="/upload">
                        <Upload token={token} />
                    </Route>
                    <Route path="/download">
                        <Download token={token} />
                    </Route>
                    <Route path="/">
                        <h1>Welcome to Encrypted Docs App</h1>
                    </Route>
                </Switch>
            </div>
        </Router>
    );
};

export default App;

总结

通过上述步骤，你可以开发一个支持加密访问文档的网页版应用程序。该应用程序包括用户认证、文件上传与下载、文件加密与解密等功能，确保文档的安全性。

标签：网页,res,require,js,token,文档,import,加密,const
From： https://blog.csdn.net/weixin_47634487/article/details/139968550

相关文章

  • 【前端网页游戏开发】Vue3＋PixiJS开发2D闯关打怪游戏，开发时长为6天，成功推出v1.0正式版
    更新内容增加了地图切换功能，扩展了游戏的游玩长度，进入每一关时，击杀10只怪物就会提示通关成功，进入下一关，点击按钮后会恢复玩家的血量，然后重新生成怪物，如果玩家死亡，就会回到提示回到主界面点击后游戏最后增加了BOSS，在玩家进入第四关时会出现BOSS角色，血量为20，玩家伤害为攻击......
  • SSM-学情分析系统-56772（免费领源码+开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP
    学情分析系统摘 要随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身的优势；对于学情分析系统当然也不能排除在外，随着网络技术的不断成熟，带动了学情分析系统，它彻底改变了过去传统的管理方式，不仅使服务管理难度变低了，还提升了管理的灵活性。这......
  • 【C++】【MFC】MFC多文档框架
    相较于单文档架构，多文档基本架构则是有起码两个框架窗口，与其相对应的也会有两个文档类进行数据管理。参与架构的类：CMDIFrameWnd/CMDIChildWnd/CWinApp/CView/CDocument需要用的类：CDocTemplate（文档模板类）|->CMultiDocTemplate（多文档模板类）CDocM......
  • Java处理PDF文档【上】（ 全新 iText 8.0 基础入门 、元素）
    一：iText简介iText是一个开源的Java库，用于处理PDF文档的创建、修改和呈现。它提供了一系列功能强大的API，使开发人员能够在他们的应用程序中轻松地操作PDF文件。它是由一家名为iTextGroupNV的公司开发和维护的，总部位于比利时。该公司专注于PDF技术，并致力于提供高......
  • 键入网址到网页显示
    解析URL，生成HTTP请求浏览器对键入的URL进行解析，生成一个HTTP请求查询服务器域名对应的IP地址对域名进行DNS解析解析流程浏览器检查自身的DNS缓存记录，查看是否有该域名对应的IP地址。当浏览器缓存中无域名对应IP 则会自动检查用户计算机系统Hosts文件DNS缓存是否有......
  • 全新发布：AIDOCZH.com 推出 Langchain API参考中文文档，提升查阅API效率！
    全新发布：AIDOCZH.com推出LangchainAPI参考中文文档，提升查阅API效率！一、LangChainAPI中文文档1、从网站中进入http://www.aidoczh.com/langchain/v0.2/docs/introduction/2、直接网页进入http://www.aidoczh.com/langchain_api/html/langchain_api_reference.html......
  • 向量数据库Milvus快速入门——AIDOCZH.COM上线Milvus中文文档
    Milvus快速入门——AIDOCZH.COM上线Milvus中文文档文章目录Milvus快速入门——AIDOCZH.COM上线Milvus中文文档Milvus官方文档的中文翻译Milvus介绍什么是Milvus向量数据库？关键概念非结构化数据嵌入向量向量相似性搜索为什么选择Milvus？支持的索引和度量标准是什么？索......
  • 基于SpringBoot+Vue农产品管理与销售APP设计和实现(源码+LW+调试文档+讲解等)
    ......
  • 软件项目过程必备文档整理大全（内容丰富，直接套用）
    在软件开发过程中，文档扮演着至关重要的角色。它不仅记录了项目的需求、设计和开发过程，还为项目的维护和管理提供了便利。本文将详细介绍软件开发文档的重要性和作用，以及需求分析、软件设计、开发过程、运维管理和项目管理等方面的文档编写要点。获取：点我获取引言软件开发文......
  • 【项目经理】软件项目全流程全过程性资料配套辅导文档
    在软件开发过程中，文档扮演着至关重要的角色。它不仅记录了项目的需求、设计和开发过程，还为项目的维护和管理提供了便利。本文将详细介绍软件开发文档的重要性和作用，以及需求分析、软件设计、开发过程、运维管理和项目管理等方面的文档编写要点。 获取：点我获取引言软件开......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99