はじめに
今現在、メールアドレス・パスワード認証、Twitter連携認証、googleアカウント連携認証、を実装している。
このアプリに、
- 匿名ログイン機能
- 匿名アカウントとその他の認証情報の紐付け
を実装する。
匿名ログインの実装
次のページを参考にする。
Firebaseの設定
有効にするだけ。
コードの記述
匿名ログインしたい場所で以下を呼び出すだけ。
FirebaseAuth.signInAnonymously();
今回は、sign_in_screen.dartに新たなボタンを追加し、そこで実行するメソッドを上記にする。
sign_in_screen.dart
// ~前略~
Future<void> _onSignInWithAnonymousUser() async {
final FirebaseAuth firebaseAuth = FirebaseAuth.instance;
try{
await firebaseAuth.signInAnonymously();
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (_) => PhotoListScreen(),
)
);
} catch(e) {
await showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('エラー'),
content: Text(e.toString()),
);
}
);
}
}
// ~中略~
@override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey, //validation用
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ~中略~
// ここから新規追加
SizedBox(height: 10),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () => _onSignInWithAnonymousUser(),
child: Text('登録せず利用'),
),
),
// ここまで新規追加
],
),
),
),
),
);
}
実際の挙動
シミュレータ上で、「登録せず利用ボタン」をタップすると、きちんと画面遷移する。
Firebase上にきちんと情報も入っている！！
匿名アカウントとの紐付け
以下のページを参考に実装する。
分岐処理の追加
匿名ユーザログイン時は、
- 「ログアウトボタン」のアイコンを変更
- 「ログアウトボタン」タップ時にログアウト処理を行わず、popではなくpushで
sign_in_screenを表示 - 「ログアウトボタン」をタップしてsign_in_screenに遷移した際は、画面の文言を変更
-
sign_in_screenでアカウント登録した際は、サインインではなくアカウントリンク処理を行う - 登録後の画面遷移は、pushReplacementではなくてpop
という処理を追加する。
実際の挙動
匿名ユーザログイン時はログアウトボタンではなくアカウントリンクボタンを表示
アカウントリンクボタンをクリックした時は、sign_in_screenの表示や処理を変える
アカウントリンク後は、ログアウトボタンの表示及び匿名ユーザ時に保存していたデータをそのまま見ることができる
きちんとリンクされている
コードの記述
この記事による変更を、PRで載せておく。
ちなみにだが、photo_list_viewの表示の切り替え判定にprovider内のuserProviderを用いると、アカウントをリンクしてもprovider内の値が更新されないため表示が切り替わらない、という問題が発生した。
なので、providerから値を取ってくるのではなく、widgetの内部で以下のようにcurrentUserを定義することとした。
currentUser = FirebaseAuth.instance.currentUser;