Firebase 入門 - ユーザー認証を利用する

Firebaseを使ってユーザー認証を簡単に実装するための手順をまとめてみました。

# Authentication
サーバー側のコードを使わずに、さまざまなプロバイダのユーザーを認証し管理できる機能です。
今回はFacebookログインをためしました。

1. [Facebook開発者向けページ](https://developers.facebook.com/?locale=ja_JP)で新しいアプリケーションを追加します。<br>![スクリーンショット 2017-03-06 18.13.36.png](https://qiita-image-store.s3.amazonaws.com/0/100147/81996907-a89c-0d80-4c58-6dcfc4f5a84b.png)

1. アプリ詳細を開いて アプリID と app secret を確認します。<br> ![スクリーンショット 2017-03-06 18.27.19.png](https://qiita-image-store.s3.amazonaws.com/0/100147/60bccea6-07b2-ba83-722f-c000de1cec66.png)

1. 左メニュー"製品を追加"を選択して "Facebookログイン" を追加します。<br> ![スクリーンショット 2017-03-06 18.39.42.png](https://qiita-image-store.s3.amazonaws.com/0/100147/6cefdcc4-c9db-2455-b61d-b082927ba00b.png)
  
1. Firebaseコンソールを開き ユーザー認証を追加したいプロジェクトを選びます。<br>[Firebaseコンソール](https://console.firebase.google.com/?hl=ja)
1. 左メニュー "Authentication" を選択して ログインプロバイダ Facebookを選びます。<br>![スクリーンショット 2017-03-06 18.04.52.png](https://qiita-image-store.s3.amazonaws.com/0/100147/cdbe1322-56cd-be82-1a43-02deebd978ce.png)

1. Facebook認証を有効にして Facebook開発者向けページ で確認したアプリIDとアプリシークレットを入力する。OAuth リダイレクト URI をコピーしておく<br>![スクリーンショット 2017-03-06 18.46.09.png](https://qiita-image-store.s3.amazonaws.com/0/100147/f5b27cd3-80cc-36a2-0fe8-c5f938834898.png)

1. Facebook開発者向けページに戻って先程追加したFacebookログインの 有効なOAuthリダイレクトURI 欄に ペーストする。<br>![スクリーンショット 2017-03-06 18.46.48.png](https://qiita-image-store.s3.amazonaws.com/0/100147/452019f3-2c86-f968-f965-e6de7f2023e3.png)

ここまでの操作でFirebaseを利用したFacebook認証が有効になりました。 
続いて javascript でログイン処理を実装していきます。

# JavaScript で Facebook ログイン実装をする。
1. "ウェブアプリに Firebase を追加"を選択して表示される jaavascript を index.htmlに追加する<br> ![スクリーンショット 2017-03-02 13.58.25.png](https://qiita-image-store.s3.amazonaws.com/0/100147/c89505a3-f062-a1d7-1d76-b24b59cba435.png)

    ```
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "あなたのAPIキー",
    authDomain: "myfirstfirebase(的な名前).firebaseapp.com",
    databaseURL: "https://myfirstfirebase-(的な名前).firebaseio.com",
    storageBucket: "myfirstfirebase-(的な名前).appspot.com",
  };
  firebase.initializeApp(config);
</script>
    ```

1. htmlにログイン処理を開始するためのボタンを追加する。<br>```<input type="button" value="ログイン" id="btnLogin">```
1. Facebook プロバイダ オブジェクトのインスタンスを作成する。<br> ``` var provider = new firebase.auth.FacebookAuthProvider(); ```
1. Firebase プロバイダ オブジェクトを使用して Firebase での認証をする。<br>今回はログインページをポップアップして認証する signInWithPopup を利用しました。

    ```
    var clickBtnLogin = function(){
      //認証
      firebase.auth().signInWithPopup(provider).then(function(result) {
        //ログイン成功
        var token = result.credential.accessToken;
        var user = result.user;
      }).catch(function(error) {
        //エラー
        var errorCode = error.code;
        var errorMessage = error.message;
        var email = error.email;
        var credential = error.credential;
      });
    };

    window.onload = function() {
      document.getElementById("btnLogin").onclick = clickBtnLogin;
    };
	```
1. ローカル環境で実行して内容を確認してみる <br>``` firebase serve ```<br>表示される URLをブラウザで開く<br>```http://localhost:5000```
1. Facebookログイン出来ることを確認する。
1. Firebaseコンソールを開いてAuthenticationメニューを選択して、ユーザーが追加されていることを確認する。<br>![スクリーンショット 2017-03-06 20.19.14.png](https://qiita-image-store.s3.amazonaws.com/0/100147/51ac5bfb-622f-2022-cd91-35200386e207.png)
1. デプロイして公開してみる。<br>``` firebase deploy --only hosting ```
1. デプロイ成功したらブラウザで開いてログインを試してみる。<br>```firebase open hosting:site```  

ユーザー認証を自分で実装するとなると、データベース設計や管理画面の実装などが必要でハードルがあるのですが Firebaseのユーザー認証 を利用すると、そのへんを考えなくても簡単に実装することができました。

# 参考
[JavaScript で Facebook ログインを使用して認証する](https://firebase.google.com/docs/auth/web/facebook-login)