はじめに

CloudFront経由でS3に格納されているReactアプリにアクセスする際、
Basic認証を行うように実装していきます！

Basic認証を行う関数の作成

まずはCloudFront FunctionsでBasic認証を行う関数を作成してきます。 CloudFrontから関数を選択して「関数を作成」をタップします。

続いて関数名を入力して以下のような設定で関数を作成します。
今回はBasic認証を行う関数と分かるように「Basic-Authentication」にしています。
関数名入力後は「関数を作成」をタップしたら関数が作成されます🎉

Basic認証を実装する

CloudFront>関数>Basic-Authenticationの構築>関数コードで関数の処理を実装していきます。
Basic認証を行う処理は以下になります。

Basic-Authentication

function handler(event) {
    var request = event.request;
    var headers = request.headers;

    // ID:Password の文字列をBasic64でエンコードした文字列を設定する
    var authString = "Basic dGVzdDp0ZXN0";
    
    if (
        typeof headers.authorization === "undefined" ||
        headers.authorization.value !== authString
    ) {
        return {
            statusCode: 401,
            statusDescription: "Unauthorized",
            headers: { "www-authenticate": { value: "Basic" } }
        };
    }
    return request;
}

Basic認証ではリクエストのAuthorizationヘッダの値に「Basic」の文字+スペース+「ユーザー名とパスワードから生成した認証情報」を設定する決まりになっています。
そのため関数の処理ではその決まりに則りAuthorizationヘッダの値が期待する値かどうかを判定する実装にする必要があります。
今回の実装では「ユーザー名とパスワードから生成した認証情報」は「ユーザー名:パスワード」の文字列をBase64でエンコードした文字列を設定するような想定で実装します。

今回はユーザー名とパスワードは両方「test」で認証しようと思うので、
authStringには「Basic」+スペース+「test:test」をBase64でエンコードした文字列が設定されています。

if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
)

ではAuthorizationヘッダが存在しなかったりBasic認証を行った際にユーザー名とパスワードが両方「test」でなかった場合は401を返すようにしています。
上記に当てはまなければ問題ないため、requestを通すためにrequestをreturnしています。

CloudFrontへの紐付け、動作確認

関数作成後、作成した関数を公開していきます。 CloudFront>関数>Basic-Authentication の発行から「関数を発行」をタップして関数を公開してします。

続いて作成した関数とCloudFrontのディストリビューションを紐付けます。
CloudFront>ディストリビューションからBasic認証を行いたいディストリビューションを選択します。
その後ビヘイビアを選択し、関数の関連付けで以下のように設定してください。
今回はリクエストに対して関数の処理を行いたいため、ビューワーリクエストに作成した関数を紐づけています。

最後にCloudFrontのURLへアクセスし、以下の表示になれば実装成功です🎉