ShareWAF后端UI二次开发实践

做为一款WAF产品,ShareWAF的后端显的有些简洁。

虽然提供有登录、配置、管理、报表、态势感知、日志、系统监控等不少功能,但简约的风格是令UI还略显单薄。

那么,能否给后端UI换个风格呢?

当然可以。

因为ShareWAF提供了WEB API,支持进行UI方面的二次开发。

本文,就对界面进行尝试性的定制修改。

首先,需要获得ShareWAF主程序,ShareWAF WEB API接口程序,开启远程Mongodb数据库。(因为定制UI,属于比较高端的操作了,一般的使用是不需要的,既然高端化,那使用ShareWAF多数据库中的Mongodb,进行远程数据库部署,是很自然可以理解的。)

基本流程方面的思路是:我们定制开发的程序,跟WEB API通信,WEB API跟ShareWAF主程序和MongoDB数据库通信。

WEB API是标准的JSON格式,也有相应的文档,使用起来是比较简便的。

准备好以上内容之后,就可以开始定制开发了。开发主要的好处是:可实现自主的UI功能需求、可进行一些额外的功能设计,比如Session。

这是从功能层面而言,如果从市场等其它角度考虑,定制开发界面可以实现高度的OEM,可以打造独立的差异化品牌。从这一点来讲,ShareWAF原始简单的UI风格、预留的接口等不是示弱,反而是种长远的考虑、是种显著的优势。

开发语言用NodeJS,跟ShareWAF主程序保持一致。

接下来,就是实现的过程。

实现一个WEB服务,主要演示功能:

一、登录、

二、登录后带Session状态信息获取。

登录的过程,是接受post请求,再模拟一个post请求,通过web api判断登录是否正确,如果正确,给予session。

登录之后,通过session获取已登录的帐号名(即ShareWAF中的被保护域名),实现到这一步,就可以借助session完成各界面间跳转,也可以通过ajax实现后台通信、信息传递。

演示代码如下:



var express = require("express");
var app = express();
var session = require("express-session");
var bodyParser = require('body-parser');

//这两行是必须的,否则不能解析post参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

//配置session中间件
app.use(session({
    secret: "ShareWAF.com",
    rolling:true,
    saveUninitialized:true,
    resave:true
}))

//test
app.get("/test",function(req,res,next){
    if(req.session.userinfo == undefined){
        res.json({"stats":0"msg":"not authed"});
    }else{
        res.json(req.session.userinfo);
        next();
    }
});

//网页文件
app.use(express.static("public"));

//登录
app.post("/login",function(req,res){

    request_sharewaf_web_api(req,function(ret_val){
        console.log(ret_val)
        if(ret_val.state == -1){
            req.session.userinfo = req.body.domain;
            console.log("userinfo",req.body.domain);
            //res.json(ret_val);
            res.redirect("/index.html");
        }else{
            //res.json(ret_val);
            res.redirect("/login.html");
        }
    })
    
});

function request_sharewaf_web_api(ui_req,call_back){
    
    //Post数据
    var post_data = require("querystring").stringify({
        "verify_code": "123abc",
        "domain": ui_req.body.domain,
        "password": ui_req.body.password
    });
    console.log(post_data);

    //请求参数
    var options = {
        //主机地址
        hostname: "127.0.0.1",
        //端口
        port: 9090,
        //路径
        path: "/mongodb_login_auth/",
        //请求方式
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Content-Length": Buffer.byteLength(post_data)
        }
    };
    
    //返回内容
    var res_body = "";
    var req = require("http").request(optionsfunction(res){
        
        res.on("data"function(chunk){
            res_body += chunk;
        });

        res.on("end"function() {
            var json_res_body = JSON.parse(res_body);

            //登录状态
            call_back(json_res_body);
            
        });
    });
    
    req.on("error"function(e) {
        console.error(`problem with request: ${e.message}`);
    });
    
    req.write(post_data);
    req.end();
}

app.listen(3000);


如需更多功能,使用WEB API在此基础上扩展即可。

静态页的代码,简单展示ajax部分:

其它部分略过。

效果展示:

登录:

后台:



这样,与原本相比,界面风格便有了很大的变化。在制作时,选择不同风格的UI框架即可有不同的风格UI。