Frontend Exposition

This page will describe how to expose the Frontend part of the WIMP system so that it can be accessed by the teachers and the administrators.

info

As a reminder, the "Frontend" term in the WIMP system refers to the part that is accessible by the students and the researchers. For more information about the definitions used in the WIMP system, please see this page.

note

For this part of the tutorial, you must be in the ExpressNodeRed directory :

cd ~/wimp-frontend/

Create a Frontend service

You can create a systemd service for the Frontend part :

• Copy the file conf/wimp-frontend.service into the systemd directory :

cp conf/wimp-frontend.service /etc/systemd/system/

• Start the Frontend service :

sudo systemctl start wimp-frontend.service

Here, the Frontent part of the WIMP system is running on the Port that you have defined in the .env file.

• Verify that the service has started correctly :

sudo systemctl status wimp-frontend.service

Generate SSL certificate

In order to make the frontend work with HTTPS, you can generate a self-signed SSL certificate. To generate a self-signed certificate, you need to follow the following steps:

1. Create your own Certification Authority (CA)

   • Install openssl on the server:

   sudo apt-get install openssl

   • Create a directory to store the certificates:

   sudo mkdir /etc/ssl/wimp

   • Create the following configuration file for your CA:

   vim openssl-ca.cnf
       HOME            = .RANDFILE        = $ENV::HOME/.rnd
   ####################################################################[ ca ]default_ca    = CA_default      # The default ca section
   [ CA_default ]
   default_days     = 365          # How long to certify fordefault_crl_days = 30           # How long before next CRLdefault_md       = sha256       # Use public key default MDpreserve         = no           # Keep passed DN ordering
   x509_extensions = ca_extensions # The extensions to add to the cert
   email_in_dn     = no            # Don't concat the email in the DNcopy_extensions = copy          # Required to copy SANs from CSR to cert
   ####################################################################[ req ]default_bits       = 4096default_keyfile    = cakey.pemdistinguished_name = ca_distinguished_namex509_extensions    = ca_extensionsstring_mask        = utf8only
   ####################################################################[ ca_distinguished_name ]countryName         = Country Name (2 letter code)countryName_default = US
   stateOrProvinceName         = State or Province Name (full name)stateOrProvinceName_default = Maryland
   localityName                = Locality Name (eg, city)localityName_default        = Baltimore
   organizationName            = Organization Name (eg, company)organizationName_default    = Test CA, Limited
   organizationalUnitName         = Organizational Unit (eg, division)organizationalUnitName_default = Server Research Department
   commonName         = Common Name (e.g. server FQDN or YOUR name)commonName_default = Test CA
   emailAddress         = Email AddressemailAddress_default = test@example.com
   ####################################################################[ ca_extensions ]
   subjectKeyIdentifier   = hashauthorityKeyIdentifier = keyid:always, issuerbasicConstraints       = critical, CA:truekeyUsage               = keyCertSign, cRLSign

   • Generate the CA:

   openssl req -x509 -config openssl-ca.cnf -newkey rsa:4096 -sha256 -nodes -out cacert.pem -outform PEM

   • You can inspect the content of the CA generated:

   openssl x509 -in cacert.pem -text -noout

