WeBASE实训插件方案

WeBASE实训插件方案

1 背景介绍

2020年7月6日，人社部联合国家市场监管总局、国家统计局向社会发布了第三批新职业名单，“区块链工程技术人员”赫然在列，越来越多的区块链从业者得到了国家层面的承认，对就业、创业的带动作用明显，彰显了区块链行业的巨大价值和就业前景。随着市场对人才的需求和要求迅速增长，区块链技术培训需求加快释放。如何将 WeBASE与区块链课程相结合，以更好的服务开发者？应对这一命题，WeBASE团队和FISCO BCOS 教育合作伙伴柏链教育对 WeBASE 功能进行针对性调整，推出WeBASE实训插件方案。

2 插件使用形态

WeBASE实训插件方案主要的目的是：将WeBASE管理台的部分功能作为插件嵌入到具体的实训系统中，辅助实训系统完成其区块链相关的一些实训功能。

             其嵌入的形式可以入下图：![](../../images/WeBASE-Training-Plugin-Plan/iframe2.png)

3 具体改造方案

侧边栏默认收起
陆页面获取参数配置，根据配置判断是否支持iframe嵌入，允许哪些域名嵌入deploy
满足iframe嵌入的条件下，如果是iframe嵌入，则自动登录
自动登录的用户取消使用引导
自动登录的用户隐藏修改密码功能（包括首次登陆、右上角修改密码入口）
自动登录跳转到指定的router

4 使用方法和二次开发

4.1 安装 WeBASE 环境

使用到的子系统有WeBASE-Front、WeBASE-Node-Manager、WeBASE-Sign、 WeBASE-Web。WeBASE-Web使用dev-sx分支，WeBASE-Front、WeBASE-Node-Manager、WeBASE-Sign 使用v1.5.1及上版本。

4.2 WeBASE配置

4.2.1 WeBASE-Node-Manager数据库中插入参数设置数据，脚本如下：

INSERT INTO `tb_config`(`config_name`, `config_type`, `config_value`, `create_time`, `modify_time`) VALUES ('SupportIframe', 2, '1', '2020-09-22 17:14:23', '2020-09-22 17:14:23');
INSERT INTO `tb_config`(`config_name`, `config_type`, `config_value`, `create_time`, `modify_time`) VALUES ('IframeSupportHostList', 3, 'baidu.com|163.com', '2020-09-22 17:14:23', '2020-09-22 17:14:23');

其中，SupportIframe设置为1，表示开启iframe嵌入支持；IframeSupportHostList为iframe嵌入支持的host白名单列表。

配置访问接口如下：

http://127.0.0.1:5001/WeBASE-Node-Manager/config/list?type=2

4.2.2 WeBASE-Node-Manager配置

修改webase-node-manager/conf/application.yml。

修改constant.permitUrlArray：

