Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

tanuki4
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした