セッションレス認証のためのOAuth2アクセストークンの保存

Question

OAuth2パスワード許可認証を使用するセッションレスアプリケーションをセットアップしました。ユーザーがユーザー名とパスワードで私のアプリにログインすると、アクセストークンはsessionStorageに保存されます。これは30分間有効です。セッションを30分以上延長する必要がある場合に備えて、リフレッシュトークンをsessionStorageに保存します。リフレッシュトークンは30日間有効です。

ログイン時に「remember me」チェックボックスが選択されている場合は、アクセストークンとリフレッシュトークンをlocalStorageに保存します。リフレッシュトークンが有効である限り、トークンは保持されます。

これらの両方は、問題のカップルを除いて正常に動作するようです：ブラウザが開いたままにされ、セッションをログアウトしていないユーザーが潜在的に30日間続く可能性が

1. 場合。
2. sessionsStorageは、ウィンドウ/タブの間に存続しないので、ユーザーが新しいウィンドウを開くと、再度ログインする必要があります。 localStorageがウィンドウ間に存続するので、 '私を覚えてください'チェックボックスが選択されている場合、これは問題ではありません。

Answer 1

私はリフレッシュトークンを使用することはJavaScriptアプリケーションにとって安全ではないと思います - /tokenエンドポイントにアクセスし、アプリケーションの秘密を使って認証する必要があります。しかし、このようなアプリケーションでは秘密が公開されます。

prompt=noneパラメータ（OpenID Connectから）を使用して、/authエンドポイントからOAuth2暗黙的なフローと新しいトークンを取得することをお勧めします。しかし、暗黙のフローを使用すると、より長いIDトークンを取得し（後でIDトークンを使用してアクセストークンを要求する）、OAuth2で「remember me」を実装する必要があります（より良いオプション - 応用）。それはまた、タブ間でトークンを渡すことで問題＃2を解決するでしょう。

1. 「セッション」とは、リフレッシュトークンを使用して30日間アクセストークンを生成することです。それが問題であれば、例えば何かのアクティビティがない場合にユーザをログアウトさせるアクティビティ検出器を実装することができます。 30分。
2. メッセージパッシングサービスの一種としてlocalStorageを使用することができますので、sessionStorageにトークンを保存できますが、新しいタブではlocalStorageを使用して既存のタブからトークンを要求できます。詳細情報については参照http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows-using-localstorage/

リンク先の記事から

コード例：

function eventListener(e) { 
    if (e.key == 'storage-event') { 
     output.innerHTML = e.newValue; 
    } 
} 

function triggerEvent() { 
    localStorage.setItem('storage-event', this.value); 
} 

window.addEventListener("storage", eventListener, true); 
data.addEventListener("keyup", triggerEvent, true); 

ワークフローは次のようになります：

1. 新しいタブを開いたとのlocalStorageに任意の値を書き込みされますそれはトークンが必要であることを示すキーである。キーは "newTabOpened"にすることができます。新しいタブは、別のキー "oauth2token"の変更を聞き取り始めます。
2. 既存のタブは "newTabOpened"キーの変更をリッスンし、反応としてトークン値を "oauth2token"キーの下に書き込みます。
3. 新しいタブはトークンを読み取り、それをlocalStorageから削除します。