MonacaアプリでFacebookログインを使ってみよう
認証システムは作るのはもちろん、維持運用するのも大変です。そこでFacebookやTwitterといったソーシャルサービスを使った認証システムが重宝されます。Monacaアプリにおいてもニーズの多いFacebookログインをデモコードを使って紹介します。
必要なもの
- Monacaのアカウント
- Facebookアプリ
- OpenFB
今回はオプションとしてjQueryも使っています。
Facebookアプリ
まず最初にFacebookアプリを登録しましょう。Facebook Developersのサイトで新規アプリを作成します。ここで大事なのはアプリのApp IDになります。
そしてSettingsのAdvancedにおいて、次のように指定します。
- Client OAuth Login : YES
- Web OAuth Login : YES
- Embedded Browser OAuth Login : YES
- Valid OAuth redirect URIs : https://www.facebook.com/connect/login_success.html
後はデフォルトのままで良いかと思います。
OpenFB
Facebookが公式に提供しているJavaScript SDKの場合、認証後のURLを変更できません。そこで、サードパーティ製のOpenFBというライブラリを使います。こちらのJavaScriptファイルをダウンロードしてください。
Monacaアプリを作成
今回は最小限のテンプレートで作成しています。まずindex.htmlは次のようになります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/openfb.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<a class="fb-login" href="#">Facebookログイン</a>
<a class="fb-logout" href="#">ログアウト</a>
<div class="profile">
<div class="name"></div>
<div class="image"></div>
</div>
</body>
</html>
div.profile以下はFacebookログインがうまくいった場合に表示される情報です。次にjs/app.jsを作成します。
var onDeviceReady = function () {
};
document.addEventListener("deviceready", onDeviceReady, false);
onDeviceReadyの中でOpenFBを初期化します。
openFB.init({appId: '999999999999', tokenStore: window.localStorage, accessToken: window.localStorage.accessToken});
appIdは取得したFacebookアプリのものに置き換えてください。OpenFBはデフォルトではsessionStorageになっており、再読込するとログイン状態が解除されてしまいます。そこでlocalStorageに置き換えています。また、再読込時などにログイン状態を維持できるようにaccessTokenも渡しておきます。
初期化が終わったらログイン状態をチェックします。openFB.apiというメソッドでFacebookのAPIを叩きます。OAuth Tokenのあるなしで判定しても良いのですが、有効期限が切れている場合もありますので都度確認する方が正確でしょう。
そして /me、つまり自分自身の情報がとれればログインしている、取れなければしていないと見なして処理分けしています。自分の情報が取れる場合はsuccessにコールバックがきます。コールバックされる際には自分自身の情報が変数に入ってきますので、その中から自由に情報を使えます。逆にエラーの場合はログインしていないと判断しています。
var fb_init = function () {
openFB.api({path: '/me',
success: function (me) {
$(".fb-login").hide();
$(".fb-logout").show();
$(".profile .name").text(me.last_name + " " + me.first_name);
$(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/"+me.id+"/picture?type=small"));
},
error: function (err) {
$(".fb-logout").hide();
$(".fb-login").show();
$(".profile .name").empty();
$(".profile .image").empty();
}
});
};
fb_init();
後はFacebookログイン、ログアウトの機能を追加します。
// Facebookログイン
$(".fb-login").on("click", function () {
openFB.login(function (data) {
fb_init();
}, {scope: 'email,read_stream,publish_actions'});
});
// Facebookログアウト
$(".fb-logout").on("click", function () {
openFB.logout(function () {
fb_init();
});
});
どちらもOpenFBの提供するlogin、logoutメソッドを使っているだけです。その結果、コールバックが返ってきますので再描画しています。
これで処理は完成です。全体のjs/app.jsのコードは次のようになります。
var onDeviceReady = function () {
openFB.init({appId: '999999999999', tokenStore: window.localStorage, accessToken: window.localStorage.accessToken});
$(".fb-login").on("click", function () {
openFB.login(function (data) {
fb_init();
}, {scope: 'email,read_stream,publish_actions'});
});
$(".fb-logout").on("click", function () {
openFB.logout(function () {
fb_init();
});
});
var fb_init = function () {
openFB.api({path: '/me',
success: function (me) {
$(".fb-login").hide();
$(".fb-logout").show();
$(".profile .name").text(me.last_name + " " + me.first_name);
$(".profile .image").html($("<img />").attr("src", "http://graph.facebook.com/"+me.id+"/picture?type=small"));
},
error: function (err) {
$(".fb-logout").hide();
$(".fb-login").show();
$(".profile .name").empty();
$(".profile .image").empty();
}
});
};
fb_init();
};
document.addEventListener("deviceready", onDeviceReady, false);
OpenFBを一点修正
OpenFBのログアウト処理が間違っているように見えるので次のように変更します。
tokenStore.removeItem('fbtoken');
// ↓
tokenStore.removeItem('fbAccessToken');
動かしてみる
では実際に動かしてみましょう。なお、OpenFBはCordovaやMonacaアプリで動かす場合、InAppBrowserプラグインを使っています。Monacaデバッガーには予め組み込まれていますのでMonacaプロジェクトをそのままMonacaデバッガー上で動かしてみてください。
まず最初はFacebookログインだけ出ていますので、タップします。
認証画面が出ますのでID、パスワードを入力してください。
2段階認証も使えます。
認証しました。名前とプロフィール画像が表示されるはずです。
ログアウトをタップすると一番最初の表示に戻ります。
動画にすると次のようになります。
このようにOpenFBを使えば特別なネイティブプラグインを使うことなくシンプルにFacebook認証機能を組み込むことができます。ぜひ皆さんのアプリにも組み込んでみてください。
