Product for Google IoT Solutions - 5分でFirebaseの認証がわかる

# 背景

* Firebaseについて、以下の文書に紹介したことがありました。
 * [Product for Google IoT Solutions - Firebaseを触ってみた](http://qiita.com/alingogo/items/ee3daebc6078dc6d8956)
 * [Product for Google IoT Solutions - Firebaseとraspberry piをリアルタイムで通信してみる](http://qiita.com/alingogo/items/545e5244323afb4469ae)
* Firebaseの認証についての質問がよくあって、この文書に紹介します。

# Email/Password認証

### Firebase設定

* https://{app_name}.firebaseio.com/ Firebaseマネージメント画面に入ります。
* 左のmenuボタンから、「Login&Auth」をクリックします。
* Email/Password認証画面が表示されて、以下のように設定します
    * ドメイン追加
    * Email/Password認証を有効化

![ne_login.png](https://qiita-image-store.s3.amazonaws.com/0/13451/951882ed-e0c8-1cc4-8c97-95cdbf872f08.png)


### コード実装

* [jsbin](https://jsbin.com)を使って、コードを実装して試しました。output専用画面を利用したので、ドメインがjsbin.comじゃなくて、output.jsbin.comです。

```
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <title>firebase test</title>
  <script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
  <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button id="login" type="submit" class="btn btn-default">Firebase Register</button>
    </div>
  </div>
</form>
<script>
  var ref = new Firebase("https://{app_name}.firebaseio.com");

  $("#login").click(function () {
    ref.createUser({
      email    : $("#inputEmail3").val(),
      password : $("#inputPassword3").val()
    }, function(error, userData) {
    });
  })
</script>
</body>
</html>
```

### Register

![pw_results_res.png](https://qiita-image-store.s3.amazonaws.com/0/13451/cb16849a-ecac-b3e5-ab4c-806688944df4.png)

* EmailとPasswordを入力して、Firebase Registerボタンをクリックします。


### 結果

![pw_results_f.png](https://qiita-image-store.s3.amazonaws.com/0/13451/0ccb4bb2-2793-4991-9dc8-c16634f7e0cd.png)

* FirebaseのEmail/Password認証画面の下に、registerしたユーザを表示されます。




# Oauth認証(Twitter)

### Firebase設定

* https://{app_name}.firebaseio.com/ Firebaseマネージメント画面に入ります。
* 左のmenuボタンから、「Login&Auth」をクリックします。
* Twitterタブをクリックします。
* Twitter認証画面が表示されて、以下のように設定します
    * Twitter認証を有効化
    * Twitter API KeyとTwitter API Secretを追加

![twitter_firebase.png](https://qiita-image-store.s3.amazonaws.com/0/13451/3d21f393-cb88-91f3-f54f-ca67c83d7520.png)

### Twitter Callback URL設定

* https://auth.firebase.com/v2/{app_name}/auth/twitter/callback

![twitter_callback.png](https://qiita-image-store.s3.amazonaws.com/0/13451/894cb544-5ba3-b88c-cb44-9d89af31e8f2.png)


### コード実装

* [jsbin](https://jsbin.com)を使って、コードを実装して試しました。

```
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <title>firebase test</title>
  <script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<button id="login"  class="btn btn-primary">Firebase Twitter</button>
  <p id="result"></p>
  <script>
  var ref = new Firebase("https://{app_name}.firebaseio.com");

  $("#login").click(function () {
      ref.authWithOAuthPopup("twitter", function (error, authData) {
      if (error) {
        $("#result").text("Login Failed!");
      } else {
        $("#result").text("Authenticated successfully with payload");
      }
    });
  })
</script>
</body>
</html>
```

### Twitter OAuth 認証

![twitter.png](https://qiita-image-store.s3.amazonaws.com/0/13451/96723017-d808-b5e6-e864-0a92282cd6ff.png)

* Firebase Twitter認証ボタンをクリックして、Twitter認証が続きます。

![twitter_ninn.png](https://qiita-image-store.s3.amazonaws.com/0/13451/48472be2-d3c4-7fcf-eeab-61acac8455c0.png)


### 結果

![twitter_result2.png](https://qiita-image-store.s3.amazonaws.com/0/13451/88517c83-27a2-2cbc-6dab-bf013a5db2d8.png)

* 画面で、認証成功のログが確認できます。


# まとめ

* Firebaseの認証が簡単ですね。
* Facebook, Github, GoogleのOAuth認証もサポートします。Firebaseを使って、アプリを作れば、とても便利ですよね。