「[[.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

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS