「[[Open棟梁 wiki>https://opentouryo.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>汎用モバイルバックエンド(Multi-purpose Mobile Backend)]] *目次 [#d45dade4] #contents *概要 [#n898ab85] -[[汎用モバイルバックエンド>汎用モバイルバックエンド(Multi-purpose Mobile Backend)]]のフロントエンド実装。 -OAuth2 / OIDCアーキテクチャのPublic Clientのテンプレート **内容 [#o467547d] フロントエンド系のテンプレート **ニーズ [#h362693e] ***機能的ニーズ [#i665e281] スマホ向けの小画面で -優れたUXが求められている。 -WebAPI経由で、 --SoRの一部機能を提供する。 --または、Native情報を提供する。 -その際、認証が重要になる。 -一部、ネイティブ機能が利用できる。 ***技術的ニーズ [#q8cfa37e] -npm文化圏の慣習を理解、 -フロントエンド・アプリ --...の [[Nativeアクセス>#ya863eba]] --...との [[OpenID認証連携>#d8577a2d]] -生産性向上~ 適合するスタックのテンプレートがあれば、~ 開発の参考にして生産性を上げることも可能。 *機能 [#i58f6ff8] **Nativeアクセス [#ya863eba] ***SPA [#e8fd24ac] なし ***Hybrid [#c45a4f24] 以下のアクセス権がある。 -プラグインでサポートされた範囲のアクセス権 -若しくはサンドボックス環境でのアクセス権 ***Native [#fe4da5d6] インストール時の要求が許可された範囲のアクセス権がある。 ***機能 [#n884f11e] -プッシュ通知~ プッシュ通知サービスと連携 -地理位置情報~ GPSサービスと連携 -CodePush --審査不要のコード更新機能。 --CordovaとReact Nativeをサポートしているらしい。 **OpenID認証連携 [#d8577a2d] フロントエンドの認証のニーズは高いと思われる。 -OpenIDは流行っている --Okta、Auth0 --AzureAD、Firebase -VS tools for Cordovaのpluginのトップも、ADALになっている。 -また、以下のような、Webページも存在するので、 --Androidアプリ → ブラウザ起動 → WEBサイトでサインイン処理~ → URLスキームでアプリを再起動、そして指定したActivityに戻ってくる方法 - Qiita~ https://qiita.com/f-aoyama/items/07ecbefa54eefd62406d ***UXの統一 [#m6d77eca] すべての認証を[[汎用認証サイト>汎用認証サイト(Multi-purpose Authentication Site)]]経由で行う。 -アプリ --Webアプリ --スマホ・Native or Hybrid -プロトコル --OAuth2.0 --OpenID Connect --Financial API (FAPI) -プロトコル・フロー --%%Implicit Flow%% --%%Hybrid Flow%% --OAuth PKCE --OAuth PKCE + Fragment ***セキュリティ要件 [#a3327ce6] 標準的なセキュリティ要件を満たす。 -[[UserAgentでOAuth2のTokenを取得するベスト・プラクティス - マイクロソフト系技術情報 Wiki > スマホ>https://techinfoofmicrosofttech.osscons.jp/index.php?UserAgent%E3%81%A7OAuth2%E3%81%AEToken%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%83%99%E3%82%B9%E3%83%88%E3%83%BB%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9#m0aacf50]] ***その他 [#g7e51225] -Tokenの保管方法 --Web Storage: セッショントークンのマシな手段~ cookieとセキュリティ面を比較してみる | インフラ・ミドルウェア | POSTD~ http://postd.cc/web-storage-the-lesser-evil-for-session-tokens/ **様々なバックエンドと連携 [#q3f7e30b] ***Frontendホスト [#j2316327] -MPAやSPAをホストするバックエンド -認証におけるConfidentialクライアント ***IdMaaS機能 [#laed323f] -認証・決済, etc. -[[汎用認証サイト>汎用認証サイト(Multi-purpose Authentication Site)]]と通信 ***mBaaS機能 [#xbe41168] -プッシュ通知, ストレージ提供, etc. -[[Resource Serverテンプレート]]と通信 *物件 [#x0cfc45a] v02-30でリポジトリを新設しました。 -[[FrontendTemplates>https://github.com/OpenTouryoProject/FrontendTemplates]] · [[GitHub>https://github.com/]](repository)~ https://github.com/OpenTouryoProject/FrontendTemplates >各種フロントエンド用のテンプレートです。このテンプレートを使用してフロントエンド開発プロジェクトを迅速に立ち上げることができます。~ (These are templates for various front ends. You can use this template to quickly launch front-end development projects.) **Node.js系 [#ueb5c069] ***[[SPAテンプレート]] [#r7a90308] ***[[Hybridテンプレート]] [#qc93ff2f] ***[[Nativeテンプレート]] [#o786d922] **レガシー [#efa3af41] ***UWP [#s1fc4fd7] https://github.com/OpenTouryoProject/FrontendTemplates/tree/master/Native/UWP_sample ***ASP.NET MVC SPA [#q70c0490] https://github.com/OpenTouryoProject/FrontendTemplates/tree/master/SPA/Legacy/SPA_Sample -Knockout.js~ https://github.com/OpenTouryoProject/FrontendTemplates/tree/master/SPA/Legacy/SPA_Sample/SPA_Sample/Views/Crud1 -AngularJS~ https://github.com/OpenTouryoProject/FrontendTemplates/tree/master/SPA/Legacy/SPA_Sample/SPA_Sample/Views/Crud2 *参考 [#u3a74833] **OSSコンソーシアム [#r463ceb5] -新設されたFrontendTemplateリポジトリの紹介~ https://www.osscons.jp/joex3y5gs-537/#_537