- 追加された行はこの色です。
- 削除された行はこの色です。
「[[Open棟梁 wiki>https://opentouryo.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>機能一覧]]
-[[戻る>Hybridテンプレート]]
--Cordovaテンプレート
--[[PWAテンプレート]]
*目次 [#de0c19a8]
#contents
*概要 [#qb3b638f]
v02-20でリリース予定。
企画倒れ(Flutterへ)
**内容 [#c65fb68b]
-Apache Cordovaのテンプレート
-通常のWebアプリケーションやSPAアプリケーションをホストする。
-[[Cordova (PhoneGap)>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29]]のテンプレート
-任意のSPAアプリケーションをホストする。
**ニーズ [#g591527d]
-フロントエンドとして、優れたUXを提供するハイブリットアプリが求められている。
-既存のWebアプリにスマホ・ネイティブ機能をプラグインさせたい。
-そんな、ハイブリットアプリを迅速に開発可能にするCordovaテンプレート
-mBaaS機能(認証・決済・ストレージ, プッシュ通知, etc.)と連携して素早いmobileアプリケーション開発が可能。
-OAuth2/OIDCアーキテクチャへの準拠
-各種[[Nativeアクセス(plugin)>#jb210b87]]検証
-テンプレート化
*機能 [#n924e654]
**ホワイトリスト [#q1dfdf6a]
Cordovaの機能にある。
*詳細 [#b59c8265]
**ネイティブアクセス(プラグイン) [#jb210b87]
Cordovaの機能にある。
**機能 [#n924e654]
***プッシュ通知 [#j1b9f032]
-phonegap-plugin-push
-プッシュ通知サービスと連携
***適切な設定 [#k8528288]
***地理位置情報 [#xbad2a0d]
-cordova-plugin-geolocation
-GPSサービスと連携
-ホワイトリスト~
「[[標準的plugin>#v74e9f3b]]」にある。
**認証 [#r9eeaedc]
VS tools for Cordovaのpluginのトップも、ADALになっている。~
また、以下のような、Webページも存在するので、この辺のニーズは高いと思われる。
-Androidアプリ→ブラウザ起動→WEBサイトでログイン処理~
→URLスキームでアプリを再起動、そして指定したActivityに戻ってくる方法 - Qiita~
https://qiita.com/f-aoyama/items/07ecbefa54eefd62406d
***OAuth2.0、OpenID Connect [#rf255654]
[[汎用認証サイト>汎用認証サイト(Multi-purpose Authentication Site)]]と連携して、OAuth2.0、OpenID Connectでサインイン。
***外部ブラウザ選択してサインイン [#w31f786d]
-パスワード・マネージャーに依存していることが多いので、認証時に外部ブラウザ選択可能にする。
-この機能は、ほぼサーバー側に実装が必要になるので、SPAサンプルにこの実装を追加する。
-ログイン前
--ログイン画面
---[[ログイン画面で当該URLで外部ブラウザを開くリンクを表示>#k90aabe3]]する(QueryStringにflagを追加)。
---このリンクで、外部ブラウザ選択して開き、ログイン画面を再表示する。
--認可エンドポイント
---ログイン完了後、認可エンドポイントで、QueryStringのflag情報をClaimに格納する。
---認可エンドポイントを通過して、redirectエンドポイントに遷移する。
-ログイン後
--redirectエンドポイント(response_type=code)
---サーバー側でcodeをaccess_tokenに変換、access_token中のflagを確認。
---flagがある場合、Redirectで[[外部ブラウザからネイティブ(ハイブリッド)に戻る>#x3de6a6c]]
--redirectエンドポイント(response_type=token)
---クライアント側でaccess_token中のflagを確認。
---flagがある場合、JavaScriptで[[外部ブラウザからネイティブ(ハイブリッド)に戻る>#x3de6a6c]]
***適切な設定 [#k8528288]
-[[Content-Security-Policy>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Content-Security-Policy]]
*サポート [#e90956c0]
-, etc.
**デプロイ、ストア登録手順の整備 [#f4c883a9]
***[[Nativeアクセス(plugin)>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20-%20Plugin#fde779ca]] [#jb210b87]
***Android [#t895ac39]
**サポート [#e90956c0]
***iOS [#f679addd]
***[[標準的pluginの検証>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20-%20Plugin#yb1ec323]] [#v74e9f3b]
**標準的?プラグインの検証 [#v74e9f3b]
***[[デプロイ、ストア登録手順の整備>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E3%82%B9%E3%83%9E%E3%83%9B%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4]] [#f4c883a9]
-既定で有効
--cordova-plugin-whitelist
-[[How to>#j607d396]]
--cordova-plugin-inappbrowser
--cordova-plugin-customurlscheme
*How to [#j607d396]
**UserAgentを書き換える。 [#l5954d08]
-config.xmlに設定ができる模様。
--OverrideUserAgent
--AppendUserAgent
-WebView内部で開く必要がある。
-実機の際は、以下のサイトを活用できる。
--アクセス情報一覧表示(IP,UserAgent,ブラウザ情報等) - PC雑記帳~
https://zakkiweb.net/tools/accessinfo/
**リンクを外部ブラウザで開く [#k90aabe3]
cordova-plugin-inappbrowserというプラグインが利用できそう。
-既定では、
--httpが無いとWebView内部で開く
--httpが有ると外部ブラウザで開く
-cordova-plugin-inappbrowserを利用すれば、~
↓で、httpがあってもWebView内部で開く。
window.open ('https://google.com ', '_self ');
--なお、以下のanchorタグではWebView内部で開かなかった。
<a href="http://www.google.com/" target="_self">LINK</a>
--window.openが必要だが、[[Content-Security-Policy>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Content-Security-Policy]]でハマる。
***参考 [#if0819fc]
-PhoneGap/Cordovaでの外部サイトリンク 内部表示/アプリ内ブラウザ/標準のブラウザ - Qiita~
https://qiita.com/tsunet111/items/272f3e052c332ddf9b9d
**外部ブラウザからネイティブ(ハイブリッド)に遷移 [#x3de6a6c]
cordova-plugin-customurlschemeというプラグインが利用できそう。
-Custom URL Schemeで外部ブラウザからネイティブ(ハイブリッド)に戻れる。
-ネイティブ(ハイブリッド)側から、外部ブラウザで指定したURLを取得可能。
-以下のParameterをURLを使用して受け渡す。
--Token
--ReturnUrl
***参考 [#m0bdd50b]
-cordova-plugin-customurlscheme
--Cordova tips - Custom URL scheme に対応させよう | phiary~
http://phiary.me/cordova-tips-custom-url-scheme/
---pluginを追加する。
cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=hoge --save
---urlを受け取る。
function handleOpenURL(url) {
setTimeout(function() {
alert("received url: " + url);
}, 0);
}
-EddyVerbruggen/Custom-URL-scheme:
--Launch your Cordova/PhoneGap app by a Custom URL scheme like mycoolapp://~
https://github.com/EddyVerbruggen/Custom-URL-scheme
<gap:plugin name="cordova-plugin-customurlscheme" source="npm">
<param name="URL_SCHEME" value="XXXX" />
</gap:plugin>
--Plugin won't install via Visual Studio · Issue #215~
https://github.com/EddyVerbruggen/Custom-URL-scheme/issues/215
<vs:plugin name="cordova-plugin-customurlscheme">
<param name="URL_SCHEME" value="XXXX" />
</vs:plugin>
*参考 [#d342b880]
**osscons.jp [#u3e64709]
***マイクロソフト系技術情報 Wiki [#k10ada62]
-Visual Studio+Apache Cordova~
https://techinfoofmicrosofttech.osscons.jp/index.php?Visual%20Studio%EF%BC%8BApache%20Cordova
--Cordova Tools Extension~
https://techinfoofmicrosofttech.osscons.jp/index.php?Cordova%20Tools%20Extension
--Visual Studio Tools for Apache Cordova~
https://techinfoofmicrosofttech.osscons.jp/index.php?Visual%20Studio%20Tools%20for%20Apache%20Cordova
***.NET 開発基盤部会 Wiki [#d1d53d6e]
-mBaaS~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?mBaaS
-UserAgentでOAuth2のTokenを取得するベスト・プラクティス > スマホ~
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
--認証基盤~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E8%AA%8D%E8%A8%BC%E5%9F%BA%E7%9B%A4
***開発基盤部会 Wiki [#d1d53d6e]
-スマホ~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E3%82%B9%E3%83%9E%E3%83%9B
--外部サービス連携
--ハイブリッドアプリ~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E3%83%8F%E3%82%A4%E3%83%96%E3%83%AA%E3%83%83%E3%83%89%E3%82%A2%E3%83%97%E3%83%AA
---オンライン決済サービス~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E6%B1%BA%E6%B8%88%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9
---Cordova (PhoneGap)~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29
---プッシュ通知~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5%E9%80%9A%E7%9F%A5
---位置情報(GPS)~
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E4%BD%8D%E7%BD%AE%E6%83%85%E5%A0%B1%EF%BC%88GPS%EF%BC%89