こんにちは、ゴロすけです。
前回に引き続き、アプリの開発を進めています。
簡易的なログイン画面の実装
![](https://makoto-life.com/wp-content/uploads/2021/08/image-28-547x1024.png)
まずはテスト用の、簡易的なログイン画面を作成しました。
コードはこちら。
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))));
},
),
]),
),
);
}
}
参考ページはこちらです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9Rmx1dHRlciVFMyU4MSVBN0ZpcmViYXNlJTIwQXV0aGVudGljYXRpb24lRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElOUZHb29nbGUlRTMlODIlQTIlRTMlODIlQUIlRTMlODIlQTYlRTMlODMlQjMlRTMlODMlODglRTMlODMlQUQlRTMlODIlQjAlRTMlODIlQTQlRTMlODMlQjMlRTMlODIlOTIlRTUlQUUlOUYlRTglQTMlODUlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODElOUYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTNlNTVhZmM3NTdmNjhiYzgyYzFiYTBmNjRiOWFmZDU5&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdW5zb2x1YmxlX3N1Z2FyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00NWQyZWMzM2Q3MzYzYjlhMjM4NzAzZWYyMDMwZmVjMw&blend-x=142&blend-y=491&blend-mode=normal&s=1ecb3042096599e60d2725e39293d5d9)
FlutterでFirebase Authenticationを使ったGoogleアカウントログインを実装してみた - Qiita
はじめにこの記事は、Flutter #2 Advent Calendar 2019の7日目、Firebase #2 Advent Calendar 2019の7日目の記事です。Flutterアプリ…
参考ページの投稿後、FirebaseのAuthenticationにアップデートがあったようです。
一部変数名に変更がありました。
それら変更内容において参考になったページはこちらです。
![](https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a)
Undefined class 'FirebaseUser'
I'm new to Flutter. I have an Issue with Firebase Auth/ Google Auth
The FirebaseUser is not defined
Code:
FirebaseAuth _auth = FirebaseAuth.instance;
GoogleSign...
Googleログインの実行
いざログインボタンを押してみると、以下のエラーが発生しました。
type 'platformexception' is not a subtype of type 'string'
これはAndroidだけで起こるエラーのようです。
僕はWindowsを利用しており、デバッグも仮想のAndroidを利用しています。
対処は以下のページを参考に行いました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9Rmx1dHRlciVFMyU4MSVBNyVFMyU4MSVCNiVFMyU4MSVBNCVFMyU4MSU4QiVFMyU4MSVBMyVFMyU4MSU5RiVFOCU4OSVCMiVFMyU4MiU5MyVFMyU4MSVBQSVFNSU5NSU4RiVFOSVBMSU4QyVFMyU4MSVBRSVFOCVBNyVBMyVFNiVCMSVCQSVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTlkNjQ4Zjk5YmY5ZTRhMGRjYzM3NWNiMWE2YzQyMDk&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwS2ludGVjaCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NWM5MThhY2VjYjY1NzhiMWRkZTNlODg0MDRjOGU5YTM&blend-x=142&blend-y=491&blend-mode=normal&s=9fede540ce25ec8da4f52696ba95cea8)
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アドレスにしました。
ログインがうまくいっていれば、メールアドレスが画面に表示されるはずです。
![](https://makoto-life.com/wp-content/uploads/2021/08/image-29-532x1024.png)
無事アドレスが表示されました。
以降は、ユーザーごとのタスクが表示できるように、設定を変更していきたいと思います。
コメント