フロントエンド上のAPIキーを安全に確保する方法(分単位)

しばしば我々がCDN(セキュリティ、パフォーマンス、必要なバックエンド・インフラストラクチャに必要とされる)に届けられる利益を活用するウェブサイトを構築しているとき、しばしば、我々はより強力で、ダイナミックな機能性を望みます.機能を向上させる最良の方法は、APIを介してですすなわち、電子メールのコンタクトフォーム、外部データの処理、または天気予報、フライトスケジュール、為替レートなどのような現在の情報を我々はバックエンドを構築したり、これらのAPIの呼び出しを処理するインフラストラクチャを追加したくない場合は、迅速かつ安全にこれらのAPIの統合を行うのだろうか?どこでプライベートAPIキーを確保するのですか?どのような我々はユーザーのサードパーティのAPIとの対話を許可する前に、ユーザー認証をしたくない場合はどうですか?答えはKOR Connect , KOR Connectは、API統合プロセス中にセキュリティ層を自動的に展開しながら、CDNフロントエンドが迅速かつ簡単な方法でAPIキーを確保するために終了するミドルウェアプラットフォームです.ボーナスは、それも無料で使用することです!
我々は、Covid 19トラッカーを統合する例を通して話します.

COVID - 19トラッカーを作りましょう.これを行うには、我々が使用するAPIを選択する必要があります.私はCOVID-19 Statistics API それはジョンホプキンス大学からデータを使用します.
あなたがすでに持っているならばKOR Connect アカウントでログインすることができますhere または、新しいアカウントを作成することができます.
「+接続API」ボタンをクリックして、KOR ConnectにAPI接続を作成することから始めましょう.

接続の詳細はすべてRapidapiから直接コピーされました.API接続モジュールに関する詳細な情報here .

完了!接続を行った後、あなたの新しいAPI接続の詳細を表示してください.

これで、KOR Connectによって生成された安全なAPIと公開APIキーが表示されます.また、画面の左上にあるAPI呼び出しのユーザー毎のレート制限を調整することができます(デフォルトは1秒あたり5呼び出しです).この例では、Kor Connectが提供する単一のURLセキュリティタイプを使用します.

If you want, 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.

今、あなたがしなければならないのは、KOR Connect(上記のイメージを参照)によって提供されたセキュアURLと公開APIキーを取得し、APIリクエストを作成するために使用します.以下はフェッチリクエストの例です.

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

今では、あなたのAPIの統合を使用してテストを開始する準備が整いました.KOR Connectはテストモードに自動的に接続モードを設定します.あなたが生産に行く準備ができているならば、あなたが接続モードを生産に切り換えるのを忘れないようにするならば、これはセキュリティを起動させて、許可されたドメインからlocalhostを削除しますhere ).

それは、今あなたのAPIの統合は、追加のライブラリや設定なしで動作するように、単純だった.

場合は、認証サービスを介してさらにセキュリティを追加するには、追加の指示をクリックして興味を持っている.
接続の後に自動的にKOR Connectの端で何が起こるかに興味がある場合.ボットコントロールは、雑多なボット、セキュリティ関連のボットのための検査は、自動化されたブラウザー、ブラックリストの起源、およびブラウザから来ているようではないユーザーエージェントから来る呼び出しをアクティブにアクティブ化されますこれらの呼び出しは、彼らが検査に合格しない場合ブロックされます.さらに、KOR Connectは、アクセス制御が許可された起源からオリジンヘッダーを許容するのを確認します、そして、他のユーザーにどんな中断も引き起こすことなく呼び出しを悪用している悪意のある俳優をブロックすることができるどんなユーザー料金制限も提供します.