2. Create a certificate signing request (CSR) for the server that hosts the frontend

   • Create the configuration file for the generation of the CSR:

   vim openssl-server.cnf
   HOME            = .RANDFILE        = $ENV::HOME/.rnd
   ####################################################################[ req ]default_bits       = 2048default_keyfile    = serverkey.pemdistinguished_name = server_distinguished_namereq_extensions     = server_req_extensionsstring_mask        = utf8only
   ####################################################################[ server_distinguished_name ]countryName         = Country Name (2 letter code)countryName_default = US
   stateOrProvinceName         = State or Province Name (full name)stateOrProvinceName_default = MD
   localityName         = Locality Name (eg, city)localityName_default = Baltimore
   organizationName            = Organization Name (eg, company)organizationName_default    = Test Server, Limited
   commonName           = Common Name (e.g. server FQDN or YOUR name)commonName_default   = Test Server
   emailAddress         = Email AddressemailAddress_default = test@example.com
   ####################################################################[ server_req_extensions ]
   subjectKeyIdentifier = hashbasicConstraints     = CA:FALSEkeyUsage             = digitalSignature, keyEnciphermentsubjectAltName       = @alternate_namesnsComment            = "OpenSSL Generated Certificate"
   ####################################################################[ alternate_names ]
   DNS.1  = example.comDNS.2  = www.example.comDNS.3  = mail.example.comDNS.4  = ftp.example.com
   # If you don't have a DNS name in production, you have to put the IP of your# server that the browser can reach.
   # Add these if you need them. But usually you don't want them or#   need them in production. You may need them for development.# DNS.5       = localhost# DNS.6       = localhost.localdomain# IP.1        = 127.0.0.1# IP.2        = ::1

   • Generate the CSR:

   openssl req -config openssl-server.cnf -newkey rsa:2048 -sha256 -nodes -out servercert.csr -outform PEM

   • You can inspected the content of the CSR generated:

   openssl req -text -noout -verify -in servercert.csr

3. Sign the server's CSR with your CA key

   • Update the CA's configuration file with the following changes:

     • Add the two following sections at the end of the configuration file:

       ####################################################################[ signing_policy ]countryName            = optionalstateOrProvinceName    = optionallocalityName           = optionalorganizationName       = optionalorganizationalUnitName = optionalcommonName             = suppliedemailAddress           = optional
       ####################################################################[ signing_req ]subjectKeyIdentifier   = hashauthorityKeyIdentifier = keyid,issuerbasicConstraints       = CA:FALSEkeyUsage               = digitalSignature, keyEncipherment

     • Add the following information to the [CA-default] section:

       base_dir      = .certificate   = $base_dir/cacert.pem   # The CA certifcateprivate_key   = $base_dir/cakey.pem    # The CA private keynew_certs_dir = $base_dir              # Location for new certs after signingdatabase      = $base_dir/index.txt    # Database index fileserial        = $base_dir/serial.txt   # The current serial number
       unique_subject = no  # Set to 'no' to allow creation of                    # several certificates with same subject.

   • Create the files index.txt and serial.txt :

   touch index.txtecho '01' > serial.txt

   • Sign the CSR with your CA :

   openssl ca -config openssl-ca.cnf -policy signing_policy -extensions signing_req -out servercert.pem -infiles servercert.csr

4. Install the CA certificate on the client (users' browser)

   • Import the file cacert.pem as an Authority in your users' browser

note

The information mentionned in this part are extracted from the following resources:

• https://stackoverflow.com/questions/21297139/how-do-you-sign-a-certificate-signing-request-with-your-certification-authority/21340898#21340898
• https://stackoverflow.com/questions/10175812/how-to-generate-a-self-signed-ssl-certificate-using-openssl

Configure Nginx

Now, we need to expose the Frontend service to the users thanks to an Nginx Reverse Proxy. The Nginx reverse proxy will allow you to setup HTTPS traffic :

• Install Nginx on your Raspberry Pi or your server by using the following guide.
• Copy the WIMP proxy configuration file conf/wimp-proxy into the Nginx directory /etc/nginx/sites-available :

sudo cp ./ExpressNodeRed/conf/wimp-proxy /etc/nginx/sites-available

• Create a symbolic link in the directory /etc/nginx/sites-enabled :

sudo ln -s /etc/nginx/sites-available/wimp-proxy /etc/nginx/sites-enabled

• Restart nginx :

sudo service nginx restart

Test the Frontend

Now you can verify that the Fronten is well deployed :

• Connect on the local network
• Open your browser and point it to : https://Frontend IP/
• Check that you are well redirected on the login page and that the Frontend is functional.

Congratulations, you have deployed your WIMP system !