web-dev-qa-db-ja.com

PWAオフライン認証

オフラインでアプリに再度アクセスしたときに、PWAでユーザー認証を維持するための最良の方法は何ですか。

例..

  1. ユーザーがインターネット接続でWebアプリにアクセスします。
  2. ユーザーがログインし、必要なすべてのデータ(indexeddb)をダウンロードします。
  3. ユーザーがページを閉じます。
  4. ユーザーがページに戻る(インターネットなし)。
  5. ユーザーはすでにログインしています。

5はアドバイスが必要な部分です。ログは安全である必要があるため、Cookie/localstorageのトークンは十分ではありません。

何かアドバイスはありますか?

12
trig518

アプリにユーザーを記憶させ、自動的にトークンをどこかに保存する必要がある場合。 localstorageに保存することで問題ありません。

Ng se構成でdataGroupsを設定した場合、Angularは外部リクエストを保存します。これは、URIに基づいてキャッシュされます。私が今見ることができる2つのオプションがあります。

オプション1:すべてのAPI応答でユーザーIDを返し、jwtトークンを使用している場合は、ユーザーIDをトークン本文に格納します。 AngularフィルターでそのIDに基づいてAPIリクエストを受信した場合。ネットワーク接続がある場合、ユーザーに表示されるものしか表示されないため、これは何もしません。ただし、オフラインの場合キャッシュされたデータが現在のユーザーからのものであることを保証することはできません。ユーザーAがログインしてデータをフェッチする場合、ユーザーBはログインしますがそのデータをフェッチしない場合、キャッシュされた応答にはユーザーAのデータが含まれます。このオプションの問題は、ユーザーAの応答が引き続きキャッシュに保存されるため、ユーザーBがService Workerキャッシュを調べると、ユーザーAの応答が表示されることです。

オプション2:Service Workerがログインまたはログアウト時に外部APIリクエスト用に保存するデータを手動で無効にします。これにより、キャッシュされたデータが現在のユーザーのものであることが保証されます。オプション1の利点は、ユーザーのIDである必要があることがわかっているため、ユーザーIDを応答に格納して確認する必要がないことです。また、最初のユーザーがログアウトしたとき、または2番目のユーザーがログインしたときにクレジットが付与されるため、別のユーザーがService Workerキャッシュを見て、他の誰かの応答を見ることを心配する必要はありません。ここでの欠点は、手動で行う必要があることです。 Angularには、これを取得するためのメカニズムがないため、Service Workerキャッシュを無効にします。

オプション3:URIにユーザーIDを追加します。 Angularは、URIをキーとしてデータを格納するため、ユーザーIDをURIに追加すると、そのユーザー(および他のユーザー)のAPI応答が格納されます。これは理想的に聞こえるかもしれませんが、これはすべてのユーザーがService Workerキャッシュにアクセスして、このワークステーションでアプリにログインしたすべてのユーザーに対してキャッシュされたAPI応答を確認できます。また、APIリクエストURIはユーザーIDをその一部として使用しないでください。トークン本体またはクエリ。このオプションは絶対に避けてください。

Service Workerキャッシュを無効にしようとするかどうかに応じて、1または2をお勧めします。

1
Nick Freitas