Windows向けFlutterアプリでFirebase Authを利用する。

筆者について

• 現在高校２年生（アップ日が最後）
• 水泳部マネージャー
• 生徒会長
• とある団体の代表

本編

ちなみにこの記事の話に出てくるSOKFIと言うのは水泳記録管理サービスです。今後はチーム機能なども追加する予定ですので、水泳をしてらっしゃるエンジニアの方がいらっしゃたらぜひ利用をしてみてください。

ことの始まりは、2月にSOKFIのアプリをリリースした後。Flutterをアプリ開発に利用したのは、クロスプラットフォームに対応しているのが、僕のアプリ開発の理念に一致していたからでした。なおかつ、.NETなとのMicrosoft系はあまり得意でないため、Google系サービスに統一したいのもあって、Flutter/Firebase/Google Cloud/Google WorkspaceといったGoogle系サービスを利用しています。そんな中で、Firebase Authを利用しているときにWindowsのビルドがうまいこといかないことに気づき、FlutterFireを初期化をもう一度したがWindowsが出てこなかったので、「なんでやねん！』って思いながら色々調べてたので共有させていただきます。

しばらくの間WindowsでFirebase Authは利用できなかった

ここでとりあえず調べたのがfirebase_options.dartです。

firebase_options.dart

class DefaultFirebaseOptions {
  static FirebaseOptions get currentPlatform {
    if (kIsWeb) {
      return web;
    }
    switch (defaultTargetPlatform) {
      case TargetPlatform.android:
        return android;
      case TargetPlatform.iOS:
        return ios;
      case TargetPlatform.macOS:
        return macos;
      case TargetPlatform.windows:
        throw UnsupportedError(
          'DefaultFirebaseOptions have not been configured for windows - '
          'you can reconfigure this by running the FlutterFire CLI again.',
        );
      case TargetPlatform.linux:
        throw UnsupportedError(
          'DefaultFirebaseOptions have not been configured for linux - '
          'you can reconfigure this by running the FlutterFire CLI again.',
        );
      default:
        throw UnsupportedError(
          'DefaultFirebaseOptions are not supported for this platform.',
        );
    }
  }

  static const FirebaseOptions web = FirebaseOptions(
    apiKey: '',
    appId: '',
    messagingSenderId: '',
    projectId: '',
    authDomain: '',
    storageBucket: '',
  );

  static const FirebaseOptions android = FirebaseOptions(
    apiKey: '',
    appId: '',
    messagingSenderId: '',
    projectId: '',
    storageBucket: '',
  );

  static const FirebaseOptions ios = FirebaseOptions(
    apiKey: '',
    appId: '',
    messagingSenderId: '',
    projectId: '',
    storageBucket: '',
    androidClientId: '',
    iosClientId: '',
    iosBundleId: '',
  );

  static const FirebaseOptions macos = FirebaseOptions(
    apiKey: '',
    appId: '',
    messagingSenderId: '',
    projectId: '',
    storageBucket: '',
    androidClientId: '',
    iosClientId: '',
    iosBundleId: '',
  );

}

そうなんです、そもそもWindowsはずっとサポートが打ち切られていたんです。

リリースノートを見てWindowsが対応したと書いているものの…

実はバージョン4.10.0のリリース（10月）と同時にWindowsにもう一回対応したと書いてありました！

しかし、まだ公式ドキュメントにも書いてないしFlutteFireで調整もできへんし…。と色々あったのですが分散しているデータを見つけてどうにか解決できましたので手順をまとめておきたいと思います。これで少しでもWindowsのFirebase Auth利用ユーザーが増えることを祈っております。

①FlutterFireのdev版を手動でインストールする

そもそもここからです。現在のリリース版ではFlutterFireはWindowsをサポートしていません。したがって、dev版をインストールする必要があります。

ソースコードをローカルに落としてパスを通せば終わりです。

dart pub global activate flutterfire_cli 0.3.0-dev.21 --overwrite

②必要な処理を追加で記入

クライアントIDの記入だけ気をつけてください！

main.dart

//追加のパッケージを導入

+ import 'package:google_sign_in_dartio/google_sign_in_dartio.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  LocaleSettings.useDeviceLocale();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
+  if (!kIsWeb && Platform.isWindows) {
+    await GoogleSignInDart.register(
+      clientId:
+          "YOUR CLINET ID",
+    );
  }
  runApp(TranslationProvider(child: MyApp()));
}

//以下必要な処理を記入

また、サインイン時の挙動の記入については元々わけていらっしゃったらそのままそれで問題ありません。

oauth.dart

import 'package:google_sign_in/google_sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/foundation.dart';

Future<UserCredential?> signInWithGoogle() async {
  try {
    if (kIsWeb) {
      GoogleAuthProvider googleProvider = GoogleAuthProvider();
      return await FirebaseAuth.instance.signInWithPopup(googleProvider);
    } else {
      final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
      final GoogleSignInAuthentication? googleAuth =
          await googleUser?.authentication;
      final credential = GoogleAuthProvider.credential(
        accessToken: googleAuth?.accessToken,
        idToken: googleAuth?.idToken,
      );
      return await FirebaseAuth.instance.signInWithCredential(credential);
    }
  } catch (error) {
    debugPrint(error.toString());
    return null;
  }
}

ちなみに、Sign in with Google以外は（僕が見る限り現在は）サポートされていませんので、それ以外のサービスは利用できないように処理する必要があることを先にご知りおきください。

以上で、Windowsへの対応は終わりです！！若干面倒かった！

最後に

今日は久しぶりに投稿してみました！明日以降は受験生となりますが、勉強と並行しながらエンジニアとしての活動も続けていこうと思っております。今後ともよろしくお願いします。