Help us understand the problem. What is going on with this article?

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

More than 3 years have 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 ログインを使用して認証する

t_furu
1980年鹿児島県霧島市生まれ 東京の中小IT企業にて物流システム開発に従事。その他通信関連企業経験を経てフリーランスとなり、ソフトウェアだけでなくハードウェア系込みのサービス開発に取り組み、現在に至る。 鹿児島初の モノづくりスペース TUKUDDO を運営中してましたが、移転閉店。 現在は 秋葉原にて ベンチャー企業に所属して Webサービスを開発中。
http://tf-web.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away