flutterでfirebaseを使いチャットアプリを作る（auth編）

この記事は GameWith Advent Calendar 2018 の12日目です
flutterがこの度1.0になりましたので、firebaseでチャットアプリを作ってみようと思います。
今回はauth編です。iOSのみ実装していきます。

flutterのセットアップ

flutterのセットアップは公式を参考に設定していけば特に詰まることもなくできると思いますので割愛します。
https://flutter.io/docs/get-started/install

flutterでfirebaseを使えるようにする

flutterでfirebaseを使えるようにするためにの準備をします。
firebaseの公式にドキュメントがありますのでそれを参考にセットアップしていきます。
こちらも公式通りにやれば特に詰まることはないと思います。
https://firebase.google.com/docs/flutter/setup?hl=ja

認証機能の実装

今回はgoogle認証を使用しますので以下のパッケージをpubspec.yamlに追加します

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.6.6
  google_sign_in: ^3.2.4

次にこちらのiOS integrationの項目に記載されている内容をやっておきます

[project]/ios/Runner/Info.plist　に以下を追加します。

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			// こちらに GoogleService-Info.plist の REVERSED_CLIENT_ID を反映します
			<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
		</array>
	</dict>
</array>

Firebaseにアプリの登録ができれいればGoogleService-Info.plistがあると思いますので、<string>にGoogleService-Info.plistに記載されているREVERSED_CLIENT_IDを反映してます。

最後にこちらを参考に実際にmain.dartに認証用のコードを追加していきます。

反映したものがこちらになります。

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter × firebase Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter × firebase Demor'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  FirebaseUser _user;

  void _setUser(FirebaseUser user) {
    setState(() {
      _user = user;
    });
  }

  final GoogleSignIn _googleSignIn = GoogleSignIn();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<FirebaseUser> _handleSignIn() async {
    GoogleSignInAccount googleUser = await _googleSignIn.signIn();
    GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    FirebaseUser user = await _auth.signInWithGoogle(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    print("signed in " + user.displayName);
    return user;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _user == null ? googleAuthBtn() : chat()
    );
  }

  Widget googleAuthBtn() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FlatButton(
            padding: EdgeInsets.all(20.0),
            color: Colors.grey,
            onPressed: () {
              _handleSignIn()
                .then((FirebaseUser user) => _setUser(user))
                .catchError((e) => print(e));
            },
            child: Text('google認証'),
          ),
        ],
      ),
    );
  }

  Widget chat() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('chat')
        ],
      ),
    );
  }
}

google認証が完了していない場合こちらが表示され

google認証が完了していたらこちらが表示されるようになります

Advent Calendar の24日目で実際にチャットの部分を実装して行きます。