FacebookTweet認証システムは作るのはもちろん、維持運用するのも大変です。そこでFacebookやTwitterといったソーシャルサービスを使った認証システムが重宝されます。Monacaアプリにおいてもニーズの多いFacebookログインをデモコードを使って紹介します。必要なものMonacaのアカウントFacebookアプリOpenFB今回はオプションとしてjQueryも使っています。Facebookアプリまず最初にFacebookアプリを登録しましょう。Developersのサイトで新規アプリを作成します。FacebookアプリそしてSettingsのAdvancedにおいて、次のように指定します。https://www.facebook.com/connect/login_success.html後はデフォルトのままで良いかと思います。SDKの場合、認証後のURLを変更できません。そこで、サードパーティ製のOpenFBというライブラリを使います。こちらのJavaScriptファイルをダウンロードしてください。今回は最小限のテンプレートで作成しています。index.htmlは次のようになります。</div></body></html>div.profile以下はFacebookログインがうまくいった場合に表示される情報です。次にjs/app.jsを作成します。false);onDeviceReadyの中でOpenFBを初期化します。window.localStorage.accessToken});appIdは取得したFacebookアプリのものに置き換えてください。OpenFBはデフォルトではsessionStorageになっており、再読込するとログイン状態が解除されてしまいます。そこでlocalStorageに置き換えています。再読込時などにログイン状態を維持できるようにaccessTokenも渡しておきます。初期化が終わったらログイン状態をチェックします。openFB.apiというメソッドでFacebookのAPIを叩きます。Tokenのあるなしで判定しても良いのですが、有効期限が切れている場合もありますので都度確認する方が正確でしょう。/me、つまり自分自身の情報がとれればログインしている、取れなければしていないと見なして処理分けしています。自分の情報が取れる場合はsuccessにコールバックがきます。コールバックされる際には自分自身の情報が変数に入ってきますので、その中から自由に情報を使えます。逆にエラーの場合はログインしていないと判断しています。};fb_init();後はFacebookログイン、ログアウトの機能を追加します。});});どちらもOpenFBの提供するlogin、logoutメソッドを使っているだけです。その結果、コールバックが返ってきますので再描画しています。これで処理は完成です。全体のjs/app.jsのコードは次のようになります。false);OpenFBを一点修正OpenFBのログアウト処理が間違っているように見えるので次のように変更します。↓tokenStore.removeItem('fbAccessToken');動かしてみるでは実際に動かしてみましょう。OpenFBはCordovaやMonacaアプリで動かす場合、InAppBrowserプラグインを使っています。Monacaデバッガーには予め組み込まれていますのでMonacaプロジェクトをそのままMonacaデバッガー上で動かしてみてください。最初はFacebookログインだけ出ていますので、タップします。認証画面が出ますのでID、パスワードを入力してください。ID、パスワード入力2段階認証も使えます。名前とプロフィール画像が表示されるはずです。ログイン完了ログアウトをタップすると一番最初の表示に戻ります。動画にすると次のようになります。Facebookログイン動画このようにOpenFBを使えば特別なネイティブプラグインを使うことなくシンプルにFacebook認証機能を組み込むことができます。皆さんのアプリにも組み込んでみてください。IDEではTypeScript変換機能を備えています。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。