注册页验证码---nodejs

最新推荐文章于 2023-10-26 16:14:04 发布

Eason ZhangF

最新推荐文章于 2023-10-26 16:14:04 发布

阅读量257

点赞数

分类专栏：验证码-nodejs 文章标签： Nodejs 验证码

本文链接：https://blog.csdn.net/html5xiaoxiao/article/details/107353371

版权

验证码-nodejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

应用nodejs来写一个注册页的验证码

首先，先安装nodemailer模块
bash命令 npm i nodemailer -S
nodemailer官网 https://nodemailer.com/
官网有模板代码直接拷贝，进行删减自己所需

我的验证码文件夹目录
在这里插入图片描述
./lib/file.js
自定义的读写文件模块

const fs = require('fs');
const path = require('path');

function readFile() {
    return new Promise((resolve, reject) => {
        fs.readFile(path.join(__dirname, '..', ...arguments), 'utf8', (err, data) => {
            if (err) reject(err);
            resolve(data);
        });
    });
}

function writeFile() {
    return new Promise((resolve, reject) => {
        let url = Array.from(arguments);
        let data = url.shift();
        fs.writeFile(path.join(__dirname, '..', ...url), data, err => {
            if (err) reject(err);
            resolve('ok');
        });
    });
}

module.exports = { readFile, writeFile };

./public/html/reg.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1 class="text-center">注册页面</h1>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">用户名</span>
            <input type="text" class="form-control" placeholder="username" id="username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon2">密  码</span>
            <input type="text" class="form-control" placeholder="password" id="password" aria-describedby="basic-addon2">
        </div>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon4">邮箱</span>
            <input type="text" class="form-control" placeholder="email" id="email" aria-describedby="basic-addon4">
        </div>
        <button class="btn btn-info btn-block" id="getcode">获取验证码</button>
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon3">验证码</span>
            <input type="text" class="form-control" placeholder="checkcode" id="checkcode" aria-describedby="basic-addon3">
        </div>
        <button type="button" id="reg" class="btn btn-success btn-block">注册</button>
    </div>

    <script>
        $(function() {
            //点击获取验证码按钮 发送ajax请求
            $('#getcode').on('click',function(){
                $.ajax({
                    type:'post',
                    url:'http://localhost:8888/getcode',
                    data:{
                        email:$('#email').val()
                    },
                    dataType:'json',
                    success:function(res){
                        console.log(res);
                    }
                })
            })

            //点击注册按钮 发送ajax请求
            $('#reg').on('click', function() {
                $.ajax({
                    type: "post",
                    url: "http://localhost:8888/reg",
                    data: {
                        username: $('#username').val(),
                        password: $('#password').val(),
                        email:$('#email').val(),
                        code:$('#checkcode').val()
                    },
                    dataType: "json",
                    success: function(res) {
                        console.log(res);
                    }
                });
            });
        });
    </script>
</body>

</html>

注册页点击获取验证码按钮发送发送一次ajax请求，将填写的邮箱发送给后端；
点击注册再发送一次ajax请求，将注册的信息发送给后端

./server.js
注意：这是最主要的代码文件，看注释

const http=require('http');
const path=require('path');
const nodemailer=require('nodemailer');
const querystring=require('querystring');
const {readFile,writeFile}=require('./lib/file');
const fs=require('fs');


//--------------------------------------nodemailer部分
let user={
    name:'982455869@qq.com',
    pass:'jxlfhseptukjbbij'
}

// 使用默认的SMTP传输方式 创建可以复用的传输对象
let transporter = nodemailer.createTransport({
host: "smtp.qq.com",//主机名
port: 465,// 端口号
secure: true, // true for 465, false for other ports
auth: {
    user: user.name, // 用户名
    pass: user.pass, // 密码
},
});

let emailObj={
        from: '"zhangsan" <123456@qq.com>', // 发件人(这里填写发件人邮箱)
        to: "123456@qq.com",  // 收件人(这里填写收件人邮箱)
        subject: "验证码", // 主题
        // text: "Hello world?", // 文本内容
        html: "<b>Hello world?</b>", // html内容
    }

//-------------------------------------------------------

//创建一个服务
http.createServer((req,res)=>{
    if(req.url==='/favicon.ico') return;//系统自带的一个请求，给他去掉
    console.log(`${req.method} ${req.headers.host}${req.url}`);//打印请求的方式 以及主机和路径

    res.writeHead(200,{"content-type":"text/html;charset=utf-8"});

    if(req.method==='GET'){//web服务 用于页面渲染
        //路由
        switch(req.url){
            case '/reg'://渲染注册页
                readFile('public','html','reg.html').then(function(data){
                    res.end(data);
                })
                break;

        }
    }else{//接收post请求
        //API服务 数据接口
        switch(req.url){
            case '/getcode':
                req.on('data',chunk=>{//当请求到数据，进行打印数据
                    let data=querystring.parse(chunk.toString());
                    // console.log(data);//打印结果{ email: '填写在注册页的邮箱' }
                    let code=getCode();//获取验证码

                    emailObj.to=data.email;// 收件人
                    emailObj.html=`<h1>您的验证码是:${code}</h1>`;//发送到内容

                    // 用定义的传输对象发送邮件
                    let info = transporter.sendMail(emailObj,(err,info)=>{
                        if(err) console.log(err);
                        console.log('邮件发送成功');
                    });

                    //发送成功以后记录验证码---用文件读写的方式存储
                    writeFile(code,'temp',data.email);
                })
                break;
            case '/reg':
                req.on('data',chunk=>{
                    let value=querystring.parse(chunk.toString());
                    // console.log(value);
                    /* [Object: null prototype] {
                        username: 'zhangsan',
                        password: '123',
                        email: '自己填写的邮箱',
                        code: '6bZbJU'
                    } */
                    //读temp文件中的验证码和前端发来的验证码进行比较
                    readFile('temp',value.email).then(function(data){
                        if(data===value.code){
                            res.end('{"msg":"验证成功"}');
                            //注册成功后过10s删除temp中的验证码文件
                            let timer=setTimeout(function(){
                                fs.unlink(`./temp/${value.email}`,err=>{
                                    err && console.log(err);
                                    console.log('文件删除成功');
                                });
                                clearTimeout(timer);
                            },10000);
                        }else{
                            res.end('{"msg":"验证失败"}');
                        }
                    });
                })
                break;
        }
    }


}).listen(8888,()=>{//监听服务
    console.log('server is running on http://localhost:8888');
})


//----------------------------------------------------------

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

//验证码函数
function getCode() {
    var code = '';
    for (var i = 0; i < 6; i++) {
        var type = random(1, 3);
        switch (type) {
            case 1:
                code += String.fromCharCode(random(48, 57)); //数字
                break;
            case 2:
                code += String.fromCharCode(random(65, 90)); // 大写字母
                break;
            case 3:
                code += String.fromCharCode(random(97, 122)); // 小写字母
                break;
        }
    }
    return code;
}

思路：
1.创建服务
2.渲染注册页面前端发送ajax请求发送邮箱，后端接受到发送过来的email，然后进行发送验证码的操作
3.后端如何获取发送的验证码?
发送成功以后记录验证码。用文件读写的方式来记录，用邮箱名作为文件名，存入temp文件夹中(这样的好处是方便记录和查找)
4.前端点击注册按钮，发送ajax请求，存入temp中的验证码与前端ajax发送过来的验证码数据进行比较；
当两者相等是，返回给前端验证成功的响应，并且10s后删除temp对应的验证码文件；否则，验证失败。