アプリ開発記　第5回　やりたいこと育成アプリ　Googleログイン機能の実装

こんにちは、ゴロすけです。

前回に引き続き、アプリの開発を進めています。

簡易的なログイン画面の実装
Googleログインの実行
対処後の動作

簡易的なログイン画面の実装

まずはテスト用の、簡易的なログイン画面を作成しました。
コードはこちら。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_firebase_test/pages/error.dart';
import 'package:flutter_app_firebase_test/pages/top_page.dart';
import 'package:google_sign_in/google_sign_in.dart';

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

  final String title;

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

class _LoginState extends State<Login> {
  final GoogleSignIn _googleSignIn = GoogleSignIn();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<User> _handleSignIn() async {
    GoogleSignInAccount googleCurrentUser = _googleSignIn.currentUser;
    try {
      if (googleCurrentUser == null) googleCurrentUser = await _googleSignIn.signInSilently();
      if (googleCurrentUser == null) googleCurrentUser = await _googleSignIn.signIn();
      if (googleCurrentUser == null) return null;

      GoogleSignInAuthentication googleAuth = await googleCurrentUser.authentication;
      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );
      final User user = (await _auth.signInWithCredential(credential)).user;
      print("signed in " + user.displayName);

      return user;
    } catch (e) {
      Navigator.push(context, MaterialPageRoute(builder: (context) => ErrorPage(error: e)));
      print(e);
      return null;
    }
  }

  void transitionNextPage(User user) {
    // if (user == null) return;
    if (user == null) {
      Navigator.push(context, MaterialPageRoute(builder: (context) => ErrorPage(error: 'Null')));
    } else {
      Navigator.push(context, MaterialPageRoute(builder: (context) => TopPage(userData: user)));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
          RaisedButton(
            child: Text('Sign in Google'),
            onPressed: () {
              _handleSignIn().then((User user) => transitionNextPage(user)).catchError(
                  (e) => Navigator.push(context, MaterialPageRoute(builder: (context) => ErrorPage(error: e))));
            },
          ),
        ]),
      ),
    );
  }
}

参考ページはこちらです。

FlutterでFirebase Authenticationを使ったGoogleアカウントログインを実装してみた - Qiita

はじめにこの記事は、Flutter #2 Advent Calendar 2019の7日目、Firebase #2 Advent Calendar 2019の7日目の記事です。Flutterアプリ…

参考ページの投稿後、FirebaseのAuthenticationにアップデートがあったようです。
一部変数名に変更がありました。

それら変更内容において参考になったページはこちらです。

Attention Required! | Cloudflare

Googleログインの実行

いざログインボタンを押してみると、以下のエラーが発生しました。

type 'platformexception' is not a subtype of type 'string'

これはAndroidだけで起こるエラーのようです。
僕はWindowsを利用しており、デバッグも仮想のAndroidを利用しています。

対処は以下のページを参考に行いました。

Flutterでぶつかった色んな問題の解決まとめ - Qiita

誰かの助けになったら嬉しいなぁ。初心者なので間違っていたらご指摘いただけると幸甚です。エラーで困ったこと-bash: flutter: command not foundっていわれた!PAT…

Android用の証明書が不足していたようです。
新しいPCだったのでJavaを入れておらず、Javaのインストールからやる必要がありました…。

対処後の動作

確認のためにログイン後に遷移する画面のコードを一部変更しました。

 Widget build(BuildContext context) {
    //アプリUIの基盤
    return Scaffold(
      appBar: AppBar(
        // title: Text('やりたいこと育成アプリ'),
        title: Text(widget.userData.email),
      ),

タイトルをアプリ名からログインしたユーザーのGmailアドレスにしました。
ログインがうまくいっていれば、メールアドレスが画面に表示されるはずです。