MonacaアプリでFaceBook認証を使ったログイン実装


こんにちわ。  
Monacaでアプリ開発を行っております。

FaceBookアカウントを持っている場合、その情報を使って  
アプリにログインできるようにしたいのですが、それは技術的に可能なのでしょうか？

一通り調べて、開発者アカウント開設やアプリID等は用意できました。  
しかし、IDやトークン取得の為のFacebook公式SDKが、Monacaでは動かない  
（アプリにurlがない為）らしく、情報が取得できていない状態です。

ちなみにユーザ情報等は外部レンタルサーバ（MySQL）に保存しています。




可能です。  
方法は私の知る限り2種類あります。

ひとつはfacebook SDK for javascriptを使用する方法です。  
こちらに関しては私はやった事はありませんが、Monacaの会社の公式ブログで紹介されています。  
<http://blog.asial.co.jp/1432>

もうひとつはアプリ内でinappbrowserを起動して、外部レンタルサーバー上で認証を行う方法です。  
私の場合はPHPで認証を行いました。

具体的な方法としましては、inappbrowserを立ち上げる前にユニークなトークンを生成して、ajaxで外部サーバーのMySQLに保存します。  
そのトークンをinappbrowserで開くURLのGET値につけます。  
開いた外部サーバ上でPHPのFacebook認証を行い、認証が完了すれば取得したFacebookの情報とトークンをMySQLに保存します。  
ここまでの処理が完了すればinappbrowserを閉じさせます。  
閉じさせる方法としては、そのサイト上で「認証が完了しました、このブラウザを閉じてアプリに戻ってください」のテキストを表示させるか、強制的に特定のURLに飛ばして以下の方法で「特定のURLに移動した時にinappbrowserを閉じる」事ができます。

[code]

    var ref = cordova.InAppBrowser.open('認証先のURL', '_blank', 'location=yes');
    ref.addEventListener('loadstart', function(event) {
        if(event.url == "認証が終わった後に強制的に飛ばすURL"){
          ref.close(); #閉じる
        }
    });
    
[/code]

そしてinappbrowserには閉じたときに発生するイベントがありますので、ajaxでMySQLにトークンとFacebookの情報が存在するか確認します。  
[inappbrowserのイベントに関する情報](https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/)

この方法は少し回りくどい気もしますが、私は元々アプリではなくWEBサイトでPHPのFacebook認証を利用していたので、こちらを採用しています。




可能です。  
方法は私の知る限り2種類あります。

ひとつはfacebook SDK for javascriptを使用する方法です。  
こちらに関しては私はやった事はありませんが、Monacaの会社の公式ブログで紹介されています。  
<http://blog.asial.co.jp/1432>

もうひとつはアプリ内でinappbrowserを起動して、外部レンタルサーバー上で認証を行う方法です。  
私の場合はPHPで認証を行いました。

具体的な方法としましては、inappbrowserを立ち上げる前にユニークなトークンを生成して、ajaxで外部サーバーのMySQLに保存します。  
そのトークンをinappbrowserで開くURLのGET値につけます。  
開いた外部サーバ上でPHPのFacebook認証を行い、認証が完了すれば取得したFacebookの情報とトークンをMySQLに保存します。  
ここまでの処理が完了すればinappbrowserを閉じさせます。  
閉じさせる方法としては、そのサイト上で「認証が完了しました、このブラウザを閉じてアプリに戻ってください」のテキストを表示させるか、強制的に特定のURLに飛ばして以下の方法で「特定のURLに移動した時にinappbrowserを閉じる」事ができます。

[code]

    var ref = cordova.InAppBrowser.open('認証先のURL', '_blank', 'location=yes');
    ref.addEventListener('loadstart', function(event) {
        if(event.url == "認証が終わった後に強制的に飛ばすURL"){
          ref.close(); #閉じる
        }
    });
    
[/code]

そしてinappbrowserには閉じたときに発生するイベントがありますので、ajaxでMySQLにトークンとFacebookの情報が存在するか確認します。  
[inappbrowserのイベントに関する情報](https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/)

この方法は少し回りくどい気もしますが、私は元々アプリではなくWEBサイトでPHPのFacebook認証を利用していたので、こちらを採用しています。

