web-dev-qa-db-ja.com

Angularアプリに認証トークンを保存する方法

Angular APIサーバーと通信するRESTアプリケーション(SPA)があり、アクセストークンを保存するための最良の方法を見つけることに興味があります。 AngularクライアントがAPIへの今後のリクエストを認証するために使用できるように、APIサーバーから返されます。セキュリティ上の理由から、トークンがトークンになるようにブラウザーセッション変数として保存したいと思います。ブラウザを閉じた後は保持されません。

リソース所有者のパスワード付与を使用して、わずかにカスタマイズされたバージョンのOAuth 2.0を実装しています。Angularアプリケーションは、ユーザーがユーザー名を入力するためのフォームを提供し、パスワード。これらの資格情報は、アクセストークンと引き換えにAPIに送信されます。アクセストークンは、他のルートへのリクエストを承認できるように、APIへのすべてのアウトバウンドリクエストのヘッダー(承認:ベアラー%Token%)として送信する必要があります。

私はAngularの領域にかなり慣れていませんが、これらのトークンを処理する限り実装したいワークフローは次のように要約されます。

1)クライアントはAPIに要求を行い、ユーザー資格情報を提供します。

2)このリクエストが成功すると、トークンはどこかに保存されますどこかに(質問はどこにありますか)

HTTPリクエストをインターセプトします。トークンが設定されている場合は、ヘッダーとしてAPIに渡します

4)ブラウザ/タブを閉じるとトークンが破棄されます。

Angularオファー$ window.sessionStorage、これは私が探しているもののようですが、すべてのブラウザーで機能しない可能性があることを懸念しています。私が読んださまざまなリソースによると、これはエンタープライズグレードのアプリケーションであり、幅広いブラウザ(IE、Chrome、Firefox)と互換性がある必要があります。安定していると確信して安全に使用できますか?

私が理解していることから、代替手段は$ window.localStorageまたはcookies($ cookies、$ cookieStore)のいずれかです。このデータを保持したくないので、これは私にとって理想的な解決策ではありませんが、これがより信頼できる場合は、互換性のために効率を犠牲にする必要があります。また、$ rootScopeの値として設定し、この方法で参照することも可能かもしれないと考えていましたが、これが実現可能かどうかはわかりません。

すべてが理にかなっていることを願っています。任意のヘルプ/提案をいただければ幸いです。ありがとう!

16
The Zuidz

$window.sessionStorageは、非常に古いブラウザをターゲットにしていない限り、進むべき道です。

www.w3schools.com によると、sessionStorageはIE 8.0、Chrome 4.0、Firefox 3.5、およびSafari4.0からサポートされています。

3
tymtam

絶対に持続しないものを探しているなら、私は単にトークンをメモリに保持し、ストレージをブラウザに依存しません。ただし、rootScope内に保存することはベストプラクティスではありません。

サーバーアクセスコードをAngularサービスでまだ行っていない場合は、ラップすることをお勧めします。その後、実行時に(プロパティとしてなど)そのサービス内にトークンをカプセル化できます。アプリケーションの他の部分から呼び出すときにアクセスする必要があることについて。

Angular Services はシングルトンであるため、「サーバーサービス」は、通常の依存性注入を使用してアクセスできるグローバルインスタンスになります。

3
Jono Hill