JavaScript State Machine Documentation

Running the REST API

1. Start the WildFly 27 standalone server

   1. WILDFLY_HOME/bin/standalone.sh

2. Copy the admin_console_config.json file from the javascript-state-machine repository to WILDFLY_HOME/standalone/configuration/admin_console_config.json

3. Go to the root of the backend directory and deploy the application

   1. mvn package wildfly:deploy

4. Just to test the REST API is configured, try to access http://localhost:8080/js-state-machine-api/rest/public and ensure that you’re receiving a 200 code

5. Rest endpoints are now configured

Running the Frontend Client

1. Install NodeJS

2. Navigate to the frontend directory, and run npm install

3. Now run npm start, this should start and open a window with the web application, if not, go to http://localhost:3000/javascript-state-machine and you should see the login page

4. Web App is now ready to use

Note

The current implementation of the REST API and the frontend client are hosted on two different domains/ports. This causes an issue as they are not on the same origin/are Cross Origin. This breaks the CORS policy and should be fixed in the future. For development purposes, this is not a big deal, and can be combatted by using this extension as a workaround

How does it work

Note	{HOST} = http://localhost:8080/js-state-machine-api/rest

1. The structure of the configuration file looks like this

{
    "DEFAULT": {
        "name": "Username",
        "type": "text"
    },
    "ashpan": [
        {
            "name": "password",
            "type": "password",
            "order": 1
        },
        {
            "name": "Multi Factor Code",
            "type": "mfa",
            "order": 2
        }
        ],
        "second_user":[
            {
                "name": "health card version number",
                "type": "text",
                "order": 2
            },
            {
                "name": "health card number",
                "type": "number",
                "order": 1
            }
    ]
}

1. GET {HOST}/default/

   1. The first thing that gets called is the “DEFAULT” key, this prompts the web app to display the first input for users to enter, in most cases this would be their username/email. The type field is used to configure what inputs are permitted on the client form

2. GET {HOST}/username/{username}/

   1. From there, once a username is submitted, another API call is made with the “DEFAULT input” as a parameter. This call will return an array of inputs, this array can be of any size with a minimum of 1 (e.g. a password prompt). Each object in the array contains the name of the field, the type of input, and the order of the inputs so that it is rendered correctly on the client.

3. POST {HOST}/login/{username}

   1. Once the client inputs have all been entered and the submit button is clicked, the data can be sent to Elytron to be verified for login. It will be submitted to the server as a JSON string of key pairs. The key will be the field name and the value will be the user’s inputted value.