Boot、およびAngularの優れた機能が連携して機能することを示します。SpringとAngularの初心者がアクセスできるようにする必要がありますが、どちらの専門家にも役立つ詳細がたくさんあります。SecurityおよびAngularの一連のセクションの最初であり、それぞれに新しい機能が連続して公開されています。2回目以降の分割払いでアプリケーションを改善しますが、この後の主な変更は機能的というよりもアーキテクチャ上の変更です。SpringとシングルページアプリケーションHTML5、豊富なブラウザベースの機能、および「シングルページアプリケーション」は現代の開発者にとって非常に価値のあるツールですが、意味のあるやり取りにはバックエンドサーバーと静的コンテンツ(HTML、CSS、JavaScript)が関係します。バックエンドサーバーが必要です。バックエンドサーバーは、静的コンテンツの提供、動的HTMLのレンダリング、ユーザーの認証、保護されたリソースへのアクセスの保護、JavaScriptとの対話など、いくつかのロールのいずれかまたはすべてを実行できます。APIと呼ばれることもあります)を介してブラウザで。Bootの出現により、物事はかつてないほど簡単になりました。Bootstrapを使って、ゼロから新しいシングルページアプリケーションを構築する方法を見てみましょう。特定のスタックを選択する特別な理由はありませんが、特にエンタープライズJavaショップのコアSpring支持者には非常に人気があるため、出発点として価値があります。新規プロジェクトの作成SpringとAngularを完全に使いこなしていない人でも、何が起こっているのかを追うことができるように、このアプリケーションの作成を少し詳しく説明します。追いかけたい場合は、アプリケーションが動作している最後までスキップして、すべてがどのように適合するかを確認できます。新しいプロジェクトを作成するためのさまざまなオプションがあります。あるため、必要に応じてプロジェクトを複製し、そこから直接作業することができます。次に、次のセクションにジャンプします。Javaプロジェクト)をお気に入りのIDEにインポートするか、コマンドラインでファイルと「mvn」を操作するだけです。次に、次のセクションにジャンプします。CLIを使用して同じプロジェクトを作成できます。ui次に、次のセクションにジャンプします。.zipファイルと同じコードを直接取得することもできます。ブラウザで開き、依存関係「Web」と「セキュリティ」を選択して、「プロジェクトを生成」をクリックします。.zipファイルには、ルートディレクトリに標準のMavenまたはGradleプロジェクトが含まれているため、展開する前に空のディレクトリを作成することをお勧めします。次に、次のセクションにジャンプします。Projectのウィザードを使用してプロジェクトを作成およびインポートすることもできます。次に、次のセクションにジャンプします。IDEAとNetBeansには同様の機能があります。Angularアプリを追加するAngular(または最新のフロントエンドフレームワーク)の単一ページアプリケーションの中核は、最近Node.jsビルドになります。Angularには、これをすばやくセットアップするためのツールがいくつかあるため、使用できます。Bootアプリケーションと同様に、Mavenでビルドするオプションも保持できます。githubからこのチュートリアルのコードをチェックアウトすることもできます。アプリケーションの実行Angularアプリの準備が整うと、アプリケーションはブラウザーにロード可能になります(まだあまり機能していません)。spring-boot:runhttp://localhost:8080のブラウザに移動します。ホームページをロードすると、ユーザー名とパスワードを要求するブラウザダイアログが表示されます(ユーザー名は「user」であり、パスワードは起動時にコンソールログに出力されます)。CLIのデフォルトの「ヒーロー」チュートリアルコンテンツ)。本質的に空白のページを取得する必要があります。(および独自のパスワードを選択します)。サンプルコードでは、「application.yml」を使用してこれを行いました。スタンドアロンJARとしてパッケージ化して実行するには、次のようにします。app.component.ts」内)をカスタマイズしましょう。最小限のAngularアプリケーションは次のようになります。World'};}このTypeScriptのコードのほとんどはボイラープレートです。アノテーションを介してレンダリングするHTMLのスニペットを定義します。)を編集する必要もあります。World!」と表示されます。{{greeting.content}}を使用して、HTMLのAngularによってレンダリングされます。動的コンテンツの追加これまでに、グリーティングがハードコードされたアプリケーションがあります。これは、物事がどのように組み合わされるかを学習できますが、実際にはコンテンツがバックエンドサーバーから来ることを期待しているため、グリーティングを取得するために使用できるHTTPエンドポイントを作成しましょう。@RequestMappingを定義します。}}新しいプロジェクトの作成方法によっては、UiApplicationと呼ばれない場合があります。そのアプリケーションを実行し、「/resource」エンドポイントをcurlにしようとすると、デフォルトで安全であることがわかります。resource","path":"/resource"}Angularからの動的リソースのロードブラウザでそのメッセージを取得しましょう。変更して、XHRを使用して保護されたリソースをロードします。注入し、それを使用してリソースを取得しました。Angularが応答を渡し、JSONをプルしてグリーティングに割り当てます。}アプリケーションを再度実行(またはブラウザーでホームページを再読み込み)すると、動的メッセージとその一意のIDが表示されます。そのため、リソースは保護されており、直接curlすることはできませんが、ブラウザはコンテンツにアクセスできました。100行未満のコードで安全な単一ページのアプリケーションがあります!静的リソースを変更した後、ブラウザに強制的にリロードさせる必要がある場合があります。Chrome(およびプラグイン付きFirefox)では、「開発者ツール」(F12)を使用できますが、それで十分かもしれません。F5を使用する必要がある場合があります。仕組みは?一部の開発者ツールを使用すると、ブラウザーとバックエンド間の相互作用をブラウザーで確認できます(通常、F12はこれを開き、デフォルトでChromeで動作し、Firefoxでプラグインが必要になる場合があります)。概要は次のとおりです。動詞パス状況レスポンスGET/401認証のためのブラウザプロンプトGET/200index.htmlGET/*.js200Angularからの3番目のアセットのロードGET/main.bundle.js200アプリケーションロジックGET/resource200JSONグリーティングブラウザはホームページの読み込みを単一の対話として扱うため、401は表示されない可能性があります。ネゴシエーションがあるため、「/resource」に対する2つのリクエストが表示される場合があります。リクエストをより詳細に見ると、すべてのリクエストに「Authorization」ヘッダーがあることがわかります。dXNlcjpwYXNzd29yZA==ブラウザーは、すべてのリクエストでユーザー名とパスワードを送信しています(そのため、本番環境でHTTPSのみを使用することを忘れないでください)。それについて「Angular」はないため、JavaScriptフレームワークまたは選択した非フレームワークで動作します。それのどこが悪いんだい?一見、かなり良いジョブをしたようです。簡潔で実装しやすく、すべてのデータは秘密のパスワードで保護されています。フロントエンドまたはバックエンドのテクノロジーを変更しても機能します。いくつかの課題があります。基本認証は、ユーザー名とパスワードの認証に制限されています。認証UIは遍在していますが、見苦しい(ブラウザダイアログ)。(CSRF)からの保護はありません。CSRFは、バックエンドリソースを取得するだけでよいため(つまり、サーバーの状態が変更されないため)、実際のアプリケーションでは課題になりません。アプリケーションにPOST、PUT、またはDELETEがあるとすぐに、合理的な最新の手段ではもはや安全ではなくなります。このシリーズの次のセクションでは、フォームベース認証を使用するようにアプリケーションを継承します。Basicよりもはるかに柔軟です。フォームを作成したら、CSRF保護が必要になります。SecurityとAngularの両方には、これを支援するためのすぐに使える機能がいくつかあります。HttpSessionを使用する必要があります。テキストとソースコードの入念なレビューと、最もよく知っていると思った部分についても、知らなかったいくつかのトリックを教えてくれたことに感謝します。使用する方法について引き続き説明します。ここでは、Angularを使用して、フォームを介してユーザーを認証し、安全なリソースをフェッチしてUIでレンダリングする方法を示します。最初のセクションでは、HTTP基本認証を使用してバックエンドリソースを保護する単純なアプリケーションを構築しました。これでは、ログインフォームを追加し、ユーザーに認証するかどうかを制御し、最初の反復での課題を修正します(主にCSRF保護の欠如)。Basic資格情報を必ずクリアしてください。Chromeでは、単一サーバーでこれを行う最良の方法は、新しいシークレットウィンドウを開くことです。ホームページにナビゲーションを追加Angularアプリケーションの中核は、基本的なページレイアウト用のHTMLテンプレートです。src/appで)変更しましょう。ログインリンクとログアウトリンクのあるナビゲーションバーがあります。セレクターはAngularによって提供され、メインモジュールのコンポーネントに接続する必要があります。ルートごと(メニューリンクごと)に1つのコンポーネントがあり、1つにくっつけて状態を共有するヘルパーサービス(AppService)があります。すべての要素をまとめたモジュールの実装は次のとおりです。呼ばれるAngularモジュールへの依存関係を追加しました。インポート内で「/」(「ホーム」コントローラー)および「/login」(「ログイン」コントローラー)へのリンクをセットアップするために使用されます。これは、ユーザーがログインしたときに送信したいフォームにデータをバインドするために後で必要になるためです。UIコンポーネントはすべて「宣言」であり、サービスグルーは「プロバイダー」です。実際にはあまり機能しません。アプリのルートに付属するTypeScriptコンポーネントは次のとおりです。AppServiceの依存性注入がいくつかありますコンポーネントのプロパティとして公開されたログアウト関数があります。これは後でログアウト要求をバックエンドに送信するために使用できます。コールバックを介して無条件に行います)。使用して、テンプレートHTMLを別のファイルに外部化します。関数は、コントローラーが読み込まれたときに呼び出され、ユーザーが実際に既に認証されているかどうかを確認します(たとえば、ユーザーがセッションの途中でブラウザーをリフレッシュしたかどうか)。ブラウザーがそれを追跡することを信頼したくないためです。関数は、提供されている場合はHTTP基本認証資格情報を送信し、提供されていない場合は送信しません。引数があり、認証が成功した場合にコードを実行するために使用できます。app」の「app.component.html」のすぐ隣に移動できます。greeting</p></div>ユーザーはログインするかどうか(ブラウザですべて制御される前)を選択できるようになったため、UIで安全なコンテンツとそうでないコンテンツを区別する必要があります。関数への参照を追加することにより、これを予測しました。ユーティリティ機能も提供する必要があります。}}ログインフォームログインフォームには、独自のコンポーネントも取得されます。(submit)を介してフォームを送信するためのボタンがあります。formタグでアクションを実行する必要はありません。そのため、アクションをまったく挿入しない方がよいでしょう。errorが含まれる場合にのみ表示されるエラーメッセージもあります。使用してHTMLとAngularコントローラー間でデータを渡します。オブジェクトを使用してユーザー名とパスワードを保持します。認証プロセス追加したログインフォームをサポートするには、さらに機能を追加する必要があります。Security構成になります。オブジェクトを定義する必要があります。「ログイン」コンポーネントを具体化します。相対リソース(アプリケーションのデプロイルートを基準とする)「/user」に対してGETを行います。関数から呼び出されると、ヘッダーにBase64エンコードされた資格情報を追加し、サーバー上で認証を行い、代わりにCookieを受け入れます。これは、ログインフォームの上にエラーメッセージの表示を制御するために使用されます。関数を処理するには、新しいエンドポイントをバックエンドに追加する必要があります。Securityアプリケーションで役立つトリックです。介して401応答を送信します。Securityを使用すると、ログイン要求を簡単に処理できます。いくつかの構成を追加するだけです(たとえば、内部クラスとして)。Bootアプリケーションであり、静的(HTML)リソースへの匿名アクセスのみを許可します。Securityによって無視されるだけでなく、匿名ユーザーが利用できる必要があります。覚えておく必要がある最後のことは、Angularが提供するJavaScriptコンポーネントをアプリケーションで匿名で利用できるようにすることです。"*.bundle.*"デフォルトのHTTPリクエストヘッダーの追加この時点でアプリを実行すると、ブラウザが(ユーザーとパスワードの)基本認証ダイアログをポップアップすることがわかります。XHR要求からの401応答を確認するためです。Securityから来るヘッダーを抑制することです。XMLHttpRequest」を送信することです。以前はAngularのデフォルトでしたが、1.3.0では削除されました(GitHub)。XHRリクエストでデフォルトのヘッダーを設定する方法は次のとおりです。}}ここの構文は定型です。関数をオーバーライドすることだけです。宣言する必要があります。}ログアウトアプリケーションはほぼ機能的に終了しています。最後に行う必要があるのは、ホームページでスケッチしたログアウト機能を実装することです。POSTを送信することを忘れないでください。Securityによって既に追加されているためです(つまり、この単純な使用例では何もする必要はありません)。コールバックを使用して、たとえばログアウト後にいくつかのビジネスロジックを実行できます。CSRFの保護アプリケーションはほとんど使用する準備ができており、実際に実行すると、ログアウトリンクを除いて、これまでに作成したすべてが実際に機能することがわかります。それを使用してみて、ブラウザで応答を参照してください。その理由がわかります。Securityに組み込まれているCSRF保護が、足元で自分自身を撃つことを防ぐために開始されたことを意味するため、良いことです。必要なのは、「X-CSRF」というヘッダーで送信されるトークンだけです。属性でサーバー側で利用可能でした。クライアントに渡すには、サーバー上の動的なHTMLページを使用してレンダリングするか、カスタムエンドポイントを介して公開するか、Cookieとして送信します。いるため、最後の選択が最適です。そのため、サーバーには、Cookieを送信するカスタムフィルターが必要です。Securityはデフォルトでそれを要求属性として提供するため、要求属性からCookieに値を転送するだけです。}}これらの変更が行われると、クライアント側で何もする必要がなくなり、ログインフォームが機能するようになります。仕組みは?一部の開発者ツールを使用すると、ブラウザーとバックエンド間の相互作用をブラウザーで確認できます(通常、F12はこれを開き、デフォルトでChromeで動作し、Firefoxでプラグインが必要になる場合があります)。概要は次のとおりです。(無視されました)GET/user200資格情報を送信してJSONを取得するGET/resource200JSONグリーティング上記の「無視」とマークされた応答は、XHR呼び出しでAngularが受信したHTML応答であり、そのデータを処理していないため、HTMLはフロアにドロップされます。「/user」リソースの場合、認証されたユーザーを探しますが、最初の呼び出しには存在しないため、その応答はドロップされます。リクエストをよく見ると、すべてのリクエストにCookieが含まれていることがわかります。後続のリクエストにはすべてこれらのCookieがあり、それらは重要です。アプリケーションはそれらのCookieなしでは機能せず、いくつかの本当に基本的なセキュリティ機能(認証およびCSRF保護)を提供しています。Cookieの値は、ユーザーが(POST後に)認証すると変更されます。