permitUrlArray: /account/login,/account/pictureCheckCode,/login,/user/privateKey/**,/config/encrypt,/config/version,/front/refresh,/api/*,/config/list

修改constant.verificationCodeMaxAge，设置为与你的系统的session时间一致。
修改constant.enableVerificationCode=false，设置为false，用以固定验证constant.verificationCodeValue=”8888”，为固定的验证码值，不需要修改
修改constant.developerModeEnable，设置为true，开启开发者模式。
重启WeBASE-Node-Manager服务。

这些配置主要的作用是：

开发者模式主要是为了做学员间的合约和私钥隔离。
固定校验码为了实现单点登录
permitUrlArray配置是为了放开接口访问权限

5 实验台中使用

5.1 iframe嵌入

在适当的位置使用iframe嵌入，嵌入时直接使用WeBASE-Node-Manager的login页面。如：

<iframe
      ref="myFrame"
      src="http://localhost:3006/#/login"
      frameborder="0"
      width="100%"
      height="700"
></iframe>

5.2 自动登录

向子页面传递参数（router, user, password），实现自动登录。其中，用户的账号及密码，为WeBASE-Node-Manager平台已添加的账户信息，建议账户类型为开发者；router为指定跳转后定位到的页面

router清单：
/home    首页
/contract   合约IDE
/contractList   合约列表
/cnsManagement    CNS查询
/CRUDServiceManagement    CURD
/privateKeyManagement    私钥管理

vue向webase子页面传参示例：

<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.iframeInit();
  },
  computed: {},
  methods: {
    iframeInit() {
      let myFrame = this.$refs["myFrame"];
      if (myFrame.attachEvent) {
        //兼容浏览器判断
        myFrame.attachEvent("onload", function () {
          let iframeWin = myFrame.contentWindow;
          iframeWin.postMessage(
            { router: "/contract", user: "admin", password: "123456" },
            "*"
          );
          //data传递的参数   *写成子页面的域名或者是ip
        });
      } else {
        myFrame.onload = function () {
          let iframeWin = myFrame.contentWindow;
          iframeWin.postMessage(
            { router: "/contract", user: "admin", password: "123456" },
            "*"
          );
        };
      }
    },
  },
};
</script>

在适当的位置使用iframe嵌入嵌入示例

<template>
        <div style="height:100%">
            <div>
                <div style="height:100%;width: 10%;float: left;background: #0B243B;">
                   <div style="width: 100%;float: left;border-bottom:1px">
                       <div style="padding-left: 35px;padding-top: 40px;">
                           <span style="font-size: 14px;color: #37eef2;">学生</span>
                       </div>
                   </div>
                   <div style="width: 100%;height:250px;float: left;">
                        <div style="padding-top: 50px;padding-left: 60px;">
                            <span style="font-size: 14px;color: #37eef2;text-align: left;">结束实验</span>
                       </div>
                        <div style="padding-top: 50px;padding-left: 60px;">
                            <span style="font-size: 14px;color: #37eef2;text-align: left;">下个实验</span>
                       </div>
                        <div style="padding-top: 50px;padding-left: 60px;">
                            <span style="font-size: 14px;color: #37eef2;text-align: left;">关闭页面</span>
                       </div>
                   </div>
                   <div style="width: 100%;height:250px;float: left;">
                       <div style="padding-top: 50px;padding-left: 5px;">
                            <span style="font-size: 14px;color: #9da2ab;text-align: left;">实验名称:
                                <span style="color: #37eef2;">
                                    智能合约编辑器2.0
                                </span>
                            </span>
                       </div>
                        <div style="padding-top: 50px;padding-left: 5px;">
                            <span style="font-size: 14px;color: #9da2ab;text-align: left;">实验时间:
                                 <span style="color: #37eef2;">
                                     1小时
                                </span>
                            </span>
                       </div>
                        <div style="padding-top: 50px;padding-left: 5px;">
                            <span style="font-size: 14px;color: #9da2ab;text-align: left;">倒计时:
                                <span style="color: #37eef2;">
                                      50分32秒
                                </span>
                            </span>
                       </div>
                   </div>
                   <div style="width: 100%;height:421px;float: left;">
                       <div style="padding-top: 50px;padding-left: 5px;">
                            <span style="font-size: 14px;color: #37eef2;text-align: left;">智能合约编辑器2.0</span>
                       </div>
                        <div style="padding-top: 50px;padding-left: 5px;">
                            <span style="font-size: 14px;color: #9da2ab;text-align: left;">测试实验1</span>
                       </div>
                   </div>
                </div>
                 <div style="float:left;width: 90%;height:100%;">
                       <iframe
                        ref="myFrame" 
                        src="http://127.0.0.1:3006/#/login"
                        frameborder="0"
                        width="100%"
                        height="980"
                    ></iframe>
                 </div>
                </div>
        </div>
</template>
<script>
    export default {
        data() {
            return {};
        },
        created() {},
        mounted() {
            this.iframeInit();
        },
        computed: {},
        methods: {
            iframeInit() {
            let myFrame = this.$refs["myFrame"];
            if (myFrame.attachEvent) {
                //兼容浏览器判断
                myFrame.attachEvent("onload", function () {
                let iframeWin = myFrame.contentWindow;
                iframeWin.postMessage(
                    { router: "/contract", user:localStorage.getItem("userName"), password: localStorage.getItem("passWord")},
                    "*"
                );
                //data传递的参数   *写成子页面的域名或者是ip
                });
            } else {
                myFrame.onload = function () {
                let iframeWin = myFrame.contentWindow;
                iframeWin.postMessage(
                    { router: "/contract", user: localStorage.getItem("userName"),password: localStorage.getItem("passWord")},
                    "*"
                );
                };
            }
            },
        },
    };
</script>
<style>
.main {
    width: 100%;
    min-width: 1200px; 
}
.el-message__content {
    display: inline-block;
}
.el-message__closeBtn {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 0 !important;
}
.home-center {
    margin-right: 20px;
}
</style>

5.3 linux环境一键部署

1.下载安装包

wget https://osp-1257653870.cos.ap-guangzhou.myqcloud.com/WeBASE/releases/download/v1.5.1sx/sx-deploy.zip

解压包

unzip sx-deploy.zip
cd webase-front

3.修改common.properties文件

sx.web.version = v1.5.1sx
webase.web.version=v1.5.1sx
webase.mgr.version=v1.5.1sx
webase.sign.version=v1.5.1
webase.front.version=v1.5.1
# 节点管理子系统mysql数据库配置
mysql.ip=127.0.0.1
mysql.port=3306
mysql.user=dbUsername
mysql.password=dbPassword
mysql.database=webasenodemanager
# 签名服务子系统mysql数据库配置
sign.mysql.ip=localhost
sign.mysql.port=3306
sign.mysql.user=dbUsername
sign.mysql.password=dbPassword
sign.mysql.database=webasesign
# 节点前置子系统h2数据库名和所属机构
front.h2.name=webasefront
front.org=fisco
# sxWEB管理平台服务端口
sxweb.port=5110
# WeBASE管理平台服务端口
web.port=5000
# 节点管理子系统服务端口
mgr.port=5001
# 节点前置子系统端口
front.port=5002
# 签名服务子系统端口
sign.port=5004
# 节点监听Ip
node.listenIp=127.0.0.1
# 节点p2p端口
node.p2pPort=30300
# 节点链上链下端口
node.channelPort=20200
# 节点rpc端口
node.rpcPort=8545
# 加密类型 (0: ECDSA算法, 1: 国密算法)
encrypt.type=0
# SSL连接加密类型 (0: ECDSA SSL, 1: 国密SSL)
# 只有国密链才能使用国密SSL
encrypt.sslType=0
# 是否使用已有的链（yes/no）
if.exist.fisco=no
# 使用已有链时需配置
# 已有链的路径，start_all.sh脚本所在路径
# 路径下要存在sdk目录（sdk目录中包含了SSL所需的证书，即ca.crt、sdk.crt、sdk.key和gm目录（包含国密SSL证书，gmca.crt、gmsdk.crt、gmsdk.key、gmensdk.crt和gmensdk.key）
fisco.dir=/data/app/nodes/127.0.0.1
# 前置所连接节点的绝对路径
# 节点路径下要存在conf文件夹，conf里存放节点证书（ca.crt、node.crt和node.key）
node.dir=/data/app/nodes/127.0.0.1/node0
# 搭建新链时需配置
# FISCO-BCOS版本
fisco.version=2.7.2
# 搭建节点个数（默认两个）
node.counts=nodeCounts

4.部署并启动所有服务

   python3 deploy.py installAll

5.部署完成后可以看到deploy has completed的日志：

==============      Starting startSxWeb      ==============
=======  sx-web   start success! =======
============================================================
==============      deploy  has completed     ==============
============================================================
==============    webase-web version  v1.5.1sx        ========
==============    webase-web version  v1.5.1sx        ========
==============    webase-node-mgr version  v1.5.1sx   ========
==============    webase-sign version  v1.5.1       ========
==============    sx-web version  v1.5.1sx      ========
============================================================

6 启动和停止所有服务

     python3 deploy.py startAll
     python3 deploy.py stopAll

7 访问

http://127.0.0.1:5110/sx/#/ 用户名密码需要登录节点管理子系统添加

8 本方案贡献者

贡献者名称	github账号
leeduckgo（李骜华	https://github.com/leeduckgo
ErQi(齐涛)	https://github.com/ErQi
孙丽英	https://github.com/sunliying2020