こんばんは。pregum_foxです。
今回は、Supabaseにも正式に匿名サインイン(Anonymous Sign-ins) が実装されたのとのことなので、手元のリポジトリで試してみました。
前回はSocial Login(Facebook)のサンプルを作成しました。
他のSupabase Authenticationのサンプルを見たい場合は下記記事から確認可能です。
それでは目次です。
開発端末
| 項目 | 内容 |
|---|---|
| OS | M1 Mac |
| Flutter | 3.13.17 |
fvm flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.7, on macOS 14.3.1 23D60 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.88.0)
[✓] Connected device (3 available)
! Error: Browsing on the local area network for iPhone 12 mini pregum. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• No issues found!
検証端末
| 端末名 | version |
|---|---|
| Google Pixel 3a(Emulator) | Android 14 |
サンプルで作成したリポジトリ
今回の実装したリポジトリはこちらです。
必要なもの
- Supabase アカウント
- Supabase プロジェクト
匿名サインイン実装の手順
手順は簡単です。
- 導入するSupabaseプロジェクトにて、匿名サインインを有効にします
- 匿名サインインのクライアントコードを実装します
匿名サインインとそれ以外でのサインインの判別方法
特定の機能は匿名サインインでは使えないようにしたい場合などで匿名サインインであることをチェックする処理を組み込みたいことがあります。
その場合は、ユーザーのJWTにis_anonymous というフィールドが含まれていますので、その値を見てtrueなら匿名サインインであるというチェックができます。
あとはこの値によって処理を分岐させてあげることで実現が可能です。
図解
1. 導入するSupabaseプロジェクトにて、匿名サインインを有効にします
それでは匿名サインインを導入するSupabaseプロジェクトを開いてください。
そのあと、Project Settings > Autnentication の Auth Settings を表示し、「Allow anonymous sign-ins」のラジオボタンをONに設定します。
そして、下にスクロールすると右下に「Save」ボタンがあるので、クリックして保存します。
これでプロジェクト側の設定は完了です。
次に、クライアントコードを実装していきます。
2. 匿名サインインのクライアントコードを実装します
サンプルで実装したリポジトリから匿名サインインのコードを抜粋したコードを以下に記載します。
final supabase = Supabase.instance.client;
await supabase.auth.signInAnonymously(
data: {'user_name': _anonymousUserName.text },
);
supabase.auth.signInAnonymously() メソッドを呼び出すだけで匿名サインインを行うことができます。
あとは、ユーザー名などをmetaデータとして含めたい場合は、dataの引数にMap型で渡すことができます。
実際にログインした時、プロジェクト上ではこのように表示されます。
雑感
以前は冒頭に記載されていたようにクライアントコード以外にもPostgreSQL の関数を作成しないといけなく個人的には難易度が高い作業な為、敬遠していましたが今回新たに簡単に匿名サインインが実装できるようになったことで、よりFirebaseと比較しても遜色無くなってきたと思いました。
そのうち個人開発で作成しているアプリにも匿名サインインを追加したいですが、他のProvider(GoogleサインインやAppleサインインなど)との連携方法などはまだ試していない為、その辺りの調査ができたら実装を進めていきたいなと思いました。
ここまで読んでいただきありがとうございました。
