Firebaseでベーシック認証をかけるベストな方法

どうも松井です。

前回に引き続き、Firebaseネタです。Firebaseをテストーサーバーとして利用をするため、basic認証をかける必要があったため、実装を行なっています。

Firebaseの設定までは前回の記事に書きましたので、初期設定は割愛します。

Firebaseの設定はコチラ。

1.firebase-toolsのインストール

まずは、ターミナル上でfirebase-toolsをインストールします。

$ npm install -g firebase-tools

2.firebaseにログイン

インストールしたら、firebaseにログインしましょう。

firebase login

3.firebaseの初期化

プロジェクトファイルにcdコマンドで移動してプロジェクトの初期化を実行します。

firebase init

これ打つと、前回の記事と同様に色々と質問されるので、Functions とHosting にチェックを入れます。その他は、基本はデフォルトのままでOKです。

4.ファイルの書き換え

問題なく完了すれば、ファイルを書き換えます。書き換えるファイルは2つ。

functions/index.jsとfirebase.jsonの2つ。下記のように書き換えます。

functions/index.js

const functions = require('firebase-functions')
const express = require('express')
const basicAuth = require('basic-auth-connect')
const app = express()

app.all('/*', basicAuth(function(user, password) {
 return user === 'username' && password === 'password';
}));

app.use(express.static(__dirname + '/static/'))

exports.app = functions.https.onRequest(app)

return user === 'username' && password === 'password';に適当なusernameとpasswordを設定します。これが、basic認証する際の鍵となります。

firebase.json

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

5.プラグインのインストール

functionのフォルダに移動して、必要なプラグインのインストールを行います。下記のような感じ。

$ cd functions
$ npm install --save express
$ npm install --save basic-auth-connect

6. Publicフォルダ内のファイルをstaticフォルダに移動

firebase.jsonの記述は、Publicフォルダ内に何もなければ、static内をホスティングするという記述なので、publicフォルダ内のファイルを全削除します。というより、functionフォルダ内にstaticフォルダを追加作成して、その中にPublicフォルダ内のファイルを全部移行します。

7. デプロイする

移行できれば、デプロイしてみましょう。

firebase deploy

urlが発行されると思いますので、そのURLを確認してみましょう。

あれ？basic認証かかってないぞ。という方は、chromeのシークレットウィンドウから再度、URLにアクセスしてみましょう。

以上で、basic認証設定はおしまい。ではまた！