User interface

It is possible to closely integrate frePPLe’s user interface in other web applications.

To create a exceptional and powerful user experience, frePPLe provides:

• Ability to authenticate user with a web token (see https://jwt.io/introduction/) issued by another web application. Users only need to log in once. The user authentication is handled your web application, which forward the credentials to frePPLe in a securely encrypted token.
• Ability to display frePPLe in a iframe, with or without its navigation bar.
• Ability to completely customize the look and feel of the frePPLe user interface. You can create custom themes to match your web application. See http://getbootstrap.com/customize/ and Creating an custom theme

Below is an example of the final result of such an integration.

The green boundary is the complete user interface, in this case Odoo (see http://odoo.com).

The content of the red area is generated by frePPLe.

The implementation requires the following steps:

• The external application needs to generate a webtoken.

  Here is some example code using the Python PyJWT (see http://pyjwt.readthedocs.io/en/latest/) library:

  import jwt
  import time
  webtoken = jwt.encode(
    {
    'exp': round(time.time()) + 600,    # Validity of the token
    'user': USERNAME,                   # User name
    'navbar': True                      # Whether or not frePPLe should render
                                        # its navigation bar or not
    },
    'MY_SECRETKEY',    # The shared secret between frePPLe and your application
    algorithm='HS256'
    ).decode('ascii')
  

• The external application needs to use an iframe to display frePPLe’s content in.

  <iframe src="https://FREPPLE_URL/?webtoken=WEBTOKEN" width="100%" height="100%"
    marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" />
  

• On frePPLe’s side the secret needs to be configured in the file djangosettings.py:

  ...
  DATABASES = {
    'default': {
       ...
       SECRET_WEBTOKEN_KEY: 'MY_SECRETKEY',
       ...
       }
    }
  ...