JavaScript
Firebase

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

More than 1 year has passed since last update.

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


Authentication

サーバー側のコードを使わずに、さまざまなプロバイダのユーザーを認証し管理できる機能です。

今回はFacebookログインをためしました。


  1. Facebook開発者向けページで新しいアプリケーションを追加します。
    スクリーンショット 2017-03-06 18.13.36.png


  2. アプリ詳細を開いて アプリID と app secret を確認します。
    スクリーンショット 2017-03-06 18.27.19.png


  3. 左メニュー"製品を追加"を選択して "Facebookログイン" を追加します。
    スクリーンショット 2017-03-06 18.39.42.png


  4. Firebaseコンソールを開き ユーザー認証を追加したいプロジェクトを選びます。
    Firebaseコンソール


  5. 左メニュー "Authentication" を選択して ログインプロバイダ Facebookを選びます。
    スクリーンショット 2017-03-06 18.04.52.png


  6. Facebook認証を有効にして Facebook開発者向けページ で確認したアプリIDとアプリシークレットを入力する。OAuth リダイレクト URI をコピーしておく
    スクリーンショット 2017-03-06 18.46.09.png


  7. Facebook開発者向けページに戻って先程追加したFacebookログインの 有効なOAuthリダイレクトURI 欄に ペーストする。
    スクリーンショット 2017-03-06 18.46.48.png


ここまでの操作でFirebaseを利用したFacebook認証が有効になりました。

続いて javascript でログイン処理を実装していきます。


JavaScript で Facebook ログイン実装をする。



  1. "ウェブアプリに Firebase を追加"を選択して表示される jaavascript を index.htmlに追加する
    スクリーンショット 2017-03-02 13.58.25.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>


  2. htmlにログイン処理を開始するためのボタンを追加する。
    <input type="button" value="ログイン" id="btnLogin">


  3. Facebook プロバイダ オブジェクトのインスタンスを作成する。
    var provider = new firebase.auth.FacebookAuthProvider();



  4. Firebase プロバイダ オブジェクトを使用して Firebase での認証をする。
    今回はログインページをポップアップして認証する 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;
    };



  5. ローカル環境で実行して内容を確認してみる
    firebase serve
    表示される URLをブラウザで開く
    http://localhost:5000


  6. Facebookログイン出来ることを確認する。


  7. Firebaseコンソールを開いてAuthenticationメニューを選択して、ユーザーが追加されていることを確認する。
    スクリーンショット 2017-03-06 20.19.14.png


  8. デプロイして公開してみる。
    firebase deploy --only hosting


  9. デプロイ成功したらブラウザで開いてログインを試してみる。
    firebase open hosting:site


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


参考

JavaScript で Facebook ログインを使用して認証する