DEV Community: KOR Connect

Quickest Way to Secure API Keys on the Frontend (In Minutes)

KOR Connect — Tue, 07 Dec 2021 17:13:19 +0000

There are often times when we are building websites that leverage the benefits of being delivered on a CDN (security, performance, no backend infrastructure required), but we want more powerful, dynamic functionality. The best way to increase functionality is through APIs; i.e. email contact forms, processing of outside data, or present information like the weather forecast, flight schedules, currency exchange rates, etc. How would we make these API integrations quickly and securely if we do not want to build out a backend or add infrastructure to handle these API calls? Where do we secure the private API keys? What if we don't want user authentication prior to allowing our users to interact with the 3rd party APIs? The answer is KOR Connect, KOR Connect is a middleware platform that allows CDN front ends to secure API Keys in a quick and simple way, while automatically deploying security layers during the API integration process. The bonus is that it is also free to use!

We will talk through an example of integrating a Covid 19 tracker.

Let's create a COVID-19 tracker. In order to do this, we have to pick the API that we want to use. I decided on the COVID-19 Statistics API that uses data from John Hopkins University.

If you already have a KOR Connect account you can sign in here or you can create a new account.
Let’s start by creating an API connection on KOR Connect by clicking on the “+ Connect API” button:

The connection details were all copied directly from RapidAPI. More information regarding the API connection module here.

Done! After making the connection, go to View Details for your new API connection.

Now you will see the Secure API and Public API key, both generated by KOR Connect. You can also adjust your per-user rate limit for your API calls at the top left of the screen (the default is 5 calls per second). In this example, we will be using the Single URL Security Type provided by KOR Connect.

If you want, here is a great video tutorial by Traversy Media walking you through building the site on Vue.js. (Here is the code for his COVID-19 tracker). Note: In the tutorial he uses a public API, we will use KOR Connect to easily integrate the private API into our site.

Now, all you have to do is grab the Secure URL and Public API Key provided by KOR Connect (refer to the image above) and use them to make an API request. Here's an example of the fetch request.

