ionicによるfirebase外部アプリ認証(Firebase authentication with Facebook, Twitter, Google, and so on.)

このたびiWannaにTwitter及びFacebookのAPIを利用したログインをつけることができました。

そもそも、Firebaseには専用の関数が用意されており、とても楽に実装することができました。

（最初はngCordovaなどでやろうとして、わからねー！と思っていたのですが、無駄に考えすぎていましたね…）

以下に手順を残しておきます。例はTwitterで。

ここを見ました。基本的にここに従えば大丈夫。

www.firebase.com

手順

①API key とAPI secretを取得（callbackURLの記載）

②.jsファイルに記述

③htmlで関数呼び出しアクションの記述

(④in app browser の導入)

※ionic serveについて

①API key とAPI secretを取得（callbackURLの記載）

まず、Twitter developers（https://dev.twitter.com/） にアクセス、ログインの上、下部の「Manage Your Apps」をクリック

次に移動先で右上のCleate New App をクリックすると以下の画面に。

ここに自分の作っているアプリの情報を書いていきます。

ここで注意。矢印部に適切なURLを入れないと動きません。（ここに入力するのはプロジェクトを作った後でもいいです）

FirebaseのTwitter Authenticationをよんだら、

Set the application's Callback URL tohttps://auth.firebase.com/v2/"YOUR-FIREBASE-APP"/auth/twitter/callback

とあるので、下線部の"YOUR-FIREBASE-APP"

のところを自分のアプリの名前に変えて、入力しましょう。

規約に同意し、作成。Keys and~のタブを見ると、API key とAPI secretが生成されています。

自分のfirebaseのLogin&Authタブに上で得たkeyを打ち込みます。

この際、Enable Twitter Authenticationにチェックを忘れずに。

②.jsファイルに記述

これについても最初のリンクを見ればわかるのですが、authWithOAuthPopup関数を使って一発です。
いかにiWannaのコードを載せておきます。

var ref = new Firebase(FURL);
var auth = $firebaseAuth(ref);

$scope.TwitterLogin = function() {
auth.$authWithOAuthPopup("twitter", function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
console.log("Authenticated successfully with payload:", authData);
return authData
}
})
.then(function(authData){
var uid = authData.uid;
var imgURL = { images : authData.twitter.profileImageURL};
var userRegister = {
name: authData.twitter.username,
email: "",
password: "",
intro: "User Information",
images : [imgURL],
twId : authData.twitter.id,
};
$firebaseArray(ref.child('users').child(uid)).$loaded().then(function(data) {
if (data.length == 0){//array==0 未登録
Auth.createProfile(uid,userRegister);
};
});

});
$state.go('tab.dash');
};

Auth.createProfileでfirebase上にユーザー情報を残しています。
ifのところは、登録したい場所にデータがあるなら再度ユーザー情報の上書きをしないようにしています。
このauthDataというのが素晴らしく、固有のユーザーid、twitterのアカウント名、画像URLなどいろいろオブジェクトで入ったものになります。
これを読めば簡単にユーザー情報を受け渡しできますね。
どんなことができるかの詳細はここで

$authWithOAuthPopup("twitter", function(error, authData)の"twitter"部をかえればいろいろと対応するみたいです。

③htmlで関数呼び出しアクションの記述

<ion-view view-title="">
  <ion-content class = "landing" style =" text-align : center; margin-right: auto; margin-left : auto; ">
    <a class="button button-outline icon-left ion-social-facebook-outline  button-positive" style = "border-color:#ffffff; border:solid 2px; color:#ffffff " ng-click= "FacebookLogin()">Login with Facebook</a>
  </ion-content>
</ion-view>

ボタンにng-clickで関数を呼んでいます。

④in app browser の導入

実機で動かすとき、このままではブラウザが立ち上がらず、外部認証画面に行かないかと思います。
in app browserを導入しておいてください。
（自分はやっていないのでこれは別の方のブログなどを参考にしていただければ…）

以上になります。

おまけ
ionic serve で外部認証がうまくいかない！

こんなかんじで
Unauthorized Request Origin
You are attempting to login with Twitter from the origin~
っとなってますがこのホストはfirebaseのリストに入っていませんよと

でfirebaseの注意書きを見てみたらローカルホストなら行けるらしい。
ということで、
コマンドラインで、ionic address
ローカルホスト選択（私の環境では(2)）で
いけました！

参考までに

iWanna　Appをよろしくお願いいたします。

241