User Interface for Transparent Cybersecurity Framework. The UI is created with Vue 3.
This project also includes instructions for developent deployment of the Tcsfw server using Docker. Tcsfw server can be ran directly from host machine, check TCSFW documentation.
You need Node.js. Check its documentation for installation instructions. Once you have Node.js installed clone this project.
$ git clone git://git@github.com/ouspg/tcsfw-ui.git
...
$ cd tcsfw-ui
Now Node.js should be able to do the heavy lifting for you to install the other dependencies: Vue 3 and Vite.
$ npm install
You have to create self-signed certificate and the matching private key for TLS service. For example, the OpenSSL tool can be used. The private key can be generated like below.
$ openssl genpkey -algorithm RSA -out server.key -pkeyopt rsa_keygen_bits:2048
And the self-signed certificate with the following command line.
$ openssl req -new -x509 -key server.key -out server.crt -days 365
Please, check OpenSSL documentation or other source for more information. However, for simple testing you should now have server.key
and server.crt
. Place them into ssl/
directory in the project root.
$ ls ssl/
server.crt server.key
The framework and UI can deployed using Docker compose for development purposes. At this point, the deployment is not ready for Internet-exposure.
You can run the UI with a stand-alone API server started in following manner (see Tcsfw documentation):
$ TCSFW_SERVER_API_KEY=<key> python <statement.py> --http-server 8180
Now you should be able to start the development web-server in localhost to try you the UI.
$ npm run dev
This should open up HTTPS service to https://localhost:5173/login/statement/<statement>?api_key=<key>
.
You must give the API key in the URL, which is only good for development purposes.
The server URL can be changed by environment variable VITA_API_PROXY
.
In slightly more complex setup, API server runs launcher, Nginx proxy is running in container and UI connects into it.
The launcher is part of the Tcsfw and it is run this way:
$ python tcsfw/launcher.py
As default, it listens in port 8180. The proxy is built and started like this:
$ cd api-proxy/
$ docker build -t test/api-proxy --build-arg "SERVER=172.17.0.1" \
--build-arg "USERS=user1:pass1"
The Dockerfile
for the proxy is in api-proxy/
directory, which contains also other required files.
The build argument SERFVER
gives the API server, which should be the address of the host in the docker-space (it may be different than which is used in example).
The build agument USERS
list the names and passwords of the test users.
The proxy can now be started like this and it should listen in port 8181:
$ docker run --rm -p 8181:8181 test/api-proxy
This change in port must be reflected in UI:
$ VITA_API_PROXY=http://localhost:8181 npm run dev