fetch("<YOUR-SECURE-URL>", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "<YOUR-PUBLIC-API-KEY>"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

That’s it, now you are ready to start testing/ using your API integration. KOR Connect automatically sets the Connection Mode to Testing. When you are ready to go to production make sure you remember to switch the Connection Mode to Production, this will activate security and remove localhost from the allowed domains (more information here).

It was as simple as that, now your API integration works without any additional libraries or configurations.

If you're interested in adding even more security through an attestation service, click here for additional instructions.

In case you are interested in what happens automatically on KOR Connect’s end after you make a connection. Bot controls are activated that inspect for miscellaneous bots, security-related bots, calls coming from automated browsers, black listed origins, and user agents that don’t seem to be coming from a browser; these calls are blocked if they don’t pass inspection. Furthermore, KOR Connect validates the access-control-allow-origin header from your allowed origins, as well as provides a per-user rate limiter that can block malicious actors abusing calls without causing any interruptions to other users.

Integrate APIs Without a Backend

KOR Connect — Thu, 02 Dec 2021 11:05:04 +0000

When we build websites and webapps that leverage the benefits of being delivered on the CDN (benefits include security, performance, infinite scaling, no backend infrastructure required) we will often run into limitations when we want more powerful, dynamic functionality. The best way to increase functionality is through the integration of APIs. APIs give our frontends near infinite possibilities; i.e. we can easily connect contact forms, process outside data, store information, or present information like the weather forecast, flight schedules, currency exchange rates etc. One of the key benefits of having our frontend on the CDN is not having to deal with building and maintaining backend infrastructure, but how do we integrate APIs securely and easily without a backend? Where do we secure the private API keys? What if we don't want user authentication prior to allowing our users to interact with a 3rd party API? We will go through the simplest way of connecting APIs with automated security using KOR Connect.

How quickly can this be done and what happens?

The answer is in a few quick minutes if the API you are integrating with has decent documentation, but why would you want to integrate with an API that doesn't anyways? KOR Connect does everything on the backend, and as the user we only have to copy-paste the KOR Connect public endpoint and the header into our code after entering the integrating API information into KOR Connect. Everything else is done on KOR Connect's end.

Here are some of the things that happen automatically on KOR Connects end after you make a connection; bot controls are activated that inspect for, miscellaneous bots, security related bots, calls coming from automated browsers, black listed origins, and user agents that don’t seem to be coming from a browser; these calls are blocked if they don’t pass inspection. Furthermore KOR Connect validates the access-control-allow-origin header from your allowed origins, and provides a per user rate limiter that can block malicious actors abusing calls without causing any interruptions to other users.

Now let’s walk through an example integrating 2 APIs into our frontend; a geolocation API and the Open Weather API.

KOR Connect Backendless Reactjs Application

We will be giving our ReactJS frontend the ability to allow users to enter any address and get the current weather conditions alongside other details such as the wind speed, humidity and temperature. The challenge is that we are going to be using two APIs; one to translate the address into latitude and longitude, and another API to give us the weather conditions for that location. We are providing this multi API integration as an example to show that you can integrate as many APIs as you would like into a single project. You can also quickly and easily integrate just one API as well, by following along.

This web app can be hosted on any CDN or static site service like S3, Gitlab pages, Netlify, etc.

The APIs
Head over to Rapid API and subscribe to Forward & Reverse Geocoding as well as the Open Weather Map. After subscribing you'll be able to see your API Key in the Code Snippets section of each API's endpoint tab. Save that API key as well as the URL.

KOR Connect
If you already have a KOR Connect account you can sign in or you can create a new account.

Now from the KOR Connect dashboard select the Connect API button and fill in the form for a new connection. The only fields you need to change from the following image are the API Key and the allowed domain (choose the domain you'll be hosting your app from). The API key is the one you stored in the previous step. Optionally you can add more domains and change the name of the connection.

Repeat the process for the Weather API connection, see the following image for more details.

With your connections created you are now able to enter each connection via View Details to retrieve each secure URL and header that you'll need to include in your code.

You can modify the per user rate limit for your API calls at the top left of the screen. The Default is 5 calls per second. This rate limiter controls the number of calls per second, per user; so if a malicious user is attempting to increase your costs or crash your API connection that user will be blocked without causing any interference with other users. More information regarding the rate limiter here.

The Secure URL that is generated acts similar to the API base URL, and the header is using a KOR Connect generated public API key, with these two ready, you are now able to test and use your connection. Notice the Connection Mode on the top right, you are currently on Testing which means you can access KOR Connect through localhost but once you switch to production this is blocked, read more about it in the Testing and Production Modes documentation.

There is no configuration, library or import required to use KOR Connect's Single URI feature so we can jump straight to the API calls.

Here's the geolocation Axios request example where you can replace < SECURE-URL > with your secure base URL generated by KOR Connect and add the parameters you would like to have. Furthermore you can replace < PUBLIC-API-KEY > with the KOR Connect provided public API key. Here is our code you can take a look at:

const fwdGeoLocation = (loc) => {  
    let location = [];
    let options = {
      method: 'GET',
      url:<SECURE-URL>,
      params: {q: loc, 'accept-language': 'en', polygon_threshold: '0.0'},
      headers: {      
        'x-api-key': '<PUBLIC-API-KEY>'
      }
    };  
    axios.request(options).then(function (response) {      
      location = [response.data[0].lat, response.data[0].lon];      
      getWeather(location[0], location[1])
    }).catch(function (error) {
      console.error(error);
    });
  }

Here is the weather API Axios request example, following the same format as above.

const getWeather = (lat, lon) => {
    let options = {
      method: 'GET',
      url: '<SECURE-URL>',
      params: {lon: lon, lat: lat},
      headers: {        
        'x-api-key': '<PUBLIC-API-KEY>'
      }
    };

    axios.request(options).then(function (response) {      
      setWeather(response.data.data[0]);
    }).catch(function (error) {
      console.error(error);
    });
  }

When the Geolocation API responds successful, it stores the result in state triggering React to render the weather information that is received. If you are interested in reviewing this implementation refer to this section of the code.

Done! You should now have your API Keys secured and integration working.

Note: One thing that you might have noticed is that we're posting the URL and API key for the world to see but this is one of the advantages of KOR Connect. The KOR Connect generated API Keys are public keys and not the Open Weather or Geolocation API Keys, and the same holds true for the URL, both values are delivered by KOR to secure and obscure the actual information you want to protect. For maintainability of your code, you might want to store KOR Connect's API key and secure URL into a .env file or as env variables depending on where you're hosting it.

Conclusion
Using KOR Connect saves a considerable amount of resources, both time and money. For an approach requiring a server, you would need to provision the infra, harden the server, add observability, keep it up to date and so on. It’s a real pain in the neck but it’s not the only option. The serverless approach is a smoother alternative, less expensive if the functions are not constantly active and easier to manage, the caveats are having to learn the vendor's serverless implementation and maintaining the runtime. With KOR Connect you can release your application once your front end is ready to go.

Best ways to Connect APIs on the frontend

KOR Connect — Thu, 14 Oct 2021 17:03:59 +0000

There are often times when we are building websites that leverage the benefits of being delivered on a CDN (security, performance, no backend infrastructure required), but we want more powerful, dynamic functionality. The best way to increase functionality is through APIs; i.e. email contact forms, processing of outside data, or present information like the weather forecast, flight schedules, currency exchange rates etc. How would we make these API integrations quickly and securely if we do not want to build out a backend or add infrastructure to handle these API calls? Where do we secure the private API keys? What if we don't want user authentication prior to allowing our users to interact with the 3rd party APIs? We will go over the best ways of executing these API integrations. Then we will provide links to some projects that walk you through how this is done via KOR Connect.

Ways of integrating 3rd party APIs without backend infrastructure:

Serverless Functions as a backend proxy (AWS Lambda):

It is often recommended to use serverless functions to hide API keys for client side applications. Then the client can use this serverless function as a proxy to call the API through a new endpoint. The developer should also incorporate CORS to identify the header origin so that only the allowed domains are calling the proxy (to prevent unwanted calls to the proxy url from anywhere). This may seem secure but CORS only verifies browser calls and can be easily spoofed or can be called from outside of the browser. A malicious actor can still run up costs with a bot and have the endpoint shut down. Further issues with this technique can arise around provisioning AWS services to support the lambda functions like API gateways, roles, and permissions between cloud services, this can be very time consuming if you are not familiar with the cloud provider.

Netlify Functions (built on AWS Lambda):

Netlify Functions is a wrapper around AWS Lambdas, the main advantage to using this approach over the AWS provisioned proxy is an improved user experience and Netlify helps streamline the deployment for you. Netlify Functions remove the tasks associated with setting up an AWS account and other AWS services required to correctly integrate the API. Similar security issues persist with Netlify Functions as they do with setting up your own AWS provisioned proxy. Even with CORS setup the new Netlify endpoint can be called in unwanted ways and by unwanted agents. This leaves your API susceptible to being shut down, or having costs run up. Furthermore if you are not familiar with writing functions this could present an additional learning curve.

KOR Connect:

KOR Connect is a new way for client-side web apps to integrate APIs. KOR Connect is the quickest way to secure API Keys and connect 3rd party APIs because you do not need to build infrastructure (AWS/ other cloud providers), or code functions (AWS and Netlify Functions). KOR Connect also uses AWS Lambda to secure API keys but the similarities between KOR Connect and the other options end there. The API key is secured on KOR Connect through a one click integration, then a public URL and header are generated by KOR Connect that is copy- pasted into the frontend code. This third party API integration process takes less than a minute for the developer to complete and automatically comes with a number of security features. These features include bot control which inspects for: miscellaneous bots, security related bots, calls coming from automated browsers, black listed origins, and user agents that don’t seem to be coming from a browser, and blocks these calls if they don’t pass inspection. As well as validates the access-control-allow-origin header from the developer’s allowed origins, and provides a per user rate limiter that can block malicious actors abusing calls without causing any interruptions to other users.

If the developer wants even more security after this simple single URL integration is completed KOR Connect offers a more robust origin validation and an attestation layer provided by Google’s Recaptcha. Depending on the framework that the developer is working with (e.g. Reactjs, Vue, Angular etc) the corresponding snippets of code that KOR Connect provides will need to be placed into the code of the project.

KOR Connect prevents endpoint calls from malicious actors with and without the browser, secures API keys, and blocks bot attacks. The public URL that is used in the code does not need to be hidden so this frees the developer from having to worry about API secrets ending up in the git repository, API secrets being exposed on the client, having to manually create wrappers around lambda functions, and worrying about unwanted endpoint calls being made. The current feature set offered by KOR Connect is the best option for client-side web apps that want dynamic functionality but may not necessarily want user authentication. (Bonus it’s also free)

Here are some tutorial links walking you through API integrations with KOR Connect:

Try them out!

Music Downloader API Integrated on the Frontend

Quickest way to Secure API Keys on the Frontend- Building a Vue.js Covid tracker.

Connecting a gif API on ReactJS without a backend

Realtime Currency Exchange API Integration - HTML

Music Downloader API Secured on the Frontend

Clemenshemmerling — Mon, 11 Oct 2021 19:37:24 +0000

This YouTube music download API integration is done on the client side without a backend (I did not want to deal with backend infrastructure to hide the API key). I used KOR Connect as the middleware platform (free) to quickly and easily integrate the API in a secure way. Firstly I will go over why I chose this route.

We all know that API keys and connections can not be secured on the client side of an application. Hard coding API keys on the frontend is a quick and surefire way to have your API connection shutdown, API keys stolen, and have your API provider’s bill skyrocket. So what options are there if you do not want to maintain back end infrastructure? I will explore the recommended techniques for integrating 3rd party APIs into client side applications without having to build a backend. Then I will walk you through a step by step example of integrating YouTube’s private API to download music for free using KOR Connect.

Ways of integrating 3rd party APIs without backend infrastructure:

Serverless Functions as a backend proxy (AWS Lambda):

Netlify Functions (built on AWS Lambda):

KOR Connect:

KOR Connect is a new way for client-side web apps to integrate APIs. KOR Connect is the quickest way to secure API Keys and connect 3rd party APIs because you do not need to build infrastructure (AWS/ other cloud providers), or code functions (AWS and Netlify Functions). KOR Connect also uses AWS Lambda to secure API keys but the similarities between KOR Connect and the other options end there. The API key is secured on KOR Connect through a one click integration then a snippet containing a new public URL is copy-pasted into the developer’s code. This snippet that is placed into the frontend code contains Google’s Recaptcha V3 which is used as an attestation layer to confirm the origin of the endpoint call as well as block unwanted bot traffic. KOR Connect also has additional layers of security to further protect the API traffic from man-in-the-middle attacks. KOR Connect prevents endpoint calls from malicious actors with and without the browser, secures API keys, and blocks bot attacks. The public URL that is used in the code does not need to be hidden so this frees the developer from having to worry about API secrets ending up in the git repository, API secrets being exposed on the client, having to manually create wrappers around lambda functions, and worrying about unwanted endpoint calls being made. The current feature set KOR Connect is the best option for client-side web apps that want dynamic functionality but may not necessarily want user authentication. (Bonus it’s also free)

Now let’s walk through integrating YouTube’s music download API using KOR Connect and React.js!

Let’s start with the API we want to use which is this YouTube Mp3 API.

If you already have a KOR Connect account you can sign in here or you can create a new account.

Let’s start by creating an API connection on KOR Connect by clicking on the “+ Connect API” button.

This will take us to connection details. The credentials needed here are copied directly from RapidAPI (or the API's documentation). More information regarding the API connection module here.

Once we have our API connection created we enter that connection by selecting view details.

If you would like, you can test your connection with Postman or another API testing tool.

Now you just have to copy the Single URL endpoint.

And don't forget to copy the Header for your call.

Now we will copy the Single URL and Headers into our frontend.

  const handleCreateLink = async () => {
    setLoader(true);
    setInfo(null);

    let code;

    if (URL.includes("youtube.com")) {
      code = URL.replace("https://www.youtube.com/watch?v=", "");
    }

    if (URL.includes("youtu.be")) {
      code = URL.replace("https://youtu.be/", "");
    }

    /* We'll need this constant to make request */
    const timestamp = new Date().toUTCString();
    // You need to append the path of the endpoint you are calling to the KOR Connect base URI
    axios
      .get(`${process.env.REACT_APP_API_URL}/youtube-download/dl?id=${code}`, {
        headers: {
          /* Place your headers here: */
          timestamp,
          "x-api-key": process.env.REACT_APP_API_KEY,
        },
      })
      .then((response) => {
        setInfo(response.data);
        setLoader(false);
        setURL("");
      })
      .catch((error) => {
        console.log(error);
      });
  };

Once we are ready to deploy the project to production we have to change the Connection Mode from Test Mode to Production Mode, this will turn on additional security.

Here is some additional information pertaining to Testing and Production Modes on KOR Connect.

Note: If you are going to use the provided code from the project in the repo, remember that some of the values need to be modified to comply with the security layers for KOR Connect and your particular project (Connection URL, and usage token). The following image show the values that need to be changed.

Done! Now your application is ready to download music from YouTube, for free, and without ads. Try mine out here

Additional Security

Let’s take a look at how KOR Connect provides an additional layer of security. Follow along if you would like to implement Recaptcha as an attestation layer amongst other security features.

You will have to navigate to the Additional Security section within the View Details of your API connection.

Then you will have to turn on Additional Security. When Additional Security is turned on, the Security Type should read Single URL + Additional Security.

Now, scroll down to the snippets section and you will add the corresponding snippets of code to your project, in this case we are using ReactJS.

Take a look at the following snippet:
You will need to install some dependecies.

npm install --save react-google-recaptcha-v3 axios

Add the following script to your index.js project:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  GoogleReCaptchaProvider,
} from 'react-google-recaptcha-v3';

ReactDOM.render(
  <GoogleReCaptchaProvider reCaptchaKey={process.env.REACT_APP_RECAPTCHA_KEY}>
    <App />
  </GoogleReCaptchaProvider>,
  document.getElementById('root')
);

And then add the following script to your App.js project:

function App() {
  const [URL, setURL] = useState("");
  const [info, setInfo] = useState(null);
  const [loader, setLoader] = useState(false);

  // This constant is required for ReCaptcha, which is used by KOR Connect
  const { executeRecaptcha } = useGoogleReCaptcha();

  const handleCreateLink = async () => {
    setLoader(true);
    setInfo(null);

    let code;

    if (URL.includes("youtube.com")) {
      code = URL.replace("https://www.youtube.com/watch?v=", "");
    }

    if (URL.includes("youtu.be")) {
      code = URL.replace("https://youtu.be/", "");
    }

    /* We'll need this constant to make request */
    const token = await executeRecaptcha("submit");
    const timestamp = new Date().toUTCString();
    // You need to append the path of the endpoint you are calling to the KOR Connect base URI
    axios
      .get(`${process.env.REACT_APP_API_URL}/youtube-download/dl?id=${code}`, {
        headers: {
          /* Place your headers here: */
          token,
          timestamp,
          "x-api-key": process.env.REACT_APP_API_KEY,
        },
      })
      .then((response) => {
        setInfo(response.data);
        setLoader(false);
        setURL("");
      })
      .catch((error) => {
        console.log(error);
      });
  };

Now, all of the API calls are made to the public URL that KOR Connect provides. KOR Connect will act as a proxy to authenticate as well as send the API information. Furthermore, thanks to reCaptcha V3 (which is implemented automatically) and additional layers of security, several malicious attack vectors are blocked which enhances KOR Connects security.

Note: If you need more information, click here to go to the repo.

Quick way to Secure API Keys for the Frontend

Jose Torres — Wed, 29 Sep 2021 20:26:50 +0000

We all know that API keys and connections can not be secured on the client side of an application. Hard coding API keys on the frontend is a quick and surefire way to have your API connection shutdown, API keys stolen, and have your API provider’s bill skyrocket. So what options are there if you do not want to maintain back end infrastructure? We will explore the recommended techniques for integrating 3rd party APIs into client side applications without having to build a backend. Then we will walk you through a step by step example of integrating a private API to create a Covid 19 tracker using KOR Connect.

Ways of integrating 3rd party APIs without backend infrastructure:

Serverless Functions as a backend proxy (AWS Lambda):

Netlify Functions (built on AWS Lambda):

KOR Connect:

KOR Connect is a new way for client-side web apps to integrate APIs. KOR Connect is the quickest way to secure API Keys and connect 3rd party APIs because you do not need to build infrastructure (AWS/ other cloud providers), or code functions (AWS and Netlify Functions). KOR Connect also uses AWS Lambda to secure API keys but the similarities between KOR Connect and the other options end there. The API key is secured on KOR Connect through a one click integration then a snippet containing a new public URL is copy-pasted into the developer’s code. This snippet that is placed into the frontend code contains Google’s Recaptcha V3 which is used as an attestation layer to confirm the origin of the endpoint call as well as block unwanted bot traffic. KOR Connect also has additional layers of security to further protect the API traffic from man-in-the-middle attacks. KOR Connect prevents endpoint calls from malicious actors with and without the browser, secures API keys, and blocks bot attacks. The public URL that is used in the code does not need to be hidden so this frees the developer from having to worry about API secrets ending up in the git repository, API secrets being exposed on the client, having to manually create wrappers around lambda functions, and worrying about unwanted endpoint calls being made. The current feature set KOR Connect is the best option for client-side web apps that want dynamic functionality but may not necessarily want user authentication. (Bonus it’s also free)

Now let's walk through an example using KOR Connect and Vue.js!

Lets create a COVID-19 tracker. In order to do this we have to pick the API that we want to use. I decided on the COVID-19 Statistics API that uses data from John Hopkins University.

If you already have a KOR Connect account you can sign in here or you can create a new account.

Let’s start by creating an API connection on KOR Connect by clicking on the “+ Connect API” button:

The connection details were all copied directly from RapidAPI. More information regarding the API connection module here.

Done! After making the connection, go to View Details for your new API connection.

If you want, here is a great video tutorial by Traversy Media walking you through building the site on Vue.js. (Here is the code for his COVID-19 tracker).
Note: In the tutorial he uses a public API, we will use KOR Connect to easily integrate the private API into our site.

Now, all you need to do is grab the Secure URL and Public API Key provided by KOR Connect and use them to make an API request. Here's an example of the fetch request.

fetch("<YOUR-SECURE-URL>", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "<YOUR-PUBLIC-API-KEY>"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

It was as simple as that, now your API integration works without any additional libraries or configurations.

If you're interested in adding even more security through an attestation service keep reading.

Additional Security

Let’s take a look at how KOR Connect provides an additional layer of security. Follow along if you would like to implement Recaptcha as an attestation layer amongst other security features.

You will have to navigate to the Additional Security section within the View Details of your API connection.

Then you will have to turn on Additional Security. When Additional Security is turned on, the Security Type should read Single URL + Additional Security.

Now, scroll down to the snippets section and depending on what framework you are using for your project, you will add the corresponding snippets of code to your project. We will be walking though this Covid19 tracker API integration using VueJS.

Take a look at the following snippet:

This is how to integrated the snippet into your project:

Note: the KOR Connect URL is modified with the paths I received from RapidAPI. For example, to get the total Covid cases I need to add this to my base URL:

All the paths available in the API you are using can be appended to the KOR Connect base URL (secure URL).

With permission, this blog references this Covid 19 tracker blog post made by Rodrigo.

Here are a few for more cool project tutorials using KOR Connect:

Connecting the YouTube API to download music without a backend on Angular

Setting up a Gif generator API with on Reactjs

Integrating a real time currency exchange rate calculator API - HTML

Integrate APIs with your HTML Site without a Backend.

rodrigomohr — Fri, 17 Sep 2021 21:40:25 +0000

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/.

Secure API Keys on the Frontend - Vue JS

Rodrigo — Fri, 17 Sep 2021 04:08:27 +0000

Why are we going to use KOR Connect?

APIs keys / secrets have been traditionally stored in an application’s backend but this requires control of your own server as well as specialized infrastructure knowledge to set up properly. On CDN hosted, or serverless client side applications it is often not possible to gain access to the server that is hosting the project. If the developer hardcodes the API keys to their frontend anyone is able to access the keys and steal them. When API keys are stolen the malicious agent is able to do whatever they want with the APIs. This could rack up costs for the developer, use all of the allowed calls, or if the APIs are used against the TOS the dev’s credentials may be revoked. The other route that is often suggested to hide API keys for client side applications is to set up serverless functions to store the API keys and act as a proxy for the frontend. The developer could also use CORS to identify the header origin to make sure that only the allowed domains are calling the proxy (so that not anyone is able to call the proxy url from anywhere). This may seem secure but CORS only verifies browser calls and can be easily spoofed or can be called from outside of the browser. A malicious agent could easily run up costs with a bot or have the endpoint shut down as well. KOR Connect has a system that automatically protects against these vulnerabilities as well as allows the developer to integrate any API in the simplest and quickest possible way.

Now let me walk you through an example!

I have wanted to create a COVID-19 tracker for sometime; I wanted to create the app in a way where I consume an API but without a backend. In order to do this, I had a couple of options.The approach that initially came to mind was to use public APIs on a static site, but during my planning phase I came across https://rapidapi.com. Here I found an array of different options for Covid data APIs, the caveat was that the APIs required authentication.

I could have spun up a small backend and dealt with authentication there but a simple COVID-19 tracker webapp didn’t warrant such efforts.

In the end I ended up using https://korconnect.io/, a connection middleware that allows you to connect APIs without a backend. This is how I did it:

I created an account on https://korconnect.io/
Also created an account on https://rapidapi.com/

First, I needed to choose an API to consume. I decided on this one which uses Johns Hopkins public data:

I started by creating an API connection on KOR Connect by clicking on the “+ Connect API” button:

I added the connection details, all of this information was copied directly from RapidAPI. More information about that here: https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html

Done! After making the connection I went to the code snippets to see how I would consume the API in my frontend. In my case I wanted to use VueJS to create my tracker so I went to the VueJS snippets section and retrieved the information I needed for the framework.

Ok, all good! Now, the tricky part…making the site. I don’t have much experience coding on React or Vue but I found a great video tutorial that walked me through building a COVID-19 tracker.

Check this excellent tutorial by Traversy Media: https://www.youtube.com/watch?v=m-MAIpnH9ag (Here is the code for his COVID-19 tracker https://github.com/bradtraversy/vue-c...).

One thing of note, in that tutorial he uses a public API. So I had to figure out how to use the Kor Connect snippet in my code. Thankfully, it was very easy!

First, let’s take a look at how Kor Connect provides the snippet:

This is how I integrated it into my project:

Something to note is how I modified the KOR Connect URL with the paths I received from RapidAPI. For example, to get the summary report I needed to add this to the end of my URL:

/reports/total

Pay attention to the paths that your API provider gives you and put them at the end of your KOR Connect URL.

Now, all the calls can be made to the link that KOR Connect provides, KOR Connect will act as a proxy to authenticate as well as send back the API information. Furthermore, thanks to reCaptcha enterprise’s (which is implemented automatically) layers of security several malicious attack vectors are blocked, this enhances KOR Connects security.

What does the final project look like?

Best of all, for this quick and safe API consumption I don’t need to expose my API token to the public nor do I have to spin up a backend.

Connecting a gif API on ReactJS without a backend

Clemenshemmerling — Fri, 17 Sep 2021 02:14:42 +0000

The simplest way to connect an API to a frontend with best practices applied automatically.

We will create a gif search engine using KOR Connect.

Prior to starting you will need to connect your API to KOR Connect, please do so following this documentation: https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html

If you would like, you can test your connection with Postman or another API testing tool.

After making the API connection above, create a React project using this command.

npx create-react-app giphy

Once the React project is created go to korconnect.io and click on “View Details.”

Inside View Details select the “Snippets” tab and then choose React. Install the dependencies shown in the snippet. Dependencies must be installed inside the project folder

npm install — save react-google-recaptcha-v3 axios

After installing the necessary dependencies import the libraries in the snippet, also replace the provider with the one shown by the snippet.

The index.js should look like this.

import React from 'react';  
import ReactDOM from 'react-dom';  
import './index.css';  
import App from './App';  
import reportWebVitals from './reportWebVitals';  
import {  
  GoogleReCaptchaProvider,  
} from 'react-google-recaptcha-v3';ReactDOM.render(  
  <GoogleReCaptchaProvider reCaptchaKey="yourSnippetKey">  
    <App />  
  </GoogleReCaptchaProvider>,  
  document.getElementById('root')  
);  
// If you want to start measuring performance in your app, pass a function  
// to log results (for example: reportWebVitals(console.log))  
// or send to an analytics endpoint. Learn more: [https://bit.ly/CRA-vitals](https://bit.ly/CRA-vitals)  
reportWebVitals();

Now go to the App.js file and replace it with the snippet, it should look like this.

import React, { useEffect }  from 'react';  
import axios from 'axios';  
import {  
  useGoogleReCaptcha  
} from 'react-google-recaptcha-v3';const App = () => {  
  const { executeRecaptcha } = useGoogleReCaptcha();// Create an event handler so you can call the verification on button click event or form submit  
  const handleGet = async () => {  
    if (!executeRecaptcha) {  
      console.log('Execute recaptcha not yet available');  
    }const token = await executeRecaptcha('submit');  
    // Do whatever you want with the token  
    console.log(token);  
    axios.get('[https://yourSnippetURL/'](https://yourSnippetURL/'), { headers: { token, 'x-api-key': 'yourSnippetToken' } })  
    .then(response => {  
      console.log(response)  
    })  
    .catch(error => {  
      console.log(error)  
    })  
  };// You can use useEffect to trigger the verification as soon as the component being loaded  
  useEffect(() => {  
    if (executeRecaptcha) {  
      handleGet();  
    }}, \[executeRecaptcha\]);useEffect(() => {  
    const el = document.querySelector('.grecaptcha-badge');  
    el.style.display = 'none';  
  }, \[\]);return (  
    <>  
    <h1>Hello World</h1>  
    </>  
  );  
};export default App;

Now modify the code to adapt it to the application, to do this install a style library (we will use https://material-ui.com/).

npm install @material-ui/core

In App.js import the following elements and useState.

import React, { useEffect, useState } from "react";  
import Grid from "[@material](http://twitter.com/material)\-ui/core/Grid";  
import TextField from "[@material](http://twitter.com/material)\-ui/core/TextField";

Now add two constants to save the API data, the code should look like this.

const \[data, setData\] = useState(null);  
const { executeRecaptcha } = useGoogleReCaptcha();  
const \[headerInfo, setHeaderInfo\] = useState("");

Now create a function to allow users to search for any gif, add the necessary path in order to carry out this search feature. The code should look like this.

const handleSearch = async (event) => {  
    const token = await executeRecaptcha("submit");  
    axios  
      .get(  
        \`[https://yourSnippetURL/v1/channels/search?q=${event.target.value}\`](https://yourSnippetURL/v1/channels/search?q=${event.target.value}`),  
        {  
          headers: {  
            token,  
            "x-api-key": "yourSnippetToken",  
          },  
        }  
      )  
      .then((response) => {  
        setData(response.data.data);  
      })  
      .catch((error) => {  
        console.log(error);  
      });  
  };

Now we will modify the handleGet function to be able to store the response in a constant, the code should look like this.

const handleGet = async () => {  
    if (!executeRecaptcha) {  
      console.log("Execute recaptcha not yet available");  
    }const token = await executeRecaptcha("submit");  
    // Do whatever you want with the token  
    console.log(token);  
    axios  
      .get("[https://](https://clemensk.korconnect.io/GIPHY/v1/gifs/random)[yourSnippetURL](https://yourSnippetURL/v1/channels/search?q=${event.target.value}`)[/v1/gifs/random](https://clemensk.korconnect.io/GIPHY/v1/gifs/random)", {  
        headers: {  
          token,  
          "x-api-key": "yourSnippetKey",  
        },  
      })  
      .then((response) => {  
        setHeaderInfo(response.data.data);  
      })  
      .catch((error) => {  
        console.log(error);  
      });  
  };

Finally, we will add an input to do the searches and we will also add a map to display our result, the App.js should look like this.

import React, { useEffect, useState } from "react";  
import axios from "axios";  
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";  
import Grid from "[@material](http://twitter.com/material)\-ui/core/Grid";  
import TextField from "[@material](http://twitter.com/material)\-ui/core/TextField";const App = () => {  
  const \[data, setData\] = useState(null);  
  const { executeRecaptcha } = useGoogleReCaptcha();  
  const \[headerInfo, setHeaderInfo\] = useState("");const handleSearch = async (event) => {  
    const token = await executeRecaptcha("submit");  
    axios  
      .get(  
        \`[https://clemensk.korconnect.io/GIPHY/v1/channels/search?q=${event.target.value}\`](https://clemensk.korconnect.io/GIPHY/v1/channels/search?q=${event.target.value}`),  
        {  
          headers: {  
            token,  
            "x-api-key": "2y91wVZrme9mN93HMeGBv5wH9JoxVm8m5Mv61BQN",  
          },  
        }  
      )  
      .then((response) => {  
        setData(response.data.data);  
      })  
      .catch((error) => {  
        console.log(error);  
      });  
  };// Create an event handler so you can call the verification on button click event or form submit  
  const handleGet = async () => {  
    if (!executeRecaptcha) {  
      console.log("Execute recaptcha not yet available");  
    }const token = await executeRecaptcha("submit");  
    // Do whatever you want with the token  
    console.log(token);  
    axios  
      .get("[https://clemensk.korconnect.io/GIPHY/v1/gifs/random](https://clemensk.korconnect.io/GIPHY/v1/gifs/random)", {  
        headers: {  
          token,  
          "x-api-key": "2y91wVZrme9mN93HMeGBv5wH9JoxVm8m5Mv61BQN",  
        },  
      })  
      .then((response) => {  
        setHeaderInfo(response.data.data);  
      })  
      .catch((error) => {  
        console.log(error);  
      });  
  };// You can use useEffect to trigger the verification as soon as the component being loaded  
  useEffect(() => {  
    if (executeRecaptcha) {  
      handleGet();  
    }  
  }, \[executeRecaptcha\]);return (  
    <>  
      <Grid xs={12}>  
        <h1 className="center-align">Gif Explorer</h1>  
      </Grid>  
      <Grid  
        xs={12}  
        container  
        direction="row"  
        justifyContent="center"  
        alignItems="center"  
      >  
        <img src={headerInfo.image\_url} alt="logo" />  
      </Grid>  
      <Grid xs={12}>  
        <TextField  
          id="standard-basic"  
          label="Search"  
          fullWidth  
          onChange={(e) => handleSearch(e)}  
        />  
      </Grid>  
      {data && data.map(  
        (gif) =>  
          gif.banner\_image && (  
            <Grid  
              xs={12}  
              md={3}  
              key={data.id}  
              container="row"  
              justifyContent="center"  
              alignItems="center"  
            >  
              <img src={gif.banner\_image} alt="image" />  
            </Grid>  
          )  
      )}  
    </>  
  );  
};export default App;

Once we are ready to deploy the project to production we have to change the Connection Mode from Test Mode to Production Mode, this will turn on additional security.

Here is some additional information pertaining to Testing and Production Modes on KOR Connect.

The gif finding app should be ready! KOR Connect is taking care of all the actions required behind the scenes.

Integrating YouTube’s API on Angular to download music without a backend.

Clemenshemmerling — Fri, 17 Sep 2021 00:31:32 +0000

We will create a web app to download music from YouTube using KOR Connect.

The first thing we will have to do is create a connection between KOR Connect and the YouTube API.

The YouTube API can be found here https://rapidapi.com/ytjar/api/youtube-mp36/-lex.europa.eu

Create a KOR Connect account here if you don’t already have one https://korconnect.io

To create this connection we will follow the steps in this link:

https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html

If you would like, you can test your connection with Postman or another API testing tool.

Now we will create our project in Angular, for this, we will use the following command.

ng new youtube-to-mp3

Now we will install a library to give styles to our app, for this we will use the command:

ng add @angular/material

Here is the link to the documentation of how we integrated the library in the project

https://material.angular.io/

Finally, we will create our home component, for this, we will use the following command:

ng generate component home

Once our Angular project is created we will go to KOR Connect and navigate into the YouTube API connection, then select “View Details.”

Then click the “Snippets” tab and select the angular snippet.

Inside this snippet, it will ask us to install some libraries. After we install the libraries we will configure our project as indicated by the snippet.

Once everything is configured we will now modify the code to adapt it to the functionality of our Angular app.

The first thing we must do is change the name of the requestApi to createLink, we will add some variables to save the API response in the home.component.ts file, our code should look like this:

import { Component, OnInit } from '[@angular/core](http://twitter.com/angular/core)';  
import { ReCaptchaV3Service } from 'ngx-captcha';  
import { HttpClient } from '[@angular/common](http://twitter.com/angular/common)/http';[@Component](http://twitter.com/Component)({  
  selector: 'app-home',  
  templateUrl: './home.component.html',  
  styleUrls: \['./home.component.scss'\],  
})  
export class HomeComponent implements OnInit {  
  siteKey: string = 'yourSnippetSiteKey';  
  URL: string = '';  
  loader: boolean = false;  
  info: any = null;constructor(  
    private reCaptchaV3Service: ReCaptchaV3Service,  
    private http: HttpClient  
  ) {}ngOnInit(): void {}createLink() {  
    this.loader = true;  
    this.info = null;  
    this.reCaptchaV3Service.execute(this.siteKey, 'homepage', (token) => {  
      const headers = {  
        token,  
        'x-api-key': 'yourSnippetXAPIKey',  
      };let code;if (this.URL.includes('youtube.com')) {  
        code = this.URL.replace('[https://www.youtube.com/watch?v='](https://www.youtube.com/watch?v='), '');  
      }if (this.URL.includes('youtu.be')) {  
        code = this.URL.replace('[https://youtu.be/'](https://youtu.be/'), '');  
      }this.http  
        .get(  
          \`[https://yourSnippetURL/dl?id=${code}\`](https://clemensk.korconnect.io/youtube-music/dl?id=${code}`),  
          { headers }  
        )  
        .subscribe((response) => {  
          this.info = response;  
          this.loader = false;  
          this.URL = '';  
        });  
    });  
  }  
}

Now we will add our UI interface to app.component.html, the code should look like this:

<mat-card>  
  <form class="example-form">  
    <mat-form-field class="example-full-width" appearance="fill">  
      <mat-label>PASTE THE YOUTUBE LINK HERE</mat-label>  
      <input matInput placeholder="URL" name="URL" \[(ngModel)\]="URL" />  
    </mat-form-field>  
  </form>  
  <div class="example-button-container">  
    <button mat-fab color="primary" (click)="createLink()">  
      <mat-icon>library\_music</mat-icon>  
    </button>  
  </div>  
</mat-card>  
<div class="container">  
  <div class="middle" \*ngIf="loader">  
    <div class="bar bar1"></div>  
    <div class="bar bar2"></div>  
    <div class="bar bar3"></div>  
    <div class="bar bar4"></div>  
    <div class="bar bar5"></div>  
    <div class="bar bar6"></div>  
    <div class="bar bar7"></div>  
    <div class="bar bar8"></div>  
  </div>  
  <div class="info" \*ngIf="info">  
    <h4>{{info.title}}</h4>  
    <a mat-raised-button href="{{info.link}}" color="warn">  
      Download  
      <mat-icon>file\_download</mat-icon>  
    </a>  
  </div>  
</div>

Finally, we will add the necessary styles inside the home.component.scss file, the code should look like this:

mat-form-field {  
  width: 100%;  
}.info.ng-star-inserted {  
    margin: 25% 0;  
    text-align: center;  
}body {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  background: #000;  
}.middle {  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  position: absolute;  
}.bar {  
  width: 10px;  
  height: 70px;  
  background: #fff;  
  display: inline-block;  
  transform-origin: bottom center;  
  border-top-right-radius: 20px;  
  border-top-left-radius: 20px;  
  /\*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); \*/  
  animation: loader 1.2s linear infinite;  
}.bar1 {  
  animation-delay: 0.1s;  
}.bar2 {  
  animation-delay: 0.2s;  
}.bar3 {  
  animation-delay: 0.3s;  
}.bar4 {  
  animation-delay: 0.4s;  
}.bar5 {  
  animation-delay: 0.5s;  
}.bar6 {  
  animation-delay: 0.6s;  
}.bar7 {  
  animation-delay: 0.7s;  
}.bar8 {  
  animation-delay: 0.8s;  
}[@keyframes](http://twitter.com/keyframes) loader {  
  0% {  
    transform: scaleY(0.1);  
  }50% {  
    transform: scaleY(1);  
    background: yellowgreen;  
  }100% {  
    transform: scaleY(0.1);  
    background: transparent;  
  }  
}

Once we are ready to deploy the project to production we have to change the Connection Mode from Test Mode to Production Mode, this will turn on additional security.

Here is some additional information pertaining to Testing and Production Modes on KOR Connect.

We have our app to download music from YouTube using KOR Connect.

https://youtube-to-mp3.kor-test.com