S3でベーシック認証を簡易的に作成する方法

2022.6.132022.6.13Writer: ideComment: 0

技術開発ブログ

タイトルの通りの作業をしたため備忘録も兼ねて記事にします！

ベーシック認証の設定

Lamdaで実装するのが一般的らしいですが
CloudFront Functionの機能で簡単に作れたので
今回はCloudFront Functionで実装しました。

１．CloudFrontサイドバーにある関数を選択

２．関数名を設定
関数名は何でも大丈夫なので
「basicAuthentication」と設定し「関数を作成」を選択

３．コードを設定
ユーザー名を「hogeuser」
パスワードを「hogepass」

のベーシック認証になるソースコードを設定し
「変更を保存」を選択

ソースコードはこちら

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

  // authUserがユーザーID、authPassがパスワード
  var authUser = 'hogeuser';
  var authPass = 'hogepass';
  var authString = 'Basic ' + (authUser + ':' + authPass).toString('base64');

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}

function handler(event) {

var request = event.request;

var headers = request.headers;

// authUserがユーザーID、authPassがパスワード

var authUser = 'hogeuser';

var authPass = 'hogepass';

var authString = 'Basic ' + (authUser + ':' + authPass).toString('base64');

if (

typeof headers.authorization === "undefined" ||

headers.authorization.value !== authString

) {

return {

statusCode: 401,

statusDescription: "Unauthorized",

headers: { "www-authenticate": { value: "Basic" } }

};

}

return request;

}

４．関数を発行
関数がデプロイされるイメージになります。
関数を発行後にプログラムを変更する場合は、
再度関数を発行する必要があります。

発行すると、関連付けられているディストリビューション
という項目が表示されます。

ここで関連付けからも、cloudFrontに設定可能なのですが
確定画面でどのディストリビューションに紐づいているかがID表示されており
若干最終確認としては不安になるため、次の項目でCloudFront側での設定方法も記載します。

５．CloudFrontの設定で関数を有効に
ベーシック認証を掛けるディストリビューションを選択
ビヘイビアのS3に向いている項目を編集

関数の関連付けの、ビューワーリクエストの項目に
関数タイプが「CloudFront Functions」
関数 ARN/名前が先ほど設定した名前の「BasicAuthencation」
を設定

これで設定は完了ですので
実際にアクセスすると、ベーシック認証が掛かっているかと思います。

なお、解除や設定時はキャッシュが効いているので
必要に応じでCloudFrontのキャッシュ削除で対応して頂ければと思います。

やり方さえ分かれば、凄い簡単にできることが分かりますね。
是非ご活用くださいませ。