#1145: Embedding and authorizing a web widget in your own application
Отредактирована: сегодняIntegrating an external system and quick login
Please read the overview of the integration logic described in the article first (https://support.swarmica.com/article/ru/557-ru.html).
IMPORTANT: This document provides examples of OTP_CODE_KEY and API key.
When going to production, you will need to change the cipher (OTP_CODE_KEY) and API key used for integration.
System setup (once/as needed)
Setting up the system, both Swarmica and the external system being integrated (your application), is done once (or reconfigured as needed).
On the Swarmica side:
- On the server: You need to set up a secret key for the cipher and the maximum allowed time deviation in the timestamp and connect the authorization provider code: To do this, set the variables in
/root/swarmica/.env:
root@swarmica# grep -i code .env
AUTH_PROVIDERS=email,code
OTP_CODE_KEY=E655633B-2FAB-4661-9637-EXAMPLE
OTP_CODE_TIMESTAMP_DELTA=120
The parameter OTP_CODE_TIMESTAMP_DELTA is the lifespan of the generated link for user authorization in seconds. For example and testing, this parameter is set to 120 seconds; for production, it is recommended to set it to a few seconds (5-10).
The parameter OTP_CODE_KEY is a secret key used for encrypting/decrypting authorization data. After completing the development, it is recommended to replace the key.
Restart the system:
cd /root/swarmica
docker compose down
docker compose up -d
- In the Swarmica app (Administrator rights required): Create an API key that will be used by the backend of the integrated system in Settings > API Integration. It will look like this:
EXAMPLE-cdc6-4be4-a31d-1cf0aa129b99
On the side of the integrated system (billing or panel):
- Prepare the code to work with the Swarmica API.
- Write down in configurable variables:
- Code for the cipher (same as OTP_CODE_KEY above): E655633B-2FAB-4661-9637-EXAMPLE
- API key:
EXAMPLE-cdc6-4be4-a31d-1cf0aa129b99 - Template HTML code for embedding the widget with OTP settings https://support.swarmica.com/article/ru/599-vstraivaemyj-veb-vidzhet.html
Example widget code:
<!-- start embedded Swarmica widget script -->
<iframe src="https://support.yourdomain.tld/widgets/index.html?id=veNilW0QFQhTq2hg&locale=en&otpdata=URLENCODED_ДАННЫЕ_СМ_ДАЛЕЕ" id="veNilW0QFQhTq2hg" style="position: fixed; right: 12px; bottom: 12px; width: 56px; height: 56px; overflow: hidden; "
allowTransparency="true"
frameborder="0"
allowTransparency="true" frameborder="0"></iframe>
<script src="https://support.yourdomain.tld/widgets/render.js"></script>
<script>
const iframe = document.getElementById("veNilW0QFQhTq2hg")
iframe.onload = () => {
renderWidget("veNilW0QFQhTq2hg")
}
</script>
<!-- end embedded Swarmica widget scripts -->
Receiving a code for the user (when registering / authorizing the user in your application)
...