Firebase AuthをFlutterで使う

FlutterでFirebaseAuthを使う方法について書いていきたいと思います。

## FlutterプロジェクトとFirebaseを結合する

https://codelabs.developers.google.com/codelabs/flutter-firebase/#0

基本的に上にのCodelabのCloud Firestoreを使う直前まで(Codelabでいうところの＃７まで)やればFlutterからFirebaseに接続することができるようになります。

ですのでここでは割愛させていただきます。


## Firebaseの管理画面からパスワード認証を有効にする

この手順はどの環境でやっても同じだと思います。

Firebaseの管理画面を開く→Authenticationをクリック→ログイン方法タブをクリック→「メール/パスワード」をおしてパスワード認証を有効にする

![スクリーンショット 2018-05-20 16.02.39.png](https://qiita-image-store.s3.amazonaws.com/0/139360/dcbe8250-7fc5-c03d-d090-85026f808850.png)


## pubspec.ymlを編集する

下記を追加しましょう。

```yml
dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.5.10

```

追加したら、

```
flutter packages get
```
を実行しましょう。

`^0.5.10` のバージョンについては最新のものをお使いください。
下記のURLから確認できます。

https://pub.dartlang.org/packages/firebase_auth#-readme-tab-


## 実装する

こんな画面をサンプルとして作成します。

![スクリーンショット 2018-05-20 16.20.50.png](https://qiita-image-store.s3.amazonaws.com/0/139360/dccac710-9756-5937-e55a-20ec6ded9e23.png)


```dart

final emailInputController = new TextEditingController();
final passwordInputController = new TextEditingController();

Widget _layoutBody() {
    return new Center(
      child: new Form(
        child: new SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              const SizedBox(height: 24.0),
              new TextFormField(
                controller: emailInputController,
                decoration: const InputDecoration(
                  border: const UnderlineInputBorder(),
                  labelText: 'Email',
                ),
              ),
              const SizedBox(height: 24.0),
              new TextFormField(
                controller: passwordInputController,
                decoration: new InputDecoration(
                  border: const UnderlineInputBorder(),
                  labelText: 'Password',
                ),
                obscureText: true,
              ),
              const SizedBox(height: 24.0),
              new Center(
                child: new RaisedButton(
                  child: const Text('Login'),
                  onPressed: () {
                    var email = emailInputController.text;
                    var password = passwordInputController.text;
                    // ここにログイン処理を書く
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
```

とりあえずスクショの画面を作りたいって場合は `Sccafold` のbodyに上記のメソッドをコピペすればとりあえず動きます。

次に、実際にログイン処理を実装したメソッドを作成します。

```dart

Future<AuthResult> _signIn(String email, String password) async {
    final AuthResult result = await _firebaseAuth.signInWithEmailAndPassword(
        email: email, password: password);
    print("User id is ${result.user.uid}");
    return result;
  }
```
Flutterでは、 `async` `await` をよく使うみたいなのでこの機会に勉強しないといけないですね、、、
https://qiita.com/rana_kualu/items/f3dfcb8e7ef0cc9955d6


次に、上で作成したメソッドを呼んでみます。

`new RaisedButton(~~~~~~~~~~~~` から抜粋します。

```dart

new Center(
    child: new RaisedButton(
      child: const Text('Login'),
      onPressed: () {
           var email = emailInputController.text;
           var password = passwordInputController.text;
           return _signIn(email, password)←こんな感じで呼ぶ
              .then((AuthResult result) => print(result.user))
              .catchError((e) => print(e));
           },
       ),
)
```

これでログインに成功するとアプリのuser情報がprintで表示されます。