More Related Content
What's hot
What's hot (20)
Similar to React Helmet navigates SPA
Similar to React Helmet navigates SPA (20)
More from Takao Tetsuro
More from Takao Tetsuro (20)
Recently uploaded
React Helmet navigates SPA
- 3. Micro service ASP.NET MVC React
- 5. ステートレス ステートフル … … … … … … … … … … Blazor React Angular Vue などのモデル ASP.NET MVC のモデル
- 6. ステートレス ステートフル … … … … … … … … … … Blazor React Angular Vue などのモデル ASP.NET MVC のモデル
- 7. ステートレス ステートフル … … … … … … … … … … Blazor React Angular Vue などのモデル ASP.NET MVC のモデル
- 13. 映画チケットの購入 会員登録 個人情報の登録 入力情報の確認 映画の選択へ 会員ログイン 映画の選択へ 映画の選択 時間・日付の選択 作品一覧から選択へ 作品の選択から時間・ 日付の選択に来た場 合、座席の選択へ 作品の選択 時間・日付の選択へ 時間・日付の選択から 作品の選択に来た場 合は座席の選択へ 座席の選択 購入枚数と座席指定 会計 購入内容をメール送信 サブドメイン ログイン・ステート 予約日時・ステート 予約座席・ステート 予約購入・ステート ステート管理
- 14. 映画チケットの購入 会員登録 個人情報の登録 入力情報の確認 映画の選択へ 会員ログイン 映画の選択へ 映画の選択 時間・日付の選択 作品一覧から選択へ 作品の選択から時間・ 日付の選択に来た場 合、座席の選択へ 作品の選択 時間・日付の選択へ 時間・日付の選択から 作品の選択に来た場 合は座席の選択へ 座席の選択 購入枚数と座席指定 会計 購入内容をメール送信 【React UIモデル】 （会員番号：非表示、初期生成） 氏名：必須 メールアドレス：必須 パスワード：必須 電話番号の下4桁：必須 [誕生日：オプション] [性別：オプション] [ジャンル：オプション] 【Reactビューモデル】 会員番号 氏名 メールアドレス パスワード 電話番号の下4桁 誕生日 性別 ジャンル 【ASP.NET永続化モデル】 会員番号 氏名 メールアドレス パスワード 電話番号の下4桁 誕生日 性別 ジャンル 購入履歴
- 17. PowerShellで、プロジェクトを作成する フォルダに移動し dotnet new reactnet-webpack Visual Studioで、 「React.Sample.Webpack.CoreMvc」を 選択してデバッグ実行 ファイルが出来上がるので
- 21. Webpackで作ったプロジェクトを ステートマシンにしていきます ビュー用モデルビュー 永続化用モデルをまとめる フォルダを作成 ログイン・ステート 予約日時・ステート 予約座席・ステート 予約購入・ステート React Router React Helmet Styled Components
- 25. https://www.google.com/permissions/logos-trademarks/https://ja.facebookbrand.com/ Facebook Google
- 30. Index.chtml （_Layout.chtml）でログ インボタンをクリック Accountコントローラー のSigninアクションを呼 び出す。 Microsoft Azure Active Directory Endpointの OAuthフローによって Homeコントローラーの Indexアクションに遷移 Authorization Codeを取 得してアクセストークン を要求 アクセストークンを使っ て、ログインした人の情 報をMicrosoft Graph APIから取得する ユーザー情報を保存し てログイン・ステートを管 理する
- 36. accessaccess
- 37. accessaccess
- 45. accessaccess <head> <title data-react-helmet="true">ReactJS.NET Demos</title> <meta charset="utf-8" /> <link rel="stylesheet" href="/Sample.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" /> <script type="text/javascript" src="https://alcdn.msauth.net/lib/1.2.1/js/msal.js" integrity="sha384- 9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script> <style data-styled="" data-styled-version="4.4.1"></style><style type="text/css" id="server-side-styles"></style> </head> ViewBag.HelmetTitle ViewBag.ServerStyles
- 59. Orleans: Distributed Virtual Actors for Programmability and Scalability https://www.microsoft.com/en-us/research/publication/orleans-distributed-virtual-actors-for-programmability-and- scalability/ Design patterns for modern web APIs https://blog.feathersjs.com/design-patterns-for-modern-web-apis-1f046635215 Atomic Design Methodology https://atomicdesign.bradfrost.com/chapter-2/
Editor's Notes
- タイトルは「React helmetでASP.NET Core Web app」となっていますが、中身は「ASP.NET Core Web appでReact helmet」という感じなのでご了承ください。これは、マイクロサービスのステートフルミドルウェアを何で実装するかによって主語が変わってきますので、そのあたりの話に注目して聞いてみてください。本資料は58ページありますから設計の話を中心にして、実装に関してはかなり急ぎで説明します。そのため、事前に資料とソースコードをダウンロードして聞いていただけると良いかと思います。
- 【読む】
- 本日は3部構成になっています。マイクロサービスの設計では、以前.NETラボでお話しした話を交えながらステートレスなSPAのステートをステートフルミドルウェアで管理する意味をお話しします。 二番目に実装のお話し、最後にReact Helmetで遷移管理するお話しをします。
- まずはマイクロサービスの設計のお話しをします。ASP.NET Core web appでマイクロサービスを作るときの注意点として、サービスはステートフルで、ページはステートレスであるべきですというお話をします。 続けてReactを使うことでASP.NET MVCで扱う取り回しの良いモデルをエッジ側で型解決する話をします。これはステート管理の話でなく、型解決の話になります。そもそもASP.NET MVC web appでは、controllerとchtml間で型解決できています。これはサービスサイドでモデルレンダリングをしてエッジ側に渡しているからです。渡された後にエッジ側でモデルに対して何かしらの操作をしたい場合、またそれをサービス側に渡したいというシーンはリアルビジネスの中では当たり前のように必要です。これにはJavaScriptオブジェクトにするかBlazorのようなWebassemblyにする必要があります。今回は、JavaScriptモデルとサービスサイドのASP.NET MVCのモデルの連携をお話しします。 マイクロサービスの最後では、ステートレスなSPAのステートを管理するためにサービスサイドのステートフル・ミドルウェアをASP.NET MVCで構築する話をします。
- 永続化層【クリック】をステートマシンにすることなくスケーラブルで変更に強いソリューションを作る場合は、【クリック】何かしらの各ファンクションがサービスファブリックやサービスファブリック・メッシュのようなマイクロサービス基盤で稼働して、それぞれの永続化層に業務ステートに依存することのないIOを行うように設計すると思います【クリック】。これはマイクロサービス設計時のパターンアンドプラクティスです。この.NETラボでは何回かお話ししていますが、まだ読まれていない方は本資料の巻末のリンクに、マイクロソフトリサーチのバーチャル・アクターパターンのレポートがありますのでぜひご一読ください。【クリック】
- 問題解決領域ではステート管理は必須ですが、Webサービスとエッジ側UIの間はステートレスにする必要があります【クリック】（これはWebアプリを設計する際のパターン&プラクティスです）。こちらも巻末にリンクを載せています。Mediumの「Design patterns for modern web APIs」という記事ですが非常によくまとまっています。【クリック】 これを両立させるため、Restful APIやステートフル・ミドルウェア【クリック】という選択が行われるわけですが、ASP.NET MVCで取り回しの良いモデルを使っていてもエッジ・サイドのWebページでそのモデルが使えなければ不便です【クリック】。【クリック】
- ASP.NETはサービスサイド・モデルレンダリング（この場合はシリアライズです）によって型解決を実現しています。エッジ・サイドにはBlazorという選択肢（この場合WebAssemblyでデシリアライズすることになりますね）がありますからどちらを使ってもかまいません。私はさまざまなソリューションの設計を評価する場合、トランザクション境界【クリック】に対して型解決とステート管理の2つをどのように設計しているか？で品質を評価します。つまり、どの技術や基盤を使っているかに関係なく、この2つの設計がソリューション内で統一されており変更に強い設計になっているかを評価します。【クリック】 本日はこのステートレスなWebページに対して、ASP.NET MVCのモデルとReactのモデルが業務のステートをどのように転送していくかという話をします。その話の中で型解決とステート管理の2つの側面でお話しします。
- ではReactの概要からお話しします。 ReactJS.NETは、ASP.NET MVCの型解決を実現してくれます。ASP.NET MVCの型をJavaScriptで扱うということを行います。エッジ側はJSXで実装できるためJavaScriptのモデル（ASP.NET MVCのモデルがエッジ側Webページに伝搬したもの）とHTMLを作成、保守する際に可読性が向上します。この可読性の部分についてはRazor構文やBlazor構文と同じ効果を期待できます。 一方、React HelmetはページのHEAD部分を管理する際に利用できます。ASP.NET MVCでも_Layout.chtmlにViewBagを渡すことができますので、HEADタグに異なる値を動的に割り当てることができます。ここで注意が必要なのは、今回の設計の基本はあくまでステートレスなWeb UIの作成の話であり、_Layout.chtmlをステートマシンにするわけではない（セッションステートを使うわけではない）ことに注意してください。SPAのステートマシンについては後述します。ReactはあくまでSPAの実装に使います。
- ReactJS.NETのテンプレートには代表的なものとしてVanillaとWebpackがあります。VanillaはASP.NET Core MVCの基本的なテンプレートで、WebpackはReactJS.NETのサービスサイドのモデルレンダリング版です。ルーティング機能やリンク生成機能も含みます。ですからASP.NET MVCとRazorの組み合わせと同じです。C#を書きなれている方は、わざわざWebpackを選択する必要はありません。JavaScriptでサービスサイドのルーティング、リンク生成、モデルレンダリングとページレンダリングを行いたい人向けです。ステート管理については別のフレームがありますので、後でご紹介します。
- dotnetのSPAテンプレートはほかにもありますので、「dotnet new -l」で確認してみてください。
- エッジサイドのモデルとサービスサイドのモデルのタイプリゾルビングにはこのような種類があります。本日はReact Helmetのお話しをしたいのでReact Webpackテンプレートを利用してサンプルを作成していきます。React HelmetはHeadタグを生成するので、サービス側でHTMLをレンダリングします。
- 本日のお話のもう一つのテーマであるステート管理についてお話しします。ステートフル・ミドルウェアとして利用できるいくつかのJavaScript用のステート・マネージメント・フレームワークがあります。今回は、ステートマネージメント自体を説明したいので、これらのフレームワークを使わず、React HelmetとASP.NET Core MVCを使ってステートマシンを作成していきます。
- React、Vue、Angularなどのエッジ・サイドのモデルレンダリング・アーキテクチャは、目的の一つとしてSPA（Single Page Application）によってViewのプレースホルダーとそこに表示するデータ（これはモデルによって渡されるのが本来の姿）を分離することで、わざわざViewの再構築のためだけにサーバーとの通信を行うことを避けたいという意図があります。 Viewの再構築とは、たとえば問題解決領域のサブドメイン・スコープでページの一部だけ書き換えたいときなど、サービス・サイドのデータを表示している部分があるページではページ全体を読込することはしたくないわけです。だからと言って、インターネットにあふれているサンプルのように1ページだけで業務の複数のサブドメイン・スコープが完結するようなWebアプリはこの世の中にありません。 単なる映画チケットの購入であっても4つのSPAでサブドメイン・スコープを分離する必要があり、4つのSPAのステートを管理する必要があります。 本来であれば、このほかにもポイントや会員特典、特別上映会や舞台挨拶などの制御についてステート管理が必要になると思います。
- たとえば、この2つのSPAを例にしてモデルの転送を考えてみましょう。会員登録の際の個人情報の入力と確認は同じページで表現できます。つまりモデルは同じです。ではモデルのステータスを管理する必要があるかどうかというと、必要ありません。入力ボックスが必要なのかラベルのように表示するかだけかのビュー・ステートであり、登録完了までは画面遷移する必要もサービスと通信する必要もありません。エンドユーザーが入力途中のものを保存してあげるといったユーザビリティの向上については、サービスとの通信は必要かもしれませんが、これはステートの管理ではありません。 このビュー・モデルと永続化モデルの考え方は、XAMLやBlazorのバインドの考え方と同じです。ステートフル・ミドルウェア内のビュー・モデルとマイクロサービスが永続化するモデルは必ずしも同じではありません。必要のないプロパティをステートマシン内で持ち歩く必要がないように作成することは、永続化層にステートを持ち込まないマイクロサービスの基本的な考え方であり、これにより永続化層とのIOは低減されます。
- 映画の選択時に初めてステート管理が必要になります。ログインしているかどうか、会員番号と映画（タイトルまたは映画の作品IDとスクリーン）、日時が紐づいているというステータスが生成されます。このステートは座席選択のマイクロサービスへと引き継がれます。 したがって、ステート管理とビューステートを混同することなくステートマシンを設計する必要があります。
- では実際にプログラムを作っていきましょう。プログラムの部ではテンプレートで作ったプロジェクトに変更を加えていきます。ASP.NET MVCでステートマシンを作りますので、ログインのステートを管理するナビゲーションバーを作っていきます。OAuthログインフローとMicrosoft Graphは最も小さなマイクロサービスであることを確認します。この際にルーティングについても言及します。
- 開発の準備は非常に簡単で「dotnet new reactnet-webpack」で大丈夫です。
- ただ、現在（2020/7/9時点）ではnpm がcode 2で終了します。Vanillaの方は問題なくデバッグの「ReactDemo」で正常にデバッグできます。
- うまく動かない場合はVisual Studioの環境も一度確認してみましょう。ツールのオプションから「プロジェクトおよびソリューション」の「Webパッケージの管理」-「外部Webツール」のパスも確認してみてください。
- それでもうまく動かない場合はGitHubからダウンロードしてデバッグ実行しましょう。動くことが確認出来たらソリューションの構成を確認します。
- Reactは、サービス側からモデルによって渡されたデータとビュー要素がまとめられたコンポーネントを作成していくアーキテクチャです。【クリック】これをJSXで定義していきます。Webpackのテンプレートには、すでにHelmetも入っていますのでReact.Core名前空間のReactHelmetFunctionsをnewすると機能をそのまま利用できます。【クリック】 HelmetはHTMLページのHEADタグを動的に変更するものなので、サービスサイドでページレンダリングする技術です、そのためReact Routerの機能も入っていて、進む戻る、リンク遷移、サーバーリダイレクトなどのルーティング、ナビゲーション機能を持っていますが、今回はルーティングをASP.NET MVCに変更しASP.NET MVCをステートマシンにします。 ASP.NET MVCが使うモデルはステートを表すものでModelsフォルダを作成し、その中にまとめます。ビューモデルはjsxに、永続化モデルはModelsフォルダの各csファイルに定義するように作成します。
- ステート管理としては、各マイクロサービスとして分離したサブドメインが利用するステートを用意しておきます。これらは永続化されるデータの入れ物になります。モデルに関しては詳細を後述しますのでここではサービスサイドのモデルは永続化用モデルであり、ページが利用するモデルはビュー用のモデルであるということを理解してください。
- ログインを管理しますので、まずはログインのインターフェイスを作っていきます。これは簡単にHomeコントローラーのIndexアクションでViewBagにログイン状態を入れてあげるという1行とindex.chtmlのコンテンツをBody要素として表示する共通のコンテナとなる_Layout.chtmlにナビゲーションバーを作ってやるだけです。
- この_Layout.chtmlの画面写真ではSVGの部分は閉じてますが、詳細は私のブログに書いてありますのでご興味のある方はご参照ください。 コードは、サインインしてなかったらログイン用のSVGを表示してやるという内容が書いてあります。
- すべてのブランドはオフィシャルのブランドリソースがありますので、Method DrawでSVGを作る場合規約に則った描き方をしてください。 こちらはFacebookとGoogleです。
- AmazonとMicrosoft
- すべてのブランドはオフィシャルのブランドリソースがありますので、Method DrawでSVGを作る場合規約に則った描き方をしてください。
- サインインに関しては、SPA用のライブラリをMicrosoftが提供していますので使ってください。ただし、今回はSPAとWebpackを混在してソリューションを構成していますので、これらは使わず自作します。というのも、このMSAL（Microsoft Authentication Library）はサインイン状態のキャッシュなども管理できますので、サインイン状態をステート管理する今回のアプリケーションでは使えません。キャッシュと永続化するステートを同期させる必要があり、費用対効果を考慮すると自作した方が良いからです。
- 【読む】こんな感じのプログラムを作っていきます。ここで意識していただきたいのは、ログインするアカウントを永続化しているのはMicrosoft Azure Active Directoryであること、その認証を使ってユーザー情報を引き出すのはMicrosoft Graph APIだということです。Microsoft Graph APIは認証状態のステートをトークンによって確認し、確認後Azure Active Directoryを含めOffice 365 の各種リソースを返します。つまりマイクロサービスのステートフル・ミドルウェアの実装の一例と言えます。早速実装していきましょう。
- 今回はHelmetでヘッダーを操作すること、つまりサービスサイドのページレンダリングが目的ですのでReact Routerの機能は使いません。 まず、ルーティングをMVCに変更します。Endpointでのルーティングではなく、MVCのルーティングを使うことをStartup.csに定義します。Webpackが設定したConfigure内のUseRoutingとUseEndpointsをコメントアウトしてあります。代わりにASP.NETでおなじみの設定ですが、default名にControllerとActionを設定します。 この際、サービス追加時にオプションを追加するように警告にて促されますのでAddMvcにオプションを追加します。
- アカウントコントローラーを追加してSignInアクションをvoidで追加します。SignInアクションではAzure Active Directory Endpointにリダイレクトさせるだけです。実行してAuthorizationコードがアドレスバーに返ってきていることを確認します。
- Codeを受け取れることがわかったら、HomeコントローラーのIndexアクションでそれを使ってトークンを取得する部分を作成していきます。 Azure Active Directory ApplicationにリダイレクトURLを登録してありますので、Indexアクションの中でcodeを受け取れるわけです。 Microsoft Graph APIにaccess_tokenを受け取るリクエストを送って、受け取ったaccess_tokenでサインインボタンの部分にディスプレイネームを表示するようにViewBagに格納します。
- Azure Active Directory Endpointは、Authorizationコードを受け取って該当の組織で認証されたことを確認出来たら該当の組織で有効なトークンを発行します。プログラムはトークンを取得したらMicrosoft Graph APIに対して自分のプロフィールを要求します。この際、プログラムは誰がログインしているか？を知る必要はありません。認証したユーザーにとっての「自分のプロフィール」を取得します。
- Microsoft Graph APIが返却する型を用意しておくと、JsonSerializerでクラスにデータを格納することができますので、そのまま保存することもできます。ただし、OAuthは認証と承認を分離するところに意味がありますので、このクラスを包含するApplication Userクラスを作って、それをプロパティとして持つログインモデルを作ります。このログインモデルをシリアライズして永続化層に保存することでログインステートを管理できます。
- 保存はDBなどにすると思いますが、ここでは簡単にTextファイルに保存しています。これを行うために2つの作業が必要になります。 まず、ファイルを読み書きする部分を作成します。【クリック】DataAccessLayerというファサードを作ってアプリケーションの外部入出力部分を定義します。インスタンスの際に.NET Coreが提供する物理ファイルのプロバイダーを使ってステートを保存するファイルをURLで指定します。IOの際は、そのファイルインフォの物理パスにストリームライターで読み書きします。 次に、アプリケーションのStartUpでWebから静的なファイルを扱えるように変更します【クリック】
- Startup.csにUseStaticFilesを追加します。ここではwwwrootのcontentsフォルダを扱えるようにしています。
- ReactJS.NETはASP.NETの知識とReactの知識の両方を理解していると非常に作業効率があがるフレームワークです。そこで、ここではページ表示までの流れをお話しします。 まず、ASP.NETはStartUp.csによってConfigurationを設定します。ConfigurationではNugetでインストールされたパッケージ「React.AspNet」を使うようにIServiceCollectionにAddReactが定義してあり、IApplicationBuilderにUseReactを実行することでwebpack.config.jsが読み込まれます。Webpackの構成ファイルでは
- エントリーポイントでは、globalキーワードを使って利用するすべての名前空間をグローバルスコープに読込むように定義してあります。この際にRootComponentとしてhome.jsxを定義してあります。
- ルートコンポーネントではHelmetの機能や遷移するすべてのページを読み込むことでSingle Page Applicationを実装しています。ただし、今回のサンプルではReact.Routerを使わないので遷移はしません。これでASP.NETからReactを呼び出す準備ができています。
- ASP.NETからはエッジ側からの利用を行います。Webpackはサービス・サイドのレンダリングではありますが、コントローラーから提供するのはモデルぐらいです。サンプルにはページ遷移時のステート管理の例も示されていますので参考にしてください。今回はSPAでマイクロサービスを構成するのでページ遷移時のステート管理はコメントアウトしてあります。 エッジ側はMVCのルーティングによってindex.chtmlが呼び出されます。
- Index.chtmlでは、_Layout.chtmlを使うように指定しています。そのため、Headタグは_Layout.chtmlにあります。【クリック】 _Layout.chtmlはASP.NETのHTMLヘルパーでViewBagで渡された値をヘッダタグ内に追加しています。 ViewBagにはindex.chtmlでhelmetFunctionsの「style」の値を設定しています。単にaddするのではなくremoveしてからaddしています。重要なことは、ヘッダを定義している_Layout.chtmlではなく、index.chtmlでHEADタグを設定していることです。この部分はもちろんASP.NETのActionでViewBagに値を入れることができます。一人で作成している場合はいいのですが、チームで作業分担している場合、chtml側でページの共通部分のデザインをコントロールできることは大きなアドバンスです。共有ページである_Layout.chtmlの構成を変更せずに各ページ専用のCSSを使えます。チーム開発では、このような作業分担はプロダクティビティに影響します。特にAtomic Designを意識したチーム開発では威力を発揮するコンポーネント分割設計の基本概念です（巻末参照）。また、別の指定方法もあります。【クリック】
- ルーティングはMVCにしてありますからSwitchタグのところは動きませんが、サンプルではcomponentにHomePageという部品を作ってHelmetタグでタイトルを指定しています。
- 一般的な例ではタイトルを差し替えるといったことを行います。ただし、タイトルの差し替えではあまり有効性を実感できないと思います。ReactHelmetFunctionsはheadタグの“base”, “bodyAttributes”, “htmlAttributes”, “link”, “meta”, “noscript”, “script”, “style”, “title”を変更することができます。 WebpackのサンプルではViewBagを使った値の共有の例もありますので、title以外ののエレメントもHeadタグに追加することができます。ただし、ViewBagを使った例であってもReactHelmetFunctionsを値の入れ物にしておくことで、Reactのrenderによって正しいサービス・サイドでのページ・レンダリングを行うことができるようになります。たとえば、次のようなことをできます。【クリック】
- ログインによってナビゲーションバーのスタイルを変更している例です。また、映画のチケットを購入する際のページ遷移は一方向に前後するページ遷移が必要になり複数ページで購入が完了しますから、Headタグのlink rel=”next”とrel=”prev”によってSPAの独立性、原子性を保ちつつマイクロサービスによる拡張性の高いソリューションを構築することができます。
- 表示結果とHTMLはこんな感じになります。
- こちらがログインしていない状態です。
- ログインするとログインのステートを保存するようになっています。今回のサンプルはテキストファイルにしています。この際使用するモデルはMicrosoft Azure Active Directory Endpointから提供される永続化している認証用のAzure Active Directoryのモデルを作っています。各ブランド（MicrosoftやFacebookなど)共通に「id」を持ったクラスを用意し、それを継承して各ブランドのモデルを作っています。このモデルは認証用のモデルなので、承認用のモデルは別途作成します。
- ログインするとログインのステートを保存するようになっています。今回のサンプルはテキストファイルにしています。この際使用するモデルはMicrosoft Azure Active Directory Endpointから提供される永続化している認証用のAzure Active Directoryのモデルを作っています。各ブランド（MicrosoftやFacebookなど)共通に「id」を持ったクラスを用意し、それを継承して各ブランドのモデルを作っています。このモデルは認証用のモデルなので、承認用のモデルは別途作成します。
- これは特に推奨しませんが、各マイクロサービスは本来であれば利用時に認証します。Google cloudではCloud Endpointにその機能があり、AWSではAPI Gatewayで実装します。AzureにはAPI Management Serviceがあるので同じことができます。ここではマルチブランド認証を実装していますので、スコープ正しいスコープを持っていないトークンはAPIを機能を実行できないようにアクセスリストのモデルを作っています。
- ボタンが押下されたらAccountコントローラーのSignInアクションを呼びます。SignInアクションではブランドに応じた認証エンドポイントにリダイレクトします。各ブランドのエンドポイントに設定してあるアプリケーションには、認証後HomeコントローラーのIndexアクションに認証コードを返すように設定してあります。 ポイントはEnvironment.SetEnvironmentVariable(“TargetBrand”, brand)で選択されたブランドを保持しておきます。
- Indexアクションではcodeの有無を確認します。コメントアウトしてありますがstateも確認してください。コードでtokenを取得します。アカウントコントローラーで保持していたターゲットブランドごとに認証エンドポイントを変えています。
- 認証エンドポイントから得たトークンでMicrosoft Graph APIからユーザー情報を取得します。 ポイントは、トークンとスコープ、認証エンドポイントのユーザー情報とアプリケーションユーザーをセットにしたモデルをファサードで保存しているところです。 new DataAccessLayer().SetStateManagement<LoginModel<FBGraphUser>>(loginState)部分になります。
- JWTは簡単にデコードできますので名前を表示する今回のサンプルではMicrosoft Graph APIに問い合わせる必要はありません。しかし、FacebookのトークンはJWTではありませんので取れません。また、この方法（Azure Active Directory Endpointで認証した情報をMicrosoft Graph APIで承認されたリソースを使う方法）こそがステートフルミドルウェアの最も簡単な例になります。
- ファサードではファイルの内容を確認して、取得してデシリアライズしてIDで確認してリストを更新、シリアライズして保存します。