13
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-12

この記事は 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日目で実際にチャットの部分を実装して行きます。

13
15
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?