ubuntu
カテゴリ
Access⇒WebViewで閲覧
2026/05/06 11時vaultwarden
WebView
■生体認証(WebAuthn)+ PINフォールバック実装

webauthnインストール
sudo apt install python3-pip -y
pip3 install webauthn --break-system-packages

■FastAPI構築

4つのファイルを設定作成
nano /mnt/data/docker/passmanager/api/requirements.txt
fastapi
uvicorn
python-multipart
aiofiles
sqlcipher3
webauthn
nano /mnt/data/docker/passmanager/api/Dockerfile
FROM python:3.11-slim
WORKDIR /app

# SQLCipherのビルドに必要なパッケージ
RUN apt-get update && apt-get install -y \
    gcc \
    libsqlcipher-dev \
    sqlcipher \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8100"]
nano /mnt/data/docker/passmanager/api/main.py
----------割愛----------

nano /mnt/data/docker/passmanager/docker-compose.yml
services:
  passmanager-api:
    build: ./api
    container_name: passmanager-api
    ports:
      - "8100:8100"
    volumes:
      - ./db:/app/db
      - ./photos:/app/photos
      - ./api/static:/app/static
    environment:
      DB_KEY: "32桁の暗号キー"
      RP_ID: "ubuntu-sv.xxxxxxxx.ts.net"
      ORIGIN: "https://ubuntu-sv.xxxxxxxx.ts.net"
    restart: unless-stopped

■WebUI(HTML/JS)の作成

----------割愛----------出来上がりは上記画像の通り自作Accessのフォームを踏襲した

WebUI で、Accessにて作成したフォームをほぼ踏襲して WebView化した、スマートフォンでは、全体表示知るのではなく、ペインを分けて表示し実に見やすい、パスワード生成機能も追加して、これでAccess は不要となった。

■スマートフォン通信遮断時の対策

スマートフォンの通信が途切れた時の為に、スマートフォンにデータを格納する仕組みを持つ、Memento Database は必須かと思ったが、データが100KBと小さいかったので、キャッシュとしてスマートフォンに取込み、電波が途切れた時に瞬時に画像以外をキャッシュから表示する仕組みを作った、これで Memento Database との二重管理も不要となった。

キャッシュデータを掴んでいる状態のモバイル端末側で修正・追加を行っても、リロードボタンで Ubuntu Server へ書込み、キャッシュをリロードするが、通信遮断時にリロードを行うとデータが消える恐れがあるので要注意

Tailscale で、保護したうえで、更に暗号化しモバイル端末では生体認証も付加したので、セキュリティは万全かと、たかが500件程度のレコードではあるが、大事なデータを持ち歩けるのは便利。
記事一覧