GameWithDay 12

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認証が完了していない場合こちらが表示され

スクリーンショット 2018-12-12 7.25.07.png

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

スクリーンショット 2018-12-12 7.25.17.png

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