KobayashiYoh
commented
2 years ago 補足
なぜ、アクセストークンだけshared_preferencesではなく、flutter_secure_storageでストレージに保存したのか →shared_preferencesだと平文で保存されるため
なぜ、ログイン待ちの間に表示されるぐるぐるの見た目がfigmaと違うのか →アプリ全体のぐるぐるをCirculatorProgressIndicator（青いぐるぐる）に統一するため
Yoshida-koshi
概要
お世話になっております。 SettingPageでログアウト機能の実装をしました。 レビューよろしくお願いします。
Client IDとClient Secret
Client IDとClient Secretが書かれているファイル（qiita_auth_key.dart）は こちらからダウンロードしてください。 ダウンロードしたファイルはmobile_qiita_app/lib/に格納してください。 よろしくお願いします。
新しく実装した内容
1. アクセストークンをflutter_secure_storageで保存
今までアクセストークンをVariablesクラスの変数として保存していましたが、flutter_secure_storageに保存されるようにしました。 e93b0c4320872a3bb9000c485b3081caa5261056 など 該当ファイル : mobile_qiita_app/android/app/src/main/AndroidManifest.xml mobile_qiita_app/lib/main.dart mobile_qiita_app/lib/services/qiita_client.dart 参考： https://pub.dev/packages/flutter_secure_storage/example https://qiita.com/bowyer-app/items/76e86c7303de8784a8bd https://developer.android.com/guide/topics/manifest/application-element?hl=ja#fullBackupContent
2. ユーザー情報をshared_preferencesで保存
ユーザー情報をshared_preferencesでストレージに保存されるように実装しました。 8ac12014fb75bf69b1f5457fbf93d57ece4dcb43 該当ファイル : mobile_qiita_app/lib/common/keys.dart mobile_qiita_app/lib/main.dart mobile_qiita_app/lib/services/qiita_client.dart 参考： https://pub.dev/packages/shared_preferences
3. ログアウト機能
ログイン時にアクセストークンとユーザー情報をストレージに保存し、ログアウト時に削除する実装をしました。また、ログアウトをするとSettingPageからTopPageへ遷移するように実装しました。また、ログアウト時にアクセストークンを失効させる機能も実装しました。 https://github.com/shinonome-inc/mobile_yo/commit/e93b0c4320872a3bb9000c485b3081caa5261056 など 該当ファイル : mobile_qiita_app/lib/pages/setting_page.dart mobile_qiita_app/lib/services/qiita_client.dart
主な変更内容
1. ログイン時の遷移
今までログイン画面からFeedPageへ直接遷移していたため、ログイン画面からTopPageを経由してFeedPageへ遷移するように変更しました。また、ログイン待ちの間のTopPageのUIも変更しました。 7bf4f03058c8593ee91d0a74d03be8e0fb0525f4 変更理由 : ログイン画面からFeedPageへ直接遷移するような実装になっていたため 該当ファイル : mobile_qiita_app/lib/components/web_view_component.dart mobile_qiita_app/lib/pages/top_page.dart
次の実装予定
実装後のUI
https://user-images.githubusercontent.com/82624334/157174055-9357de28-6e6d-425e-97b9-7a97fec8d518.mp4