2022-05-02
やること宣言
gaaamii.icon
勉強中メモ
gaaamii.icon
なにしようかな。リストアップして一番やりたいやつをやろう
Flutterでブログ投稿画面をつくってみる
Hotwireの勉強
ブログの下書きプレビュー画面をつくる
うーむ。やっぱFlutterかな。なんか一つかんたんなのでもいいから作ってみたいもんな
迷いながら作るのもあれだからまず要件やら仕様をざっくり考えよう
要件やら仕様
ログイン画面からログインできる
ログインするとブログ記事投稿画面が現れる
ブログ記事が投稿できる
たくさんやろうとしてもどうせできないのでとりあえず上記だけやれれば十分そう。やってみよう
まずプロジェクトをつくるぞ
VS CodeからFlutterのNew Projectを選択 -> Applicationを選択 -> アプリケーション名はblog_appとした。
まず雛形の状態で動かしてみるか
時間かかるな〜。M1 Macなら爆速だったりするんだろうか
動いた
https://gyazo.com/780d723b94899e8d4594f2f61f3d7724
どんな画面にしよう
メールアドレスとパスワードの欄とログインボタンがあれば良いんだよな。凝ったものはどうせ最初はできないので最低限それを満たしてればいいや
しかし何からしたらいいやら。とりあえず不要な実装を消そう
https://gyazo.com/861fda38634cccd50afbc8a962e88eb8
ふむ。なんか青いのやだな。白か黒にしたい
一旦Color.blueGreyにした。MaterialColorはカスタマイズしたりできるんだろうか。よくわかってない
https://gyazo.com/96e50ffe413570e62d09beb46b911fe2
さて、ログインフォームを置くぞ。どうしたらいいんだ
フォームを作るにはFormというウィジェットを使うらしく、そいつにはkeyとchildを渡せばよいらしい
わけもわからずとりあえずTextFormFieldを設置
https://gyazo.com/421e47d979471a13de806c7fd8a20105
なんか入力できるようになった
TextFormFieldはvalidatorを引数にとって、validatorの関数がStringを返せばエラー、nullのときはvalidになるっぽい。
次に、ElevatedButtonを設置してみた
https://gyazo.com/a4260542df2fdc90540301d6f53fc5ac
onPressedに押されたときの処理を書く。
このサンプルでは、フォームの検証をして、ヨシだったらメッセージを表示してる。
メッセージの表示に使ってるのが以下のコード。
code:login_form.dart
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
showSnackBar以外にもいろいろあるんだろうか
showMaterialBannerというのがあったので試してみたけどクラッシュした。よくわからないのでいいや。
さて、今回はログインフォームなのでパスワード入力フォームもほしい。
パスワード入力にはどんなウィジェットをつかえばいいんだろうか
どうやら先程のTextFormFieldにobscureText: trueを渡せばいいらしい
https://gyazo.com/bf3178cd44646f989ff9b03683601f4b
見た目があれなので整えたい気持ちもあるけど、まず最低限動作させるのを優先しよう。
送信処理のほうを書いていく
APIはすでにあるので、そこにメールアドレスとパスワードを投げればよい
Flutterのhttp周りのドキュメントを探す
ユーザーが入力した文字列を参照するのはどこからやればいいんだ
TextEditingController とやらを使えばいいのか
フィールドごとに設定するものなのか。ということはemailとpasswordでそれぞれTextEditingControllerが必要？
とりあえずフォームに入れた値を入れてAPI叩くのはできた。
https://gyazo.com/3f48b0a61bc34ab924d6905649bb470d
クッキー周りのあれやこれやはどうすればいいのか
CookieJarというのがあるらしい
saveFromResponseで保存して、loadForRequestで取り出せるらしい。やってみる。
だいたいできたけど、Railsのauthenticity_tokenチェックに阻まれる。そりゃそうだ。
このへんみんなどうやってるんだ。わからない。
WebViewからリクエスト投げて、そこからcookieをもらうみたいなことはできるのか？
モバイルアプリの今どきのいけてる認証方法を知らないのでそこから調べたほうがいい気がしてきた
FlutterのCookbookだとAuthorizationヘッダにトークン入れる方法だな
auth0とか検討してみるか？あるいはFirebase Authentication？
なんとなく流れはわかった
Firebase Authでログインする -> クライアント側でユーザー情報持つ -> Rails APIにIDトークンを投げる -> 認証
という流れっぽい。
Firebase Admin SDKがRails(Ruby)は対応してないっぽいな
セキュリティ周り、自前でやるの間違えそうだし嫌なんだよな〜
まあでもふつうのJWTなら、decodeして検証してuidの部分を取り出せばいいだけ？
うーん、Auth0もちょっと面倒そうだ。
やっぱFirebase Authがいいな。
このページのここを見てやればいけそう
やること整理しよう
/icons/check.icon Firebaseのプロジェクト作成
クライアント側実装
id_tokenを取り出して保持(たぶんSQLite？）
サーバー側実装
ユーザーのテーブルにfirebase_uidカラムを追加して、firebase側のユーザー情報と照合できるようにする
Authorizationヘッダがある場合はCookieによる認証をスキップして、Authorizationヘッダに入ったJWTの中身を見て認証するように修正
firebase_auth入れようとしたらCocoaPodsのエラー出てきた。うひー。
code:error
Error output from CocoaPods:
! Automatically assigning platform iOS with version 9.0 on target Runner because no platform was specified. Please specify a platform for this target in your Podfile. See https://guides.cocoapods.org/syntax/podfile.html#platform. ふむ
code:error
! CocoaPods could not find compatible versions for pod "firebase_auth": In Podfile:
firebase_auth (from .symlinks/plugins/firebase_auth/ios)
Specs satisfying the firebase_auth (from .symlinks/plugins/firebase_auth/ios) dependency were found, but they required a higher minimum deployment target.
たしかに .symlinks/plugins/firebase_auth/iosをみると、s.ios.deployment_target = '10.0'になってるので、targetを上げる
Podfileにplatform :ios, '10.0'を指定した。
できた
ほんでIDトークンはどこからとれるんだ
getIdToken()てやつでとれそう
とれた
認証状態によって画面出し分けしたい
やったこと
gaaamii.icon
Flutterで自分のブログ記事管理へのログイン画面を作ろうとしてた