皆さんこんにちは（＾＾
前回の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への書き込みとロックモードをやってみます。
ありがとうございました（＾＾