This project provides a reference implementation for integrating the THNDR SDK to show the web app in an iFrame. It includes a simple HTTP server setup, a reference HTML file (index.html), and the SDK JavaScript file (thndr-sdk.js). Follow the instructions below to get started.
To serve your project locally, you will use the http-server package.
-
Install Node.js: Ensure you have Node.js installed on your system. You can download it from Node.js.
-
Install http-server: Open your terminal and install the
http-serverpackage globally using npm:npm install -g http-server
-
Navigate to Your Project Directory: Change your terminal's current directory to your project's root directory (where the
thndr-sdk.jsfile is located):cd /path/to/operator-sdk -
Run the HTTP Server: Start the server with the following command:
http-server -p 8005 -c-1 --cors
-p 8005: Specifies the port number to use.-c-1: Disables caching.--cors: Enables Cross-Origin Resource Sharing (CORS).
-
Access the Example: Open your web browser and navigate to:
http://localhost:8005/examples/html/index.html
The http-server.json file configures the HTTP server. Here's a sample configuration from your project:
{
"headers": {
"/**": {
"Cache-Control": "no-cache, no-store, must-revalidate",
"Pragma": "no-cache",
"Expires": "0"
}
}
}This configuration ensures that the server does not cache any content, which is useful during development to always fetch the latest changes.
The index.html file serves as a reference implementation for integrating the THNDR SDK and web app. Here's a quick overview of its structure and how you can use it:
This file sets up an iframe and includes a script to load the THNDR SDK.
Read the latest documentation on https://docs.thndr.io/thndr
To integrate this into your project, copy the content of index.html into your web application's HTML file where you want to include the THNDR iframe.
The thndr-sdk.js file is the main SDK script that facilitates secure communication between your web application and the iFrame.
This SDK handles token authentication requests, redirections, and ensures messages are only processed from the trusted THNDR Iframe.
- Import and Initialize: Include the SDK in your HTML file as shown in the
index.htmlexample. - Implement getToken: Provide the logic to fetch the token (see our API documentation), which will be used by the SDK to authenticate with THNDR.
What do I see an error popup in my iFrame saying "There was a problem logging in. Please try again later."
This means the AUTH_TOKEN was not valid. You should contact us so we can help you debug your authentication. Please see the authentication docs in our API.