DEV Community: Clemenshemmerling

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):

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

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