FlutterでFirebaseのGoogle認証を使用する

公開日：2019/06/24 更新日：2019/06/24

Image Credit : firebase.google.com

はじめに

Flutterで認証機能を実装するためにFirebaseのGoogle認証を使用してみました。Firebaseを使うことで非常に簡単に実装することができました。この記事ではFlutterからFirebaseのGoogle認証を使用する手順をまとめます。

できるようになること

以下の画像のように、サインインボタンをクリックすることでGoogleアカウントでサインインできるようになります。

このデモのコードは以下のGitHubにあげてあります。

github.com

virment/flutter-sample/firebase-google-auth

Firebase Google Auth sample

前提と環境

以下の通りです。

Flutter 1.5.4-hotfix.2
Dart 2.3.0
Firebaseの設定は完了しているとする。

FirebaseをAndroidやiOSアプリから使えるようにするためには、いくつか準備が必要になります。準備がまだできていない方は、以下のFirebaseの公式ドキュメントに手順が載っていますので見てみてください。

firebase.google.com

Flutter アプリに Firebase を追加する | Firebase

このガイドの手順に沿って、Flutter アプリに Firebase プロダクトを追加してください。

使用するパッケージについて

Google認証を使用するために、pubspec.yamlのdependenciesに３つのパッケージを追加します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^0.12.5+1
  firebase_auth: ^0.11.1+6
  google_sign_in: ^4.0.2

また、Google認証を使用したいコードの冒頭に以下を記載して必要なパッケージをインポートします。

main.dart

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

Flutterで使用できるFirebase関連のパッケージは、以下の公式ドキュメントにリストが記載されています。

firebaseopensource.com

FlutterFire

Check out this project on firebaseopensource.com!

FlutterからFirebaseのGoogle認証を使用するコード

以下は冒頭に記載したデモのコードです。Flutterプロジェクト作成時にデフォルトで生成されるコードをベースにしています。

main.dart

// コード全体はGitHub参照
(...以上省略...)

class _MyHomePageState extends State {
  final GoogleSignIn _googleSignIn = GoogleSignIn();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  String username = 'Your Name';
 
  Future _handleSignIn() async {
    final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
    final GoogleSignInAuthentication googleAuth = await googleUser.authentication;

    final AuthCredential credential = GoogleAuthProvider.getCredential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

    final FirebaseUser user = await _auth.signInWithCredential(credential);
    setState(() {
      username = user.displayName;
    });
    return user;
  }

  Future _handleSignOut() async {
    _auth.signOut();
    setState(() {
      username = 'Your name';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '$username',
              style: Theme.of(context).textTheme.display1,
            ),
           
           StreamBuilder(
              stream: _auth.onAuthStateChanged,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return MaterialButton(
                    onPressed: () => _handleSignOut(),
                    color: Colors.red,
                    textColor: Colors.white,
                    child: Text('Signout'),
                  );
                } else {
                  return MaterialButton(
                    onPressed: () => _handleSignIn()
                          .then((FirebaseUser user) => setState(() {
                            username = user.displayName;
                            print(username);
                          }))
                          .catchError((e) => print(e)),
                    color: Colors.white,
                    textColor: Colors.black,
                    child: Text('Login with Google'),
                  );
              }
            }),
          ],
        ),
      ),
    );
  }
}

上記のコードを見てわかるとおり、サインインボタンをクリックしてサインインが完了すると、usernameにサインインしたユーザの名前が格納されて画面に表示されます。なお、サインインしたユーザの名前以外の情報も取得可能です。以下はFirebase Authenticationの公式ドキュメントでFlutterの記述方法はありませんが、その他のユーザ情報へのアクセスについて記載されています。

firebase.google.com

Android で Firebase Authentication を使ってみる | Firebase

ユーザーが正常にサインインした場合は、getCurrentUser メソッドでいつでもアカウントデータを取得できます。

他にも例えば以下があります。以下のuserはFirebaseUser userです。

user.displayName // ユーザ名
user.email // ユーザのメールアドレス
user.photoUrl // ユーザの画像URL
user.uid // ユーザのID

上記のコードで重要となるのは、以下になります。

_handleSignIn() : Googleアカウントでのサインインを処理。この関数をボタンの`onPressed`に結びつける。
_handleSignOut() : Googleアカウントでのサインアウトを処理。この関数をボタンの`onPressed`に結びつける。
StreamBuilder() : StreamBuilderでサインイン状態（コード内の`_auth.onAuthStateChanged`）に応じてサインインボタンとサインアウトボタンの表示、非表示を切り替える。