【Express】Firebase HostingでBasic認証を各ディレクトリに設定する方法

どーも、ぐるたか@guru_takaです。

こちらの記事でCloud FunctionsとFirebase HostingでBasic認証をかける方法を紹介しました。

Firebase HostingにBasic認証をかける方法をまとめる

複数の特定ディレクトリにBasic認証を設定する方法です。例えば

  • /hello:Basic認証 その1
  • /world:Basic認証 その2

といったイメージです!

全体のBasic認証をかける点との違い

こちらで紹介した全ディレクトリに同一のBasic認証をかける方法との違いは、Functions内に、指定したディレクトリごとにBasic認証をかけるだけです。

Firebase HostingにBasic認証をかける方法をまとめる

以下、参考コードです。

functions/index.js
const functions = require('firebase-functions')
const basicAuth = require('basic-auth-connect')
const express = require('express')

const app = express()

app.all(
  '/hello/*',
  basicAuth((user, password) => {
    return user === 'user' && password === 'basic1'
  })
)

app.all(
  '/world/*',
  basicAuth((user, password) => {
    return user === 'user' && password === 'basic2'
  })
)

app.use(express.static(__dirname + '/static/'))
exports.app = functions.https.onRequest(app)

参考 Firebase Hosting + Cloud Functions for Firebase を下地に Express.js で Basic認証しつつ静的コンテンツを返すサーバーを作るコード日進月歩

firebase.jsonは同じでOKです。

firebase.json
{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

publicフォルダの中身は空にすることに注意してください!publicフォルダにコンテンツがあると、優先的に読み込まれるからです。

publicフォルダの代わりに、functions/staticフォルダに静的コンテンツを入れましょう。

1. /__/* パスセグメントで始まる予約済みの名前空間
2. リダイレクトの構成
3. 正確に一致する静的コンテンツ
4. リライトの構成
5. カスタムの 404 ページ
6. デフォルトの 404 ページ

引用:公式:ホスティング動作を構成する

最後にfunctionsとFirebase Hostingにデプロイすれば完了です!

コメントを残す