先進のWebフロントエンド技術を導入する事例が増えている。この動きに乗り遅れてはまずい。本特集では、ITリーダーやITエンジニアが知っておくべきWebフロントエンド技術のAtoZを取り上げる。 今回から「PWA」について学ぼう。

 先端Webフロントエンド技術であるPWA(Progressive Web Apps)を使えば、スマホ用のネイティブアプリに近い操作性を実現できる。ところがここで厄介な問題がある。それはセキュリティである。

 特に業務システムの場合、正しいユーザーかどうかを確かめる認証処理が不可欠だ。現在はWebアプリだけでなく、多くのWebサービスが認証機能を備えている。それらの多くはIDとパスワードを使った認証だ。

 ただし、IDとパスワードによる認証方式はユーザーに対して大きな負担をかけてしまう。WebアプリやWebサービスの数だけIDとパスワードを扱わなければならないからだ。セキュリティの観点から、数カ月に1回ほどパスワードの変更を求める場合もある。当然、大量のIDやパスワードの管理が煩雑になり、安易なパスワードを設定したり、多数のWebアプリやサービスで同じパスワードを使い回したりする。その結果、セキュリティリスクとして企業に襲い掛かる。

 ポイントは、煩雑なIDとパスワードの管理を軽減することだ。解決策はいくつかあるが、その中で有効なのがHTML5のAPIを使う方法だ。具体的なAPIは2つある。1つは「Credential Management API」、もう1つは「Web Authentication API」だ。前者はパスワードの入力を省く自動認証機能、後者はハードウエアキーを使った認証機能である。以下でその使い方を紹介しよう。

認証情報をブラウザーに保存する

 より正確に言えば、Credential Management APIは認証を自動化するインタフェース仕様である。1度認証したユーザーが再度ログインする場合、毎回パスワードを入力するのは面倒だ。WebアプリにCredential Management APIを使った認証を実装すれば、再度Webアプリを利用する際にWebブラウザーに保存した認証データを取り出してブラウザーに自動入力できる。

 Webブラウザーにパスワードが保存されるので、スマホのロックを解除されるとシステムにログインされてしまう。このようなリスクが存在することに注意してほしい。

 では、Credential Management APIの実装方法を見ていこう。まず、Webアプリの認証画面フォームには「password」というフィールドを含めておく。ハッシュ関数を使って、passwordというキーを指定しても構わない。

 するとCredential Management APIは、passwardのフォームに入力されたユーザー登録情報や、初回ログイン時の認証情報をブラウザー内に保存する。保存するときは確認画面が表示される。ユーザーはここでボタンを押すだけでIDとパスワードが保存される。

認証情報の保存を確認する画面
認証情報の保存を確認する画面
[画像のクリックで拡大表示]