LIFFアプリのステージング環境に内部の人だけアクセスできるようにしたい、ということでBASIC認証をかける方法についてです。

単純にLIFFアプリのWebページにBASIC認証をかけてしまうと、LINEアプリ内ブラウザからLIFFアプリを起動する際に処理が止まってしまいました。

そこでLINEアプリ内から起動される場合は、どうせ開発者しか分からない開発用LINE公式アカウントを用意するので、外部の人がこのLINE公式アカウントを見つけることはできないということを前提として、
LINEアプリ内から起動される場合はBADIC認証はかからなくてよい、というポリシーにすることにしました。

LINEアプリ内ブラウザからLIFFアプリを起動する場合ユーザーエージェントが下記のようになっているようです。

Mozilla/5.0 (iPhone; CPU iPhone OS 16_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/13.14.0 LIFF

今回のプロジェクトでは、LINEアプリをCloudFrontでホスティングしていたので、以下の手順でBASIC認証をかけました。

• 1. CloudFront Function にて下記のようなコードを書く

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

  // echo -n user:pass | base64
  var authString = "Basic XXXXXXXXXXXX";

  if (request.headers["user-agent"].value.match(/LIFF/)) { 
      return request;
  }
  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}

• 2. このCloudFront Function を 目的のDistribution に紐付ける

参考: CloudFront FunctionsでBasic認証のパスワードをかける | DevelopersIO produced by Classmethod