Skip to main content

Detailed Technical Procedure

External Auth Embedding - Detailed Technical Procedure​

Route Definition (web.php)​

Routes are implemented within a group with the prefix 'integrations' handling different integrations with a pattern /integrations/{tenant_id}/embeddable-login-ui and other specific routes for additional messages. A clear example is the association of certain routes with Livewire components designed for individual tenants such as LaDiaria and Derrama.

Livewire Components and Classes​

  • Livewire Component (App\Http\Livewire\CustomIntegrations): A Livewire component is defined that handles the behavior and state of the user interface (UI) of the integration form, including events that communicate with the iFrame through postMessage.
  • Integration Class (Example LaDiaria, Derrama): Handles the specialized integration with the Tenant, including user authentication logic and communication with the remote server.
  • CustomIntegrations Class: Contains static methods for user authentication and interacts with different services depending on whether the integration is for web or mobile application.

Views and Scripts​

  • Views (resources\views\livewire\custom-integrations): Each Livewire view is linked with specific JavaScript files that manage UI interactions, such as button clicks and form validation, and communicate events to the iFrame.
  • JavaScript Script (resources\js\custom-integrations): Scripts that handle the logic of events and communication between the Livewire component and the iFrame.

App​

Set two environment variables (PUB_CUSTOM_SIGN_IN=true and PUB_CUSTOM_SIGN_IN_URL='/integrations/{tenant_id}/embeddable-login-ui') to enable the embedded custom sign-in screen. The screen defines a WebView as an iframe to remotely connect with /integrations/{tenant_id}/embeddable-login-ui. The remote page is cached within the WebView, but if it fails to load, an error message replaces the entire view.

User Validation and Authentication​

The CustomIntegrations service is responsible for validating login data with the client's platform. Depending on whether the integration is for a web or mobile platform, a JWT or an access token will be generated, which will be used for user request authentication.

Communication of Responses and Events​

The postMessage method is used to communicate the result of authentication actions from the backend, determining the flow of events and managing behavior based on the implementation platform.

Environment Variable Configuration​

It is essential to configure environment variables within the project's .env files to establish the minimum parameters required for the integration of each tenant.

X

Graph View