Jump to content
  • Migrate an Existing Custom Login Page in Spotfire®


    This article provides you with details of migrating an existing custom login page, based on AngularJS, to a custom page based on Cobranding.

     

    Deprecating the AngularJS Custom Login Page API

    The AngularJS-based API for creating a Custom Login Page for Spotfire® is deprecated, starting with TIBCO Spotfire® Server 11.4.0 LTS. It will be completely removed in a later version of the Spotfire® Server.

    AngularJS has set an end-of-life date for its LTS on December 31st, 2021.

    The new Custom Login Page API does not rely on a framework, and it is written in vanilla JavaScript, so that you are not required to learn a framework or depend on framework-breaking changes in the future.

    Use Cobranding for customizing Spotfire products

    The standard way to customize products related to Spotfire (including the Spotfire Server web interface, or TSS Web UI) is to use Spotfire® Cobranding.

    Use the Package Builder tool to create a package, and then upload that package using the TSS Web UI Deployments & Packages page.

    After TSS 11.4.0 LTS, the Custom Login Page feature works only with the cobranding system.

    Read more about cobranding in the Spotfire® Cobranding guide.

    Migrate an existing custom login page

    This article provides you with details of migrating an existing custom login page, based on AngularJS, to a custom page based on Cobranding.

    For your migration, you need two files:

    1. your login HTML page.
    2. your glue JavaScript module.

    Rewrite your HTML

    Your login HTML file must accommodate upcoming changes. It should not contain the <html><head>, and <body> tags of a normal HTML page. (Modern browsers can handle these missing tags and automatically add them where needed.)

    Your HTML file must contain the <script> and <link> tags to import scripts or styles, as well as the customized  content. See the Attachments section at the end of this page.

    Import your external script and, optionally, an external CSS file

    You need a glue script that facilitates the communication between your HTML page and the Custom Login Page API. 

    You can also have an external CSS file, which you can import, too.

    Because you upload your glue script and your CSS file using the Spotfire cobranding mechanism, the path of these files is dynamic. To reference them correctly in your HTML, prefix them with /[%AppPath%]/:

    <script type="module" src="/[%AppPath%]/custom-login-app-example.js"></script>

     

    <link rel="stylesheet" href="/[%AppPath%]/custom-login-app-example.css" />

    Write the glue script

    The glue script replaces your existing AngularJS controller. You must write it so that you can easily listen to, and react to, user events in the HTML page, and then call the Custom Login page API.

    Note: Your glue script must be a JavaScript module to import the Custom Login Page API JavaScript module.

    The Custom Login Page API facilitates communication between your login page and the Spotfire Server authentication-related API.

    The Custom Login Page API  is a JavaScript module with the default export: TSSCustomLoginApi.

     

    Import it into your glue script and instantiate it in order to call the exposed functions of the API:

    import TSSCustomLoginApi from "/spotfire/js-api/custom-login-api.js";

     

    const customLoginApi = new TSSCustomLoginApi();

    Note: The Custom Login Page API module is placed in a static location, so make sure to use the following path when you import it:

    /spotfire/custom-login-api/custom-login-api.js

    See the Attachments section at the end of this page.

    See the functionality exposed by the new Custom Login Page API in the Cobranding help.

    Note: The retryCsrf function that existed in the AngularJS API is removed in the new API. This function was used to retry the initial login request by adding the X-XSRF-TOKEN. Now, retrying is done automatically when the function is called.

    Create the cobranding package

    Create the configuration file

    Create a cobranding configuration file, as described in the following topic in the Spotfire® Cobranding guide:

    https://docs.tibco.com/pub/sfire-analyst/latest/doc/html/en-US/TIB_sfire...

    For your custom login page to work, you must add the following code in the configuration file (replacing custom-login-app-example.html with the name of your custom HTML file):

    <customLoginPage>custom-login-app-example.html</customLoginPage>

    See a full configuration file sample in the following topic in the Spotfire® Cobranding guide:

    https://docs.tibco.com/pub/sfire-analyst/latest/doc/html/en-US/TIB_sfire...

    Create and deploy the Custom Login Page cobranding package

    Place your files (the configuration file, the HTML page, the glue script, and, optionally, the CSS file) together in a directory on your computer, and then follow the instructions provided in the following topic in the Spotfire® Cobranding guide:

    https://docs.tibco.com/pub/sfire-analyst/latest/doc/html/en-US/TIB_sfire...

    To deploy the package to the Spotfire Server, follow the instructions in the following topic in the Spotfire® Server Installation and Administration guide:

    https://docs.tibco.com/pub/spotfire_server/latest/doc/htm

    custom-login-app-example.zip


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...