🗂

【flutter】firebaseでgoogleログイン認証する最速手順

2024/04/12に公開

Flutter

tech

いろいろはまりすぎたので備忘録としてまとめておく。

firebaseプロジェクトの作成

一番右のflutterを選択

Firebase CLI をインストールしてログインする（firebase login を実行する）
→これはやっていなかったらやる。
Flutter SDK をインストールする
→これはやっていなかったらやる。
Flutter プロジェクトを作成する（flutter create を実行する）
→新規プロジェクトでやるなら実施

flutterfire configureをやるとどの端末向けに設定する？って出てくるので、
androidならandoridだけ選択して実行。別に全部でもいい。

一応補足しておくと、これをやるだけで、firebase側との連携で必要な最低限の設定は完了するという素晴らしい構成。

ファイルの置き換えとかも特にいらないです。自動でやってくれる。

あと、最初に「一番右のflutterを選択」という手順で、今回flutterを選択してこの手順きていますけど、別のアイコンのandroidを選択した場合はandoird用の手順になります。

何が言いたいかというと、flutterってクロスプラットフォームなだけで、osではないじゃないですか。
なのにandroidと同じ土俵にいて、もしかしてandroid側の設定も何かいるのか？って思ったのですが、結論から言うといらんかったです。

要するにflutterfire configureってやっておけばandroid側の設定もやってくれているよ。っていう話。（ただ、このあと微妙に端末ごとに設定はいるけど）

プラグイン入れる

flutter pub add firebase_core
flutter pub add firebase_auth
flutter pub add firebase_ui_auth
flutter pub add firebase_ui_oauth_google

って感じで３つ入れる。

sha1キーの生成

今回andoridでgoogleログインしたいのでsha1キー必須みたいです。
これ設定しないとログイン時にunknownエラーって言われて詰みます。
何が悪いのかのログはでません。

sha1キーは自分で作ります。keytoolなかったら入れる。

11 0.707 keytool -list -v -keystore "C:\Users\userxxxxxxx(各自のパス).android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

keytoolはここから

このあたり入れておく。

環境変数への設定も。

sha1キーが無事つくれたら、firebaseに設定する。

64kバイト問題？

起動すると、
"the number of method references in a .dex file cannot exceed 64k."

とかってエラーがでて起動できないことがあるので、
以下の1行を追加する。

android/app/build.gradle
android {
    defaultConfig {
        multiDexEnabled true // multidexサポートライブラリを使用する
    }
}

UIつくる。

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
import 'package:firebase_ui_auth/src/providers/email_auth_provider.dart' as ui_auth;


Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  FirebaseUIAuth.configureProviders([
    ui_auth.EmailAuthProvider(),
    GoogleProvider(clientId: "各自のクライアントID"),
  ]);

  runApp(
      loginScreen(),
  );
}

class loginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      initialRoute: FirebaseAuth.instance.currentUser == null ? '/sign-in' : '/profile',
      routes: {
        '/sign-in': (context) {
          return SignInScreen(
            actions: [
              AuthStateChangeAction<SignedIn>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
              
              AuthStateChangeAction<UserCreated>((context, state) {
                Navigator.pushReplacementNamed(context, '/profile');
              }),
            ],
          );
        },
        '/profile': (context) {
          return ProfileScreen(
            actions: [
              SignedOutAction((context) {
                Navigator.pushReplacementNamed(context, '/sign-in');
              }),
            ],
          );
        },
      },
    );
  }
}

この記事の存在意義

まじでまとまったサイトなくて困ったから。いろいろとわかりにくすぎる。