京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

こんにちは。
ニシザワです。

先日GCP Next Tokyoに参加してfirebaseって簡単にアプリ作れるんだよ〜ってのを学んできたので実際に使って見ました
実演されてたのが、リアルタイムデータベースを使った、メッセージのやり取りです。
え?そんなに簡単にできるの?って疑心暗鬼になっていたんですが、実際1時間もかからないくらいで作れてしまいました。
ぐぐってたら既に超分かり易い記事を発見!
FirebaseでWebチャットアプリをデプロイするまで（1時間コース）
これの通りすれば完成です。
では、本日はこれで終了です。







・・・
うそです。笑
これだけなら書く意味ないですもんねw
ってことで、ここに新しい認証を追加する方法を書きたいと思います。
認証と言っても、Firebaseに既に実装されているのでそれを使うだけなんでさっくっとできてしまいます。
今回は、facebook認証を追加したいと思います。

Facebook for Developersでクレデンシャルを取得する

Facebook for Developersでアプリのアプリケーション ID とアプリ シークレットを取得します。

認証を許可する

Firebase consoleでFacebook認証を許可します。
Authentication>ログイン方法
アプリケーションIDとアプリシークレットに先程取得したクレデンシャルを入れます。

Firebase console で生成された OAuth リダイレクト URI（my-app-12345.firebaseapp.com/__/auth/handler など）をFacebook for Developersのコンソールの
Facebookログインの有効なOAuthリダイレクトURIに入れます。

これで準備が完了しました。後は組み込みです。

htmlにボタンを追加

    <button hidden id="sign-in-facebook" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">

        <i class="material-icons">account_circle</i>Sign-in with FaceBook

    </button>

main.jsに必要処理を追加

FriendlyChat関数に下記を追加

   this.signInFacebookButton = document.getElementById('sign-in-facebook');
    this.signInFacebookButton.addEventListener('click', this.signInFacebook.bind(this));

認証部分を追加

   FriendlyChat.prototype.signInFacebook = function() {
      // Sign in Firebase using popup auth and Google as the identity provider.
      var provider = new firebase.auth.FacebookAuthProvider();
      this.auth.signInWithPopup(provider);
    };

onAuthStateChangedを下記に変更

   if (user) { // User is signed in!
    // Get profile pic and user's name from the Firebase user object.
        var profilePicUrl = user.photoURL;
        var userName = user.displayName;

        // Set the user's profile pic and name.
        this.userPic.style.backgroundImage = 'url(' + profilePicUrl + ')';
        this.userName.textContent = userName;

        // Show user's profile and sign-out button.
        this.userName.removeAttribute('hidden');
        this.userPic.removeAttribute('hidden');
        this.signOutButton.removeAttribute('hidden');

        // Hide sign-in button.
        this.signInButton.setAttribute('hidden', 'true');
        this.signInFacebookButton.setAttribute('hidden', 'true');

        // We load currently existing chant messages.
        this.loadMessages();

        // We save the Firebase Messaging Device token and enable notifications.
        this.saveMessagingDeviceToken();
    } else { // User is signed out!
        // Hide user's profile and sign-out button.
        this.userName.setAttribute('hidden', 'true');
        this.userPic.setAttribute('hidden', 'true');
        this.signOutButton.setAttribute('hidden', 'true');

        // Show sign-in button.
        this.signInButton.removeAttribute('hidden');
        this.signInFacebookButton.removeAttribute('hidden');
    }

これで、新しい認証が追加されて、facebookの認証ができるようになります。
実装字体は15分程でできてしまいます。
本当に簡単にできるので使い勝手がとてもいいですね。
次は、独自の認証を入れてみたいと思います。