Skip to content

External Widgets

Concept:

Host = Bs.UI (the application into which the iframe is embedded)

Plugin - any page that can include plugin-sdk.js for communication with the host, but can be completely static

Service response example:

json
{
  "status": "ok",
  "timestamp": 1522615252240,
  "data": {
    "redirectTo": "https://some-widget?_user_bsauth=encrypt(request()->header('bsauth'))"
  }
}

The external service must handle session storage, for example, storing a key in redis that will be used to retrieve the entire request context. Temporary key-value databases are convenient due to the absence of cryptography and automatically expiring links.

Host requests the service at the href link passing context in get parameters

For example, the final request link will be http://whatever/api/init-collateral-widget?id=123&targetOrigin=http...

id = context entity id

targetOrigin = host link for sending events. If the js sdk is not used, it can be ignored

{
    "status": "ok",
    "timestamp": 1522615252240,
    "data": {
        "redirectTo": "http://whatever/view-collateral-widget?sessionId=aaaaaaaaaaaaaaaaa123"
    }
}

PS. after SSO implementation, the scheme will maintain backward compatibility

Bs.UI Configuration

settings/ExtraServices.xml

xml
<?xml version="1.0" encoding="UTF-8" ?>
<settings>
  <services>
    <service
      authenticate="true"
      entity="collateral"
      code="demo"
      href="http://whatever/api/init-collateral-widget"
      purpose="sidebar"
	>Collateral widget name</service>
  </services>
</settings>

service.authenticate="true" (whether bsauth will be sent during session initialization) service.entity="collateral" (the entity in whose context the widget operates) service.code="demo" (unique code name of the widget) service.href="http://whatever/api/init-collateral-widget" (initialization link) service.purpose="sidebar" (widget purpose, affects its display and position)

Examples

Plugin page example with the ability to send events to host

html
<!doctype html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" />
  </head>
  <body>
    <p>
      <a href="#" class="btn btn-primary" onclick="BS_SDK.navigate.client(123)">BS_SDK.navigate.client(123)</a>
      <a href="#" class="btn btn-primary" onclick="BS_SDK.navigate.loanApp(123)">BS_SDK.navigate.loanApp(123)</a>
    </p>
    <p>
      <a href="#" class="btn btn-warning" onclick="BS_SDK.notifications.success('success')"
        >BS_SDK.notification.success('success')</a
      >
      <a href="#" class="btn btn-warning" onclick="BS_SDK.notifications.info('info')"
        >BS_SDK.notification.info('info')</a
      >
    </p>

    <script src="https://cdn.brainysoft.ru/sdk/sdk-plugin/1.0/index.js"></script>

    <script>
      (function () {
        consttargetOrigin = new URLSearchParams(window.location.search).get('_target_origin');
        window['BS_SDK'].setTargetOrigin(targetOrigin);
      })();
    </script>
  </body>
</html>