masa tech blog
  • HOME
  • CODE
    • Flutter
  • CONTACT
  • ホーム
  • CODE

[Flutter] プラグインで簡単設定!Firebaseを使ってGoogle Sign Inする方法

2021年4月4日2021年12月31日

SHARE

  • ツイート
  • シェア
  • はてブ
  • LINE
  • Pocket

今回は、FlutterアプリにFirebase Authenticationを使って Google Sign In を行う方法をご紹介します。

Firebase Authentication は FIrebase が提供している機能で、メールとパスワードによる認証だけでなく、twitterやApple、Facebookとの認証も提供されています。これを利用することで、簡単にログイン認証機能をつくることができます。

作るものは サインインボタンを表示して、認証後にアイコン、名前、メールアドレス、ログアウトボタンを表示します。

では Googleアカウントを利用してサインインする手順をご紹介していきます。

ITエンジニアが利用したい転職エージェントNo.1

» レバテックキャリアの無料登録はこちら

Firebase Authenticationの設定

まず Firebase コンソールでプロジェクトを作成する必要があります。詳細な手順は以下の記事でご紹介しています。

2021年4月2日[Flutter] 初心者でも簡単に導入可能!Firebaseのセットアップ方法

プロジェクトの作成が終わったら、Authentication のユーザの認証と管理をクリックします。

「始める」ボタンをクリックします。

画面上部の「Sign-in method」をクリックして「Google」欄の右端のペンマークをクリックします。

次の画面で右上のスライドを「有効」に変更、サポートメールを選択して「保存」ボタンをクリックします。

Googleのステータスが「有効」になっていることを確認しましょう。

AndroidのFirebaseの設定

AndroidでのGoogleサインインを行うには、Firebaseのプロジェクトの設定で、SHA 証明書フィンガープリントを設定する必要があるようです。コマンドラインから keytool を実行して、SHA-1とSHA-256の値を設定します。

$ keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

iOSの設定

iOS では google_sing_in パッケージの公式に記載されている通り Info.plist に CFBundleURLTypes を追加する必要があります。CFBundleURLSchemes には、GoogleService-info.plist のREVERSED_CLIENT_ID の値をコピペすればOKです。

Info.plist
 <key>CFBundleURLTypes</key>
  <array>
    <dict>
     <key>CFBundleTypeRole</key>
     <string>Editor</string>
     <key>CFBundleURLSchemes</key>
     <array>
     <string>com.googleusercontent.apps.48083753xxxx-xxxxxxxxxxxxxxxxxxxxxxxxx</string>
     </array>
    </dict>
  </array>

Firebase関連パッケージのインストール

Firebase とGoogleサインインボタン、riverpod を使うためのパッケージをインストールするために、pubspec.yaml ファイルに以下のように追加し、flutter pub get でインストールします。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0

  //以下の4つを追加
  firebase_auth: ^0.18.3
  google_sign_in: ^4.5.6

  flutter_riverpod: ^0.12.0
  flutter_signin_button: ^1.1.0

Flutterでの実装

今回は状態遷移に flutter_riverpod をしていますので、provider や stateful ウィジェットを使う場合は適宜読みかえてください。

プロバイダを定義してmain関数でFirebaseの初期化を行います。

final googleSignInProvider =
    ChangeNotifierProvider((ref) => GoogleSignInProvider());

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(ProviderScope(child: MyApp()));
}

ChangeNotifier を継承した Google認証用のクラスを作成します。

class GoogleSignInProvider extends ChangeNotifier {
  final googleSignIn = GoogleSignIn();
  bool _isSignIn;

  GoogleSignInProvider() {
    _isSignIn = false;
  }

  bool get isSignIn => _isSignIn;

  set isSignIn(bool isSignIn) {
    _isSignIn = isSignIn;
    notifyListeners();
  }

  //ログイン
  Future login() async {
    isSignIn = true;
    final user = await googleSignIn.signIn();

    if (user == null) {
      isSignIn = false;
      return;
    } else {
      final auth = await user.authentication;
      final credential = GoogleAuthProvider.credential(
        accessToken: auth.accessToken,
        idToken: auth.idToken,
      );
      await FirebaseAuth.instance.signInWithCredential(credential);

      isSignIn = false;
    }
  }

  //ログアウト
  void logout() async {
    await googleSignIn.disconnect();
    FirebaseAuth.instance.signOut();
  }
}

画面表示は、StreamBuilder で FirebaseAuth をチェックして、Google側の処理を待っている状態では、インジケータを表示します。処理が戻ってきて snapshot.hasData があれば、currentUser からユーザの画像URL、名前、メールアドレスを取得して表示します。

snapshot.hasData がなければ、「Sign up with Google」のログインボタンを表示します。flutter_signin_button パッケージをインストールしたので、SignInButton ウィジェットを使用しています。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, watch, child) {
      final provider = watch(googleSignInProvider);

      return Scaffold(
        appBar: AppBar(
          title: Text('Google Sign In'),
        ),
        body: StreamBuilder(
            stream: FirebaseAuth.instance.authStateChanges(),
            builder: (context, snapshot) {
              if (provider.isSignIn) {
                return Center(child: CircularProgressIndicator());
              } else if (snapshot.hasData) {
                final user = FirebaseAuth.instance.currentUser;
                return Container(
                  alignment: Alignment.center,
                  color: Colors.pink[50],
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text('Logged In'),
                      SizedBox(height: 10),
                      CircleAvatar(
                          maxRadius: 25,
                          backgroundImage: NetworkImage(user.photoURL)),
                      SizedBox(height: 10),
                      Text('Name: ' + user.displayName),
                      SizedBox(height: 10),
                      Text('Email: ' + user.email),
                      SizedBox(height: 10),
                      ElevatedButton(
                        onPressed: () {
                          context.read(googleSignInProvider).logout();
                        },
                        child: Text('Logout'),
                      ),
                    ],
                  ),
                );
              } else {
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SignInButton(
                        Buttons.Google,
                        text: "Sign up with Google",
                        onPressed: () {
                          context.read(googleSignInProvider).login();
                        },
                      ),
                    ],
                  ),
                );
              }
            }),
      );
    });
  }
}

Googleサインインアプリを動作させてみる

ログイン画面で「Sign up with Google」 ボタンをタップします。 

Continue をタップします。

Googleアカウントのメールアドレスとパスワードを入力します。

認証されるとユーザの画像、名前、メールアドレスを表示します。ログアウトボタンをタップするとログアウトしてログイン画面を表示します。

お疲れさまでした!

まとめ

今回は Flutter アプリにおける Firebase Authentication を利用した Google サインインの方法をご紹介しました。

設定も実装も難しくないので導入しやすいですし、他の Github や twitter、Facebook も同様に簡単にできるかはまだわかりませんが、試したらまた記事にしたいと思います。

ソースコードは、Github にあげてあります。

参考ramtiga/flutter_google_signinGitHub

副業プログラミングで稼ぐやり方は、masamaru blogで解説していますのでぜひチェックしてみてください。

masamaru blog – 副業プログラミング、ブログ情報

転職を目指しているITエンジニアの方は、レバテックキャリアがおすすめですよ。

» レバテックキャリアの無料登録はこちら

SHARE
  • ツイート
  • シェア
  • はてブ
  • LINE
  • Pocket

CATEGORY :

  • CODE
  • Flutter

TAGS :

  • firebase
  • flutter
  • google
  • signin
  • [Flutter] 初心者でも簡単に導入可能!Firebaseのセットアップ方法

    [Flutter] 初心者でも簡単に導入可能!Firebaseのセットアップ方法

  • showDIalogを呼び出すだけ!Flutterでダイアログを表示する方法

    showDIalogを呼び出すだけ!Flutterでダイアログを表示する方法

  • [Flutter] 初心者でも簡単!APIでデータを取得してListViewに表示する方法

    [Flutter] 初心者でも簡単!APIでデータを取得してListViewに表示する方法

  • [Flutter] これは簡単!ListViewをドラッグアンドドロップする方法

    [Flutter] これは簡単!ListViewをドラッグアンドドロップする方法

  • [Flutter] 初心者でもプラグインで簡単!カメラと写真を読み込むimage_pickerの使い方

    [Flutter] 初心者でもプラグインで簡単!カメラと写真を読み込むimage_pickerの使い方

  • [Flutter] 画像をiPhoneのアルバムに保存する方法

    [Flutter] 画像をiPhoneのアルバムに保存する方法

この記事を書いた人
masa
フリーランスエンジニア

大卒→正社員→フリーランスエンジニア / C / Swift / Rails / Laravel / 現在リモートでLaravel案件 /

Website

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

前の記事

[Flutter] 初心者でも簡単に導入可能!Firebase…

次の記事

[Flutter] すぐ使える!FlutterでQRコードを読…

masa

大卒→正社員→フリーランスエンジニア / Swift / Flutter / Rails / Laravel / 現在リモートでLaravel案件 /

Recent Posts

  • showDIalogを呼び出すだけ!Flutterでダイアログを表示する方法
    showDIalogを呼び出すだけ!Flutterでダイアログを表示する方法
  • [Flutter] 画像をiPhoneのアルバムに保存する方法
    [Flutter] 画像をiPhoneのアルバムに保存する方法
  • [Flutter] 初心者でもプラグインで簡単!カメラと写真を読み込むimage_pickerの使い方
    [Flutter] 初心者でもプラグインで簡単!カメラと写真を読み込むimage_pickerの使い方
  • mac初心者向け!iOSのシミュレータでスクリーンショットと録画を行う方法
    mac初心者向け!iOSのシミュレータでスクリーンショットと録画を行う方法
  • [Flutter] すぐ使える!FlutterでQRコードを読み取る方法
    [Flutter] すぐ使える!FlutterでQRコードを読み取る方法

Archives

  • June 2021
  • May 2021
  • April 2021
  • March 2021

Categories

  • CODE
    • Flutter

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

About me!

大卒→正社員→フリーランスエンジニア / .Net / Flutter / Rails / Laravel など / エンジニア歴10年以上
» お問い合わせはこちら
HOME

© 2023 masa tech blog All rights reserved.