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認証設定はおしまい。ではまた!
この記事が気に入ったらサポートをしてみませんか?