フラッタのシンプルなログインフロー、それからFirebase
34402 ワード
フラッタにおける簡単なfirebaseログインフロー
次のコンポーネントを使用して簡単なアプリケーションを作成します
See Google CodeLabs Flutter for Firebase for step by step instructions for setting up you project on iOS or Android
Firebaseでテストユーザーを作成する
我々はアプリケーションを構築しているので、今すぐアプリケーションでユーザーを作成するための機能性がないので、FireBaseコンソールにログインして、プロジェクトにユーザーを追加してください.必ずFireBaseコンソールでプロジェクトを更新するときに電子メール認証を有効にしてください.
デフォルトフラッタープロジェクトの浄化
プロジェクトの作成
flutter create simple_firebase_auth
HomePage and HomePageState ファイルからのウィジェットmain.dart .変更する
home プロパティMaterialApp ウィジェットを指すウィジェットLoginPage ウィジェットは次のセクションで作成しますファイルが完了すると、このファイルは似ているはずです
import 'package:flutter/material.dart';
import 'package:simple_firebase_auth/login_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(),
);
}
}
LoginPageウィジェットを作成する
の創造を通して歩く
LoginPage 申し込み.我々はキャプチャする必要がありますemail とpassword 通じるAuthService ログイン関数を呼び出します.必要に応じて簡単なページを作ります
TextFormField ウィジェットと1つRaisedButton クリックすると、ログインが起こります.lib ディレクトリ名login_page.dartlogin_page.dartimport 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Login Page Flutter Firebase"),
),
body: Center(
child: Text('Login Page Flutter Firebase Content'),
),
);
}
}
home プロパティmain.dart ウィジェットLoginPage 私たちはあなたがライブリロードとの変更を見ることができるので、UIを介して動作中スタイルとテキストフィールドの追加
ページの本文を中心にする
Column コラムの子供たちが主にTextFormField とRaisedButtonフォームフィールドとボタンを保持する中心のコンテナー body: Container(
padding: EdgeInsets.all(20.0),
child: Column()
)
Column ウィジェット.我々は、これが容認できるように、フォームフィールドのいくつかの基本的なスタイルを行います.詳細はFlutterドキュメンテーションを見てくださいTextFormFields body: Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Login Information',
style: TextStyle(fontSize: 20),
),
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(labelText: "Email Address")),
TextFormField(
obscureText: true,
decoration: InputDecoration(labelText: "Password")),
RaisedButton(child: Text("LOGIN"), onPressed: () {}),
],
),
),
SizedBox ウィジェットと設定height アプリケーションのいくつかの間隔を取得するプロパティ.置換するchildren プロパティColumn 必要な間隔を得るウィジェット children: <Widget>[
SizedBox(height: 20.0), // <= NEW
Text(
'Login Information',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 20.0), // <= NEW
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(labelText: "Email Address")),
TextFormField(
obscureText: true,
decoration: InputDecoration(labelText: "Password")),
SizedBox(height: 20.0), // <= NEW
RaisedButton(child: Text("LOGIN"), onPressed: () {}),
],
フォームフィールドからテキスト値を取得する
私たちはAを使用するつもりです
Form ウィジェットとGlobalKey , これらの概念に関する追加情報は、フラッター料理セクションで見つかりますBuilding a form with validation でフォームキーを追加する
LoginPage ウィジェットclass _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
String _password;
String _email;
onSaved にTextFormFields 我々は、電子メールとパスワードを持っているときsave メソッドをフォームに呼び出すと、保存されているメソッドのすべてのウィジェットがローカル変数を更新するために呼び出されます. TextFormField(
onSaved: (value) => _email = value, // <= NEW
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(labelText: "Email Address")),
TextFormField(
onSaved: (value) => _password = value, // <= NEW
obscureText: true,
decoration: InputDecoration(labelText: "Password")),
Column 新しいウィジェットForm ウィジェットは、コードは次のようになります body: Container(
padding: EdgeInsets.all(20.0),
child: Form( // <= NEW
key: _formKey, // <= NEW
child: Column(
children: <Widget>[
....
],
),
),
),
TextFormField 更新され、我々は_formKey 提供するフィールドを検証するだけでなく、save メソッド.コードを
RaisedButton onPressed 以下のメソッドを使用すると、アウトウィジェットのメールアドレスとパスワードの値が得られます.我々は現在、これらの値をAuthService これは、firebase signin機能をラップします. // save the fields..
final form = _formKey.currentState;
form.save();
// Validate will return true if is valid, or false if invalid.
if (form.validate()) {
print("$_email $_password");
}
ホームページウィジェットを作成する
今のところ、我々はちょうどどのように流れが動作を実証しようとしているので、我々はホームページを簡単に保つでしょう.コメントアウトを無視する
LogoutButton ウィジェットについては、チュートリアルの後のセクションで説明します.lib ディレクトリ名home_page.darthome_page.dartimport 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Flutter Firebase"),
//actions: <Widget>[LogoutButton()],
),
body: Center(
child: Text('Home Page Flutter Firebase Content'),
),
);
}
}
main.dart 次のインポート文を追加しますimport 'home_page.dart';
home プロパティー:home: HomePage(title: 'Flutter Demo Home Page'),
home: HomePage(),
認証サービスのテンプレートを作成する
ここでは、FireBaseとは別の認証サービスを構築し、すべての動作を検証し、FireBaseを統合します.
このサービスでは、私たちは
ChangeNotifier と方法notifyListeners これにより、このサービスを使用しているウィジェットがメソッドが呼び出されたときに更新されます.電話しているnotifyListeners 我々が更新するときcurrentUser ユーザーがログインしているか、ログアウトしたか、ユーザーの状態に基づいてアプリケーションを更新したいということです.More information on
Providerand State Management can be found here in the Flutter Documentation
ベースラインとして必要なのは次のとおりです.
import 'dart:async';
import 'package:flutter/material.dart';
class AuthService with ChangeNotifier {
var currentUser;
AuthService() {
print("new AuthService");
}
Future getUser() {
return Future.value(currentUser);
}
// wrappinhg the firebase calls
Future logout() {
this.currentUser = null;
notifyListeners();
return Future.value(currentUser);
}
// wrapping the firebase calls
Future createUser(
{String firstName,
String lastName,
String email,
String password}) async {}
// logs in the user if password matches
Future loginUser({String email, String password}) {
if (password == 'password123') {
this.currentUser = {'email': email};
notifyListeners();
return Future.value(currentUser);
} else {
this.currentUser = null;
return Future.value(null);
}
}
}
currentUser ユーザがユーザを呼び出すオブジェクトをlogin パスワードを設定しますcurrentUser そして、ユーザはログインします.これは、現在の呼び出し時にユーザーが提供されますgetUser メソッド.ユーザをログ出力するには、currentUser プロパティがNULLになったことを示します.アプリケーション起動時のユーザー状態の決定
最初の課題は、アプリケーションとの作業を開くときに、アプリケーションを起動するページを決定することです.ここで何をしたいかは、ユーザがいるかどうかを決定することです.私たちは
AuthService 我々は、上記と組み合わせて作成されますFutureBuilder フラッタからのウィジェットは、いずれかの正しい最初のページをレンダリングするHomePage またはLoginPageプロバイダーの使用
イン
main.dart デフォルトを更新する必要がありますmain このように見える我々は、アプリケーション全体をラップしているChangeNotifierProvider ウィジェットツリーをスキャンして、型のオブジェクトを見つける能力を得るにはAuthService .void main() => runApp(
ChangeNotifierProvider<AuthService>(
child: MyApp(),
builder: (BuildContext context) {
return AuthService();
},
),
);
MyAppウィジェットの変更
に入る
main.dart を返します.MyApp ウィジェットは、ルートを設定します.このウィジェットは、アプリケーションがHomePage ウィジェットLoginPage ウィジェットは、アプリケーションが起動されます.class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: FutureBuilder(
// get the Provider, and call the getUser method
future: Provider.of<AuthService>(context).getUser(),
// wait for the future to resolve and render the appropriate
// widget for HomePage or LoginPage
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return snapshot.hasData ? HomePage() : LoginPage();
} else {
return Container(color: Colors.white);
}
},
),
);
}
}
パート1の終わり
この時点では、パスワードをPassword 123として提供する場合は、ユーザーが正常にログインされる基本的なログインフローを使用してアプリケーションを持つ必要があります
何らかのエラーが発生した場合、ダイアログボックスにエラーメッセージを表示する少し余分な機能を追加しました.
アーロンフンダース / Simplechen FirebaseRain Auth
フラッタにおける簡単なfirebaseログインフロー
フラッタにおける簡単なfirebaseログインフロー
ステップバイステップバイステップ
Documentation for Simple Firebase Login Flow in Flutter - Part One ソースコードはbranch
Documentation for Simple Firebase Login Flow in Flutter - Part Two ソースコードはhead
There is a more complete example with login and account creation available here
始める
このプロジェクトはフラッターアプリケーションの出発点です.
あなたが最初のフラッタープロジェクトであるならば、あなたを得るいくつかの資源は、始まりました:
online documentation , チュートリアルを提供します.
サンプル、モバイル開発のガイダンス、および完全なAPI参照.
View on GitHub
アーロン・サンダース — CEO明らかに革新的なIncは、チェックアントアントレプレナー、Chenhn開発者
Reference
この問題について(フラッタのシンプルなログインフロー、それからFirebase), 我々は、より多くの情報をここで見つけました https://dev.to/aaronksaunders/simple-login-flow-in-flutter-then-firebase-part-one-29n6テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol