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

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

Authentication

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

1. Facebook開発者向けページで新しいアプリケーションを追加します。
   

2. アプリ詳細を開いて アプリID と app secret を確認します。
   

3. 左メニュー"製品を追加"を選択して "Facebookログイン" を追加します。
   

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

5. 左メニュー "Authentication" を選択して ログインプロバイダ Facebookを選びます。
   

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

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

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

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

1. "ウェブアプリに Firebase を追加"を選択して表示される jaavascript を index.htmlに追加する
   

```

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

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

3. 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;
   };
   

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

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

6. Firebaseコンソールを開いてAuthenticationメニューを選択して、ユーザーが追加されていることを確認する。
   

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

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

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

参考

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