新しい AngularJS、Web API シングル ページ アプリケーションを作成したいと思います。ASP.NET Identity を使用し、ユーザー登録の必要がないシンプルなログイン (Google/Facebook ログインなどは不要) のために、WEB API コントローラーに接続するユーザー ログイン画面を設定する方法を示す例を持っている人はいますか。
また、ログインが完了したら、新しいビューを表示する方法を教えてください。私が望むのは、ブラウザの URL にルーティングを表示しないソリューションです。たとえば、URL を変更せずに、ログイン ビューと他のいくつかの異なるビューを切り替えることができるようにしたいと思いますwww.abc.com。
言い換えればwww.abc.com/login、、、を表示しないようにしたいのですwww.abc.com/screen1。www.abc.com/screen2
アドバイスをいただければ幸いです。
ベストアンサー1
そこで、例を探す代わりに、例を作成しました (下部のリンク)。機能の仕組みを説明するために、いくつかの点について説明します。
新しい ASP.NET Identity システムは、HTTP 経由で Web API リソースを使用するクライアントで使用できる OAuth 2.0 Bearer トークン実装を提供します。認証はセッション クッキーに保存されないため、サーバーは認証状態を維持する責任がありません。副作用として、コンシューマーはサーバーの認証と返されたトークンの管理を行う必要があります。これは、Microsoft が VS 2013 で提供する SPA テンプレートで使用しているシステムです。
AngularJS は認証について何も想定していないため、認証方法はユーザー次第です。
$httpAngularJS は、リモート HTTP ベースのサービスにクエリを実行するサービスと、$resource上に構築されたサービスを提供します$http。Authorization上記の Bearer トークン実装でヘッダーを使用すると、両方を組み合わせて、HTTP 経由でサーバー リソースへの認証済みアクセスを提供できます。AngularJS では、後続のすべての HTTP トランザクションで使用する「デフォルト」ヘッダーを設定できますAuthorization。
それを念頭に置いて、私は、Web API サーバーと SPA 間の HTTPAuthorizationヘッダーの設定を含むすべての認証の詳細を処理するユーザー サービスを作成することでこれを実現しました。ユーザーの認証状態に基づいて、ナビゲーションを防ぐために特定の UI 要素を非表示にすることができます。ただし、状態のresolveオブジェクトのプロパティとして認証を必要とする状態も定義すると、イベントに設定されたウォッチャーが$stateChangeErrorエラーをキャプチャし、ユーザーをログイン フォームにリダイレクトします。適切な認証が行われると、ユーザーは移動しようとしていた状態にリダイレクトされます。
ブラウザ セッション間で認証が失われるのを防ぐために (クライアントは認証トークンの維持を担当し、そのトークンはメモリ内に維持されるため)、ユーザーが認証を Cookie に永続化する機能も追加しました。これはすべてユーザーに対して透過的です。ユーザーにとって、これは実質的に従来のフォームとセッションに基づく認証と同じです。
ユーザーにルートが表示されないようにする理由がわかりませんが、そのようにコーディングしました。URL を使用せずにステートフルな方法でナビゲートするために AngularUI Router を使用する方法については、Sedushi の Plunker の例を参考にしました。それでも、自分で作成するアプリケーションにこれを個人的に推奨できるかどうかはわかりません。
完全なソリューション（WebAPIとWebUIの両方）は、ステップバイステップの手順で利用可能です。ここ。
不明な点があればお知らせください。回答の中でより明確に説明できるよう努めます。