皆さんこんにちは（＾＾

前回のMonacaでFirebaseのCloud Firestoreを利用してみる
に引き続き、SNS認証をやってみます。

今回はFacebook認証を利用しますので、事前にFacebookアプリを登録する必要があります。

※環境
FirebaseのSNS認証でカスタムプラグインを利用するので
今回からはMonacaのProプラン以上が必要になります。
※Freeプランの方は14日間トライアルでお試しください。
実機での確認はAndroidで行っています。

Facebookアプリを登録する

Facebookのデベロッパーサイトにアクセス。
※開発者登録をしてない人は開発者登録しちゃってください。

「マイアプリ」→「新しいアプリを追加」を選択

次に表示されたダイアログで表示名と連絡先メールアドレスを入力します。
これはFacebook認証を行うときに、ユーザーに表示される名称になるので
実際のサービス名に合わせたほうが良いと思います。
「アプリIDを作成してください」をクリックしてアプリが作られます。

この設定画面にある”アプリID”と”app secret”は後ほど使うのでコピーしておいてください。

FirebaseのSNS認証を有効にする

次はFirebaseの管理コンソールに戻ってFacebookを選択してください。

「有効にする」を選択するとアプリケーションIDとアプリシークレットが入力可能になるので
先ほどコピーした”アプリID”と”app secret”をペーストしてください。

一番下にあるURLをコピーして、「保存」ボタンをクリックします。

FacebookのOAuth認証を有効にする

またFacebookに戻ります。

プロダクトの「＋」ボタンを押して、Facebookログインを追加します。
※「設定」を押すと追加されます。

次にFacebookログインの設定画面で「有効なOAuthリダイレクトURI」に
先ほどFirestoreのほうでコピーしたURLをペーストしてください。

最後に「変更を保存」をクリックします。

Monacaの準備

ここからはMonacaのアプリでFirebaseのSNS認証を使うための準備です。

まずは「Coradovaプラグインのインポート」で
cordova-universal-links-plugin
cordova-plugin-buildinfo
cordova-plugin-browsertab
cordova-plugin-customurlscheme
の4つを追加します。

cordova-plugin-customurlschemeには↓のインストールパラメータを設定してください。
URL_SCHEME=com.firebase.cordova

Androidデバッグビルドでビルドします。
さらに、そのビルドされたapkの”署名証明書SHA-1”を取得します。
私は以下の手順で取得しています。
1.Monacaのビルドログから最新のapkをPCにダウンロード
2.以下のコマンドで証明書を確認しています。

keytool -list -printcert -jarfile xxx.apk

ここで表示されたSHA1の値をコピーしておいてください。

FirebaseにAndroidアプリの設定を追加する

またFirebaseに戻って、今度はAndroidの実機からSNS認証を使えるようにする設定です。

「Project Overview」から「AndroidアプリにFirebaseを追加」をクリックしてください。

ここで先ほどコピーしたSHA1の値をペーストします。

パッケージ名はMonacaに設定してあるパッケージ名に合わせてください。

「アプリを登録」をクリックして、「設定ファイルのダウンロード」と「FirebaseSDKの追加」は無視して次へ。
最後の確認も長いのでスキップしちゃって良いです。

最後にDynamic Linksの設定を行います。
「Dynamic Links」の「始める」をクリックしてください。

サブドメインを任意で決めて入力して作成を行ってください。
このドメインも使用するのでコピーしておいてください。

以上で準備は完了です。
ここまでものすごく長いですよね；お疲れ様でした。

いよいよプログラムのほうに掛かります。

Monacaのアプリに認証プログラムを追加する

config.xmlを開いて、以下の設定を追加します。

<universal-links>
    <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
    <host name="AUTH_DOMAIN" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

DYNAMIC_LINK_DOMAINを、さっきコピーしたDynamic Linksのドメインに書き換えます。
AUTH_DOMAINは前回の記事でapp.jsの一番最初に追加したconfigのauthDomainの値で書き換えます。

次にapp.jsにプログラムを追加します。
私の場合はAngularJSのコントローラに追加してログインボタンから呼び出しています。

  this.login = function(){
    var provider = new firebase.auth.FacebookAuthProvider();

    // Facebookに飛んで認証を要求する
    firebase.auth().signInWithRedirect(provider)
      .then(function(){
        // Facebookから返ってきたら結果を取得
        firebase.auth().getRedirectResult()
          .then(function(result){
            // ログインに成功した
            var token = result.credential.accessToken;
            var user = result.user;
            alert(JSON.stringify(user));
          })
          .catch(function(error){
            // ログイン失敗
            alert(JSON.stringify(error));
          });
      });
  };

以上で完了です。
Androidデバッグビルドでビルドしてから、実機にインストールして確認してみてください。
※カスタムビルドデバッガーではありません。
※カスタムビルドデバッガーだと認証のリダイレクトが上手くいかないです。

ユーザー情報がアラートダイアログに表示されたら成功です。

FirebaseのAuthenticationのページを見てみると
今ログインしたアカウントが追加されているハズ。

設定だけでかなりのボリュームだったので今回はここまでです。
次回はCloud Firestoreへの書き込みとロックモードをやってみます。

ありがとうございました（＾＾