前回の記事で、Docker Desktop for Windows上にMongoDBを構築しました。
これにより、他のDockerコンテナからMongoDBを利用できるようになりました。
今回は、自作PWAアプリをインターネット上に公開して自分だけが利用したい場合に利用できる簡単な認証を実装します。
用途は実装者の想像力次第ですが、特にIoT的な何かを作りたいときにおすすめです。
僕の場合は、エアコンをリモート制御したり、ライフログ管理アプリや、家族向けの音声再生メッセンジャーを作成した際に利用してます。
Dockerコンテナーの準備
それでは、今回もCoderを利用して構築していきます。
まず、Coderを起動し、ログインします。
前回作成した、MongoDBフォルダと同一階層に「PWALogin」フォルダを作成し、
下記構成で、フォルダとファイルを作成します。
PWALogin
| docker-compose.yml
| Dockerfile
|
—src
| bottlerun.py
|
+—static
| —json
| manifest.json
|
—views
index.html
login.html
newuser.html
vscode上では、下記のようになります。
プログラム作成
それぞれファイルに以下内容を書き込みます。
■docker-compose.yml
Dockerfileを読み込みコンテナを立ち上げるための定義です。
Webのポートは8133としてますが、ご自身の環境に合わせて、好きなポートに変更してください。
■Dockerfile
コンテナの基本イメージとして「python3」を利用し、必要となるパッケージをインストールしています。
■bottlerun.py
PythonでWebサーバの処理を記載しています。フレームワークでBottleを利用しています。
Webのポートは8133としてますが、ご自身の環境に合わせて、好きなポートに変更してください。
■manifest.json
PWAの定義ファイルです。アイコンや画面を縦にするか横にするか等の設定を記載します。
manifest.jsonのアイコン画像は空にしておりますが、設定する場合はそれぞれのサイズのpng画像を用意し、パスを指定します。
base64での指定も可能です。
■index.html
認証後のメイン画面です。認証の説明のためサンプルのhtmlを用意しました。
■login.html
ログイン画面のHTMLです。
■newuser.html
ユーザ作成画面のHTMLです。
Dockerコンテナーの起動
Coderのターミナルで、下記コマンドを実行し、コンテナを起動すればサーバ構築完了です。
cd MongoDB
sudo docker-compose build
sudo docker-compose up -d
新規ユーザ作成
次に、新規ユーザの作り方を説明します。
新規ユーザ作成もWeb画面でできれば良いですが、今回は個人利用の想定のため、そのような機能は用意しておりません。
少し手間がかかりますが、一度作成してしまえば後はユーザを利用するだけで良いので、良しとします。
下記URLに接続します。
http://[サーバIP]:8133/newuser
すると、下記画面が表示されるので、新規ユーザのユーザ名、パスワード、ニックネームを入力し、作成ボタンをクリックします。
作成すると、下記のような画面で認証設定文字列が表示されます。
表示された文字列はコピーしておきます。
この認証設定文字列をMongoDBに登録します。
下記URLに接続します。前回構築したMongoDBのMongo Expressです。
http://[サーバIP]:8081/
Mongo Expressの画面が表示されたら「＋Create Database」ボタンをクリックし、「auth」という名前のデータベースを作成します。
作成した「auth」をクリックします。
さらに、「＋Create collection」ボタンをクリックし、「users」という名前のコレクションを作成します。
作成した「users」をクリックします。
次に「New Document」をクリックし、下記画面が表示されることを確認します。
「ObjectID()」の右側にカーソルを合わせて、先ほどコピーした認証設定文字列をペースト、「Save」ボタンをクリックします。
駆け足になりましたが、上記操作により、新規ユーザでのログインが可能になりました。
PWAインストール、ログイン実行
あとは、スマートフォンのブラウザで「http://[サーバIP]:8133/」に接続し、一度ログインし、ホームに追加でインストールすれば完了です。
iPhoneならSafari、AndroidならChromeで操作します。
一度ログインすれば、認証情報を記憶するため、キャッシュ削除やスマホ変更を行わない限り、アカウント情報を入力しなくてもよいです。
コメント