Get Started: Integrating Into Code

Security Types


Single URL Security Type

The Single URL Security Type is the simplest way to integrate your 3rd party API. When creating a new connection the Single URL Security Type is enabled by default, this allows you to restrict requests to allowed domains, set per user rate limiting (based on the user's IP), and automatically block unwanted bot traffic. Adding the public KOR Connect key into your header and the base URL for the API calls to your code are the only actions you need to take to integrate the 3rd party API into your project.

Select the view details button from the All Connections screen (Prerequisites here).

view details

View details show us important information such as the new endpoint for our connection, this URL is the new endpoint that substitutes the base URL of the API you are connecting to.

find endpoint

Remember to add the routes and parameters provided by the documentation of your connecting API to the new base URL endpoint.

Example:

rapid api

https://clemensd.kor-test.com/youtube-donwload/dl?id=UxxajLWwzqY

In the Single URL section, you will also find a header with a public KOR Connect key that you must include in your API calls.

x-api-key

You can see some examples of this implementation below as well as here.

More Examples of the Single URL Implementation.

JavaScript - fetch

var myHeaders = new Headers();
myHeaders.append("x-api-key", "As54RURdUca6fJosnn9OYaeud1veOvI9768YLema");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("https://clemensd.kor-test.com/youtube-donwload/dl?id=UxxajLWwzqY", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

JavaScript - Axios

var axios = require('axios');

var config = {
  method: 'get',
  url: 'https://clemensd.kor-test.com/youtube-donwload/dl?id=UxxajLWwzqY',
  headers: { 
    'x-api-key': 'As54RURdUca6fJosnn9OYaeud1veOvI9768YLema'
  }
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

CURL

curl --location --request GET 'https://clemensd.kor-test.com/youtube-donwload/dl?id=UxxajLWwzqY' \
--header 'x-api-key: As54RURdUca6fJosnn9OYaeud1veOvI9768YLema'

Additional Security Type

The Additional Security Type offers more security on top of the Single URL Security Type. The Additional Security activates an attestation layer delivered via Recaptcha and a more robust origin validation process that is added to the Single URL Security.

To activate this mode you must click on view details.

view details

Then go to the additional security section and switch on Additional Security.

security tab

For your connection to work correctly with the Additional security you must integrate the snippets below, into your project. For example code you can click here.

frameworks

Remember that you can always activate or deactivate additional security.

The first thing you should do is select the framework that you will use in your front end. You can choose between HTML, React, Angular, or Vuejs.

select framework


If you are using HTML you only need to copy the snippet and paste it into your index.html file.

HTML snippet


If you are using React please follow these steps:

1. Install the necessary dependencies

react dependencies

2. Copy the second snippet inside your index.js file, here you should import the library that you installed and add the provider.

react provider

3. Copy the third snippet into the App.js file, here you must import the necessary library and add the function to make the requests. This step can be done in your App.js file or in the component file where you want to make the requests.

react App.js


If you are using Vue please follow these steps:

1. Install the necessary dependencies.

vue dependencies

2. Copy the second snippet into your main.js file, here you should import the library that you installed and enter the site key that gives you the snippet.

vue main

3. Copy the third snippet inside your App.vue here you should add a button to execute your request and add the function to call your request. This step can be done in your App.vue file or in the component file where you want to make requests.

vue component


If you are using Angular please follow these steps:

1. Install the necessary dependencies.

angular dependencies

2. Copy the styles tag shown in the snippets into your index.html file.

angular index

3. Import the library that you installed inside your app.module.ts file and the necessary angular libraries to use forms as shown by the snippet.

angular module

4. Inside the component where you want to make the calls to your connection, import the ReCaptchaV3Service libraries, HttpClient, add the function to make the calls and the site key as shown by the snippet.

angular component

5. Inside the HTML file of your component create the button that will make the call to your connection as shown by the snippet.

angular component HTML

If you have any questions regarding the integration of the code into your project please email us: info@getkor.io

results matching ""

    No results matching ""