Jak zapisać dane użytkownika Facebooka w bazie danych MySql za pomocą Angular i Ionic

Question

Pracuję w aplikacji jonowej, w której implementuję natywny login na Facebooku (po tym samouczku ->https://ionicthemes.com/tutorials/about/native-facebook-login-with-ionic-framework). Jak widać dane Facebooka są teraz przechowywane w pamięci lokalnej. Muszę zapisać te dane w mojej bazie danych MySql.

Mam to do pracy bez żadnych problemów. Teraz chcę przechowywać dane użytkownika Facebooka w mojej bazie danych MySql.

Zasadniczo nie jestem pewien, gdzie umieścić moje żądanie http, aby przekazać dane do mojej bazy danych, lub jak zrobić to dobrze.

Powinienem wspomnieć, że mam już konfigurację zaplecza (która jest kodowana za pomocą bootstrap, html, css, js php i mysql).

Więc url dla moich użytkowników byłoby to: http://www.xxxxx.com/user.php

Część mojego kodu kontrolera:

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); 
     } 
    }); 
    }; 
}) 

Mój kod service.js (lokalne przechowywanie)

angular.module (” Challenger.services ', [])

.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

Zgaduję, że masz wszystkie swoje kody gotowy, ale nie wiem, gdzie jest najlepsze miejsce na zlokalizowanie kodów. Jest dobry linker, który ma jasne instrukcje, jak rozmieścić strukturę projektu php: http://davidshariff.com/blog/php-project-structure/, mam nadzieję, że może to stanowić rodzaj pomocy.

Answer 2

Moje zalecenie jest po prostu użyć JSON ajax PUT lub POST z JavaScript. Na przykład, zakładając szereg backend example.com

CSP Dodaj do Ionic HTML takich jak:

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

Dodaj domenę do whitelist w config.xml Cordova:

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

Następnie możesz zadzwonić do PHP z JavaScript z ajaxem w swoim sterowniku kątowym (użyłem jQuery tutaj, ale możesz użyć dowolnej biblioteki ajax 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); 
}); 

Wreszcie, po stronie PHP — np. login.php — dostęp do danych pocztowych za pomocą $_POST['userId'], $_POST['email'], itp.