MonacaでFirebaseのSNS認証を利用する

皆さんこんにちは（＾＾

前回の[MonacaでFirebaseのCloud Firestoreを利用してみる](https://qiita.com/nemutame/items/5ca248c5ed15fd670057)
に引き続き、SNS認証をやってみます。

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

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

#Facebookアプリを登録する
[Facebookのデベロッパーサイト](https://developers.facebook.com/)にアクセス。
※開発者登録をしてない人は開発者登録しちゃってください。

「マイアプリ」→「新しいアプリを追加」を選択
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/e0731c2e-b34b-e3bb-d9a5-d3262adbee65.png" width="320">

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/fd5fa2d5-3d8a-b4fe-9d00-928e640acb62.png" width="320">
この設定画面にある”アプリID”と”app secret”は後ほど使うのでコピーしておいてください。


#FirebaseのSNS認証を有効にする
次はFirebaseの管理コンソールに戻ってFacebookを選択してください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/d5d6d63e-b9bc-8e61-9a7a-87c001d2d27f.png" width="320">

「有効にする」を選択するとアプリケーションIDとアプリシークレットが入力可能になるので
先ほどコピーした”アプリID”と”app secret”をペーストしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/b7d010e3-3d5a-f7f1-69af-8edbcdbfa367.png" width="320">
一番下にあるURLをコピーして、「保存」ボタンをクリックします。

#FacebookのOAuth認証を有効にする
またFacebookに戻ります。

プロダクトの「＋」ボタンを押して、Facebookログインを追加します。
※「設定」を押すと追加されます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/8bf33ad9-b8a8-2308-c23a-20ce67a89046.png" width="320">

次にFacebookログインの設定画面で「有効なOAuthリダイレクトURI」に
先ほどFirestoreのほうでコピーしたURLをペーストしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/28781627-4305-d58c-43c8-bb6dfa6f107e.png" width="320">
最後に「変更を保存」をクリックします。

#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.以下のコマンドで証明書を確認しています。

```bash
keytool -list -printcert -jarfile xxx.apk
```

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

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

「Project Overview」から「AndroidアプリにFirebaseを追加」をクリックしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/a15f82de-1627-f386-c6d1-95aaf1a7a53d.png" width="320">

ここで先ほどコピーしたSHA1の値をペーストします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/04fcf149-3c4d-8e61-5418-654a9e514036.png" width="320">
パッケージ名はMonacaに設定してあるパッケージ名に合わせてください。

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

最後にDynamic Linksの設定を行います。
「Dynamic Links」の「始める」をクリックしてください。
<img src="https://qiita-image-store.s3.amazonaws.com/0/151376/d37cd36f-4f14-a4b4-0715-25c7cd45c4f4.png" width="320">
サブドメインを任意で決めて入力して作成を行ってください。
このドメインも使用するのでコピーしておいてください。

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

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

#Monacaのアプリに認証プログラムを追加する
config.xmlを開いて、以下の設定を追加します。

```xml: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のコントローラに追加してログインボタンから呼び出しています。

```javascript:app.js
  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への書き込みとロックモードをやってみます。

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