AngularとIonicを使ってFacebookのユーザーデータをMySqlデータベースに保存する方法

Question

私はネイティブFacebookのログインを実装するIonicアプリを開発中です（このチュートリアルに続いて - >https://ionicthemes.com/tutorials/about/native-facebook-login-with-ionic-framework）。ご覧のように、Facebookのデータはローカルストレージに保存されます。このデータをMySqlデータベースに保存する必要があります。

私はこれを問題なく動作させました。 FacebookのユーザーデータをMySqlデータベースに保存します。

基本的に私のデータベースにデータを渡すためのhttpリクエストをどこに置くか、それをコード賢明にする方法はわかりません。

バックエンドはすでにセットアップ済みです（ブートストラップ、html、css、js php、mysqlでコード化されています）。

だから私のユーザーのためのURLは、このようになります：「（マイservice.jsコード（ローカルストレージ）

angular.module

app.controller('LoginCtrl', function($scope, $state, $q, UserService, $ionicLoading) { 
    // This is the success callback from the login method 
    var fbLoginSuccess = function(response) { 
    if (!response.authResponse){ 
     fbLoginError("Cannot find the authResponse"); 
     return; 
    } 

    var authResponse = response.authResponse; 

    getFacebookProfileInfo(authResponse) 
    .then(function(profileInfo) { 
     // For the purpose of this example I will store user data on local storage 
     UserService.setUser({ 
     authResponse: authResponse, 
       userID: profileInfo.id, 
       name: profileInfo.name, 
       email: profileInfo.email, 
     picture : "http://graph.facebook.com/" + authResponse.userID + "/picture?type=large" 
     }); 
     $ionicLoading.hide(); 
     $state.go('app.dashboard'); 
    }, function(fail){ 
     // Fail get profile info 
     console.log('profile info fail', fail); 
    }); 
    }; 

    // This is the fail callback from the login method 
    var fbLoginError = function(error){ 
    console.log('fbLoginError', error); 
    $ionicLoading.hide(); 
    }; 

    // This method is to get the user profile info from the facebook api 
    var getFacebookProfileInfo = function (authResponse) { 
    var info = $q.defer(); 

    facebookConnectPlugin.api('/me?fields=email,name&access_token=' + authResponse.accessToken, null, 
     function (response) { 
       console.log('logging facebook response',response); 
     info.resolve(response); 
     }, 
     function (response) { 
       console.log(response); 
     info.reject(response); 
     } 
    ); 
    return info.promise; 
    }; 

    //This method is executed when the user press the "Login with facebook" button 
    $scope.facebookSignIn = function() { 
    facebookConnectPlugin.getLoginStatus(function(success){ 
     if(success.status === 'connected'){ 
     // The user is logged in and has authenticated your app, and response.authResponse supplies 
     // the user's ID, a valid access token, a signed request, and the time the access token 
     // and signed request each expire 
     console.log('getLoginStatus', success.status); 

      // Check if we have our user saved 
      var user = UserService.getUser('facebook'); 

      if(!user.userID){ 
        getFacebookProfileInfo(success.authResponse) 
        .then(function(profileInfo) { 
         // For the purpose of this example I will store user data on local storage 
         UserService.setUser({ 
          authResponse: success.authResponse, 
          userID: profileInfo.id, 
          name: profileInfo.name, 
          email: profileInfo.email, 
          picture : "http://graph.facebook.com/" + success.authResponse.userID + "/picture?type=large" 
         }); 
         $state.go('app.dashboard'); 
        }, function(fail){ 
         // Fail get profile info 
         console.log('profile info fail', fail); 
        }); 
       }else{ 
        $state.go('app.dashboard'); 
       } 
     } else { 
     // If (success.status === 'not_authorized') the user is logged in to Facebook, 
       // but has not authenticated your app 
     // Else the person is not logged into Facebook, 
       // so we're not sure if they are logged into this app or not. 

       console.log('getLoginStatus', success.status); 

       $ionicLoading.show({ 
      template: 'Logging in...' 
     }); 

       // Ask the permissions you need. You can learn more about 
       // FB permissions here: https://developers.facebook.com/docs/facebook-login/permissions/v2.4 
     facebookConnectPlugin.login(['email', 'public_profile'], fbLoginSuccess, fbLoginError); 
     } 
    }); 
    }; 
}) 

：私のコントローラのコードのhttp://www.xxxxx.com/user.php

パートチャレンジャー。サービス '、[]）

.service('UserService', function() { 
    // For the purpose of this example I will store user data on ionic local storage but you should save it on a database 
    var setUser = function(user_data) { 
    window.localStorage.starter_facebook_user = JSON.stringify(user_data); 
    }; 

    var getUser = function(){ 
    return JSON.parse(window.localStorage.starter_facebook_user || '{}'); 
    }; 

    return { 
    getUser: getUser, 
    setUser: setUser 
    }; 
}); 

Answer 1

あなたのコードはすべて準備が整いましたが、あなたのコードを見つけるための最良の場所はどこにあるのか分かりません。どのようにあなたのPHPプロジェクトの構造をレイアウトする方法についての明確な指示を持っていいリンカがあります：http://davidshariff.com/blog/php-project-structure/、これは助けの一種を与えることができることを願っています。

Answer 2

JavaScriptからJSON ajax PUTまたはPOSTを使用することをお勧めします。

：コルドバのconfig.xmlの whitelistにドメインを追加

<meta http-equiv="Content-Security-Policy" content="default-src http://example.com; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> 

：たとえば、example.com のバックエンドホストと仮定すると

は、次のようなイオン性HTMLにCSPを追加します

<access origin="http://example.com" /> 

角度コントローラーでajaxを使用してJavaScriptからPHPを呼び出すことができます（ここではjQueryを使用していますが、任意のJavaScript ajaxライブラリーを使用できます）。

var data = { 
     authResponse: authResponse, 
       userID: profileInfo.id, 
       name: profileInfo.name, 
       email: profileInfo.email, 
     picture : "http://graph.facebook.com/" + authResponse.userID + "/picture?type=large" 
     }; 

$.post("http://example.com/login.php", data, function(returnData, status) { 
    console.log('PHP returned HTTP status code', status); 
}); 

最後に、PHP側で—など。 login.php — $_POST['userId']、$_POST['email']などの投稿データにアクセスします。