野ざらしのAPIGatewayが怖かったので、APIキーを使ってみる。

ごあいさつ

こんばんは。
基本的にすべてに恐怖しているもに倉です。

今回は、前回作ったAPIGatewayをちょっとでもセキュアにするために
APIキーを作って適用してみようとおもいます。

ながれ

前回作った感想フォームをもとに設定していきます。

①API GatewayにAPIキーを設定
②APIキーを使わないと感想フォームの内容がLINEに通知されないことを確認
③APIキーを使ったらLINEに通知されることを確認
④うれしい

API GatewayにAPIキーを設定

APIキーを作りに行きましょう。

「APIキー」を選択します。

アクションから「APIキーの作成」を選択します。

名前は適当に決めて保存しましょう。
APIキーは個人的に自動生成のほうが強そうな気がしたので、自動生成を選択しています。

次に、「使用量プラン」を選択します。

使用量プランはAPI Gatewayの使用に制限をかける設定です。
今回は無制限にしていますが、もっとセキュアにするなら設定したほうがいいものではあります。

今回APIキーを設定するAPIステージを関連付けましょう。

そして、先ほど作成したAPIキーを使用量プランに追加したら下準備はOK！

今回APIキーを設定するAPIのメソッドリクエストの画面で
APIキーの必要性を「true」にして、忘れずにデプロイをしましょう。

試してみる

まずは、とくにJavaScriptを書き換えることなく感想フォームを使ってみます。

consoleを確認してみると、403エラーが出ているのがわかります。
通知も来ていませんので、想定している通りの動作になっていますね。

JavaScriptを書き換える

それでは、APIキーを使用するようにJavaScriptの部分を書き換えます。

まず、APIキーを確認。

そして、以前書いたJavaScriptを以下の通りに変更。

function checkText(){
        var name  = document.fm.name.value;
        var naiyo  = document.fm.naiyo.value;

        const yoi = {
                "name": name,
                "naiyo": naiyo
        }

        const okuru = JSON.stringify(yoi)

        fetch('API GatewayのURL', {
                method: 'post',
                headers: {
                        'x-api-key':'APIキー',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                },
                body: okuru
        })

        var textForm = document.getElementById("name");
        textForm.value = '';
        var textForm = document.getElementById("naiyo");
        textForm.value = '';

};

変更点は以下の通りです。

①header→headers　に変更
※こうしないとエラーが出ます！

② 'x-api-key':'APIキー',　を書き加えた

これで完璧なのでばっちり通知が来ます！

あとがき

これで震えて眠らずにすみそうです。

やる前は難しそうだな……と思っていたのですが、わりと
簡単に設定できるので、設定しない手はないですね！