Image Credit : firebase.google.com
はじめに
Flutterで認証機能を実装するためにFirebaseのGoogle認証を使用してみました。Firebaseを使うことで非常に簡単に実装することができました。この記事ではFlutterからFirebaseのGoogle認証を使用する手順をまとめます。
できるようになること
以下の画像のように、サインインボタンをクリックすることでGoogleアカウントでサインインできるようになります。
このデモのコードは以下のGitHubにあげてあります。
virment/flutter-sample/firebase-google-auth
Firebase Google Auth sample
前提と環境
以下の通りです。
- Flutter 1.5.4-hotfix.2
- Dart 2.3.0
- Firebaseの設定は完了しているとする。
FirebaseをAndroidやiOSアプリから使えるようにするためには、いくつか準備が必要になります。準備がまだできていない方は、以下のFirebaseの公式ドキュメントに手順が載っていますので見てみてください。
Flutter アプリに Firebase を追加する | Firebase
このガイドの手順に沿って、Flutter アプリに Firebase プロダクトを追加してください。
使用するパッケージについて
Google認証を使用するために、pubspec.yaml
のdependencies
に3つのパッケージを追加します。
pubspec.yamldependencies:
flutter:
sdk: flutter
cloud_firestore: ^0.12.5+1
firebase_auth: ^0.11.1+6
google_sign_in: ^4.0.2
また、Google認証を使用したいコードの冒頭に以下を記載して必要なパッケージをインポートします。
main.dartimport 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
Flutterで使用できるFirebase関連のパッケージは、以下の公式ドキュメントにリストが記載されています。
Check out this project on firebaseopensource.com!
FlutterからFirebaseのGoogle認証を使用するコード
以下は冒頭に記載したデモのコードです。Flutterプロジェクト作成時にデフォルトで生成されるコードをベースにしています。
main.dart
// コード全体はGitHub参照
(...以上省略...)
class _MyHomePageState extends State<MyHomePage> {
final GoogleSignIn _googleSignIn = GoogleSignIn();
final FirebaseAuth _auth = FirebaseAuth.instance;
String username = 'Your Name';
Future<FirebaseUser> _handleSignIn() async {
final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
final AuthCredential credential = GoogleAuthProvider.getCredential(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);
final FirebaseUser user = await _auth.signInWithCredential(credential);
setState(() {
username = user.displayName;
});
return user;
}
Future<void> _handleSignOut() async {
_auth.signOut();
setState(() {
username = 'Your name';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'$username',
style: Theme.of(context).textTheme.display1,
),
StreamBuilder(
stream: _auth.onAuthStateChanged,
builder: (context, snapshot) {
if (snapshot.hasData) {
return MaterialButton(
onPressed: () => _handleSignOut(),
color: Colors.red,
textColor: Colors.white,
child: Text('Signout'),
);
} else {
return MaterialButton(
onPressed: () => _handleSignIn()
.then((FirebaseUser user) => setState(() {
username = user.displayName;
print(username);
}))
.catchError((e) => print(e)),
color: Colors.white,
textColor: Colors.black,
child: Text('Login with Google'),
);
}
}),
],
),
),
);
}
}
上記のコードを見てわかるとおり、サインインボタンをクリックしてサインインが完了すると、username
にサインインしたユーザの名前が格納されて画面に表示されます。なお、サインインしたユーザの名前以外の情報も取得可能です。以下はFirebase Authenticationの公式ドキュメントでFlutterの記述方法はありませんが、その他のユーザ情報へのアクセスについて記載されています。
Android で Firebase Authentication を使ってみる | Firebase
ユーザーが正常にサインインした場合は、getCurrentUser メソッドでいつでもアカウント データを取得できます。
他にも例えば以下があります。以下のuser
はFirebaseUser user
です。
user.displayName // ユーザ名
user.email // ユーザのメールアドレス
user.photoUrl // ユーザの画像URL
user.uid // ユーザのID
上記のコードで重要となるのは、以下になります。
- _handleSignIn() : Googleアカウントでのサインインを処理。この関数をボタンの
onPressed
に結びつける。 - _handleSignOut() : Googleアカウントでのサインアウトを処理。この関数をボタンの
onPressed
に結びつける。 - StreamBuilder() : StreamBuilderでサインイン状態(コード内の
_auth.onAuthStateChanged
)に応じてサインインボタンとサインアウトボタンの表示、非表示を切り替える。
まとめ
Firebaseでは他にもFacebookやTwitter、メールアドレスとパスワードの組み合わせによる認証を行うこともできます。
SPONSORED LINK