「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>Flutter]] --...[[Flutterの5thステップ]] --[[Flutterのファースト・ステップ2]] --[[Flutterのセカンド・ステップ2]] --Flutterのサード・ステップ2 *目次 [#g1dc9c7a] #contents *概要 [#mc2d02da] OAuth系認証・認可処理を実装し、序にReduxっぽい仕組みを導入。 *詳細 [#u588d16a] [[以前のバージョンではAppAuthで認証処理を実装していたが>Flutterのセカンド・ステップ#t89cc4af]]、~ Windowsデスクトップ版を実装するにあたり問題が発生して、自前実装が必要になった。 **カスタムURLスキーム [#ud464fdb] Windowsデスクトップ版でというのがポイント ***EXEの位置 [#r0b5cb7c] 以下の辺りにEXEがある。 \flutter_template\build\windows\x64\runner\Debug ***レジストリ登録 [#f47c687f] -登録内容~ myapp.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\myapp] @="URL:myapp Protocol" "URL Protocol"="" [HKEY_CLASSES_ROOT\myapp\shell\open\command] @="\"(絶対パスを記入)\\FrontendTemplates\\UI\\XPlat\\flutter_template\\build\\windows\\x64\\runner\\Debug\\my_app.exe\" \"%1\"" -各処理(PowerShell) --登録~ myapp.regをダブルクリック --テスト start myapp://test --解除 reg delete "HKEY_CLASSES_ROOT\myapp" /f ***ハンドラ [#he5a0ec1] **インストール [#haf755e2] ***shared_preferences [#d55cba80] Flutterでローカルストレージ的な機能を使用する。 flutter pub add shared_preferences ※ 既出だが、再掲。 ***flutter_secure_storage [#xc302598] Flutterでセキュアなローカルストレージ的な機能を使用する。 flutter pub add flutter_secure_storage ※ 一度、shared_preferences で提案されたコードを置き換える。 ***crypto [#rc46caba] 認可リクエストでSHA256が必要になる。 dart pub add crypto ***url_launcher [#ke0fdd66] Flutterからブラウザを起動する。 flutter pub add url_launcher ***app_links [#te3a3dfa] FlutterからカスタムURLスキームを処理する。 flutter pub add app_links **移行 [#e2b04299] **スクラッチ実装へ移行 [#e2b04299] ***共通関数 [#fe64fb92] 結局、まるッと移行した(AppAuthからスクラッチ実装に変更したたタメ)。 -移行元 --https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/vite-react-ts/src/touryo/common.ts --https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/vite-react-ts/src/touryo/oauth_oidc.ts -移行先 --https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/XPlat/flutter_template/lib/touryo/common.dart --https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/XPlat/flutter_template/lib/touryo/oauth_oidc.dart ***認証リクエスト [#m116730d] 方式としては、Reactと同じ様に、ヘッダーのSignIn要素定義ファイルに処理を実装した。 -移行元:https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/vite-react-ts/src/components/SignIn.tsx -移行先:https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/flutter_template/lib/widgets/sign_in.dart ***認証レスポンス [#i90ae3b5] 方式としては、カスタムURLスキームなのでmain.dartに処理を実装した。 -移行元:https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/SPA/React/vite-react-ts/src/components/RedirectOfAuth.tsx -移行先:https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/XPlat/flutter_template/lib/main.dart -追加:https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/XPlat/flutter_template/lib/touryo/auth_state.dart ※ ポイントとしては、 -Windowsのシングル・インスタンス対応 -Router・RedirectOfAuthを使用せず -トークン取得完了をSignInウィジェットへ通知する処理を追加。 **Redux風 [#t9f36cac] 通知処理の実装でRedux対応を思い出した。Flutterの選択肢は複数あるが調査の結果、Riverpodを選択。 ***インストール [#hd96017e] ValueNotifierはプリミティブ型のみだが、NotifierProviderはオブジェクトを対象にできる。 flutter pub add flutter_riverpod ***追加の定義 [#j945e514] https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/flutter_template/lib/riverpod ***処理の変更 [#da3b7f18] -https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/XPlat/flutter_template/lib/screens/about.dart -https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/XPlat/flutter_template/lib/screens/counter.dart -https://github.com/OpenTouryoProject/FrontendTemplates/blob/develop/UI/XPlat/flutter_template/lib/screens/crud_sample.dart *参考 [#v0d77f1a] -FrontendTemplates/UI/XPlat at develop · OpenTouryoProject/FrontendTemplates~ https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/ --https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/flutter_template --https://github.com/OpenTouryoProject/FrontendTemplates/tree/develop/UI/XPlat/old/flutter_template