Enrich your websites/apps with APIs; integrate them securely with only a couple of clicks.
Have you ever wanted to connect API resources to your frontend but do not want to go through the hassle of programming a backend?
If you are a developer with an innovative idea that you want to implement quickly and securely but do not need/want to build a server-based backend; you can do that now in just minutes with KOR Connect. In this article I will walk you through how.
In this example we are going to create a website that calculates the exchange rate between two different currencies, and we will use the ‘Currency Exchange’ API from RapidAPI.
We will need to acquire the following items:
- The API key.
- The name of the header where the API key will be received. For example RapidAPI uses the ‘x-rapidapi-key’ to receive the API Key.
- The API URL.
- Your website’s domain to allow the calls.
After getting these necessary items, go to korconnect.io and create your free account.
Press the ‘+ CONNECT API’ button and fill in the required parameters such as the API Key, the Header Name, API URL, and the allowed host names from where the API will be called:
Configure the 'Target API URL' as the domain name where your API is pointing to without any paths (for example: target.api.com). Your connection can be in 'Production Mode' or in 'Testing Mode' where you can test it from your own computer.
You will see your new API connection created.
Next, click on ‘View Details’ to see all of the specifics of your connection. Here you will find the 'Secure Base URL' that you can use to make calls to your API. You will only need to add the header 'x-api-key' with the key provided below, and you will be ready to make requests securely.
The 'Single URL' provides basic protection for your connection, but if you want enhanced security for your API connection, you can implement it by clicking in the button 'Additional Security', and then switching the button that says 'Security Type: Single URL + Additional Security' in the upper right side of the screen.
This option strengthens the security of your connection by adding reCaptcha functionalities. In order for your Frontend to get the additional functionalities, you will need to copy the code provided in the ‘Code Snippets’ below. You can select a snippet for HTML, REACT, VUE and ANGULAR frameworks. For this example we will use the code for HTML.
We will need to exchange the APIs url to the one that KOR provides and append the path as it were the endpoint of the third party API. Now add the required URL params to request the exchange, for example: “ExchangeRates/exchange?from_currency=Param1&to_currency=Param2&q=Param3”. In our case we will send the currencies ISO 4217 codes that we would like to convert.
Deploy your website, and that’s it! You no longer need to develop a backend to keep your API keys secure, just sign in to https://korconnect.io.
If you need a more technical explanation, you can check https://kor-comunity.gitlab.io/kor-connect/.
Top comments (0)