如何使用 Angular 和 Ionic 将 Facebook 用户数据保存到 MySql 数据库

Question

我正在开发一个 Ionic 应用程序，在其中实现本机 Facebook 登录（遵循本教程 -> https://ionicthemes.com/tutorials/about/native-facebook-login-with-ionic-framework）。如您所见，Facebook 数据现在存储在本地存储中。我需要将这些数据保存在我的 MySql 数据库中。

我让这个工作没有任何问题。现在我想将 Facebook 用户数据存储到我的 MySql 数据库中。

基本上我不知道在哪里放置我的 http 请求以将数据传递到我的数据库，或者如何明智地进行编码。

我应该提到我已经设置了一个后端（使用 bootstrap、html、css、js php 和 mysql 编码）。

所以我的用户的网址是这样的：http://www.xxxxx.com/user.php

我的控制器代码的一部分：

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

我的 service.js 代码（本地存储）

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

我的建议是简单地使用来自 JavaScript 的 JSON ajax PUT 或 POST。例如，假设后端主机为 example.com

在 Ionic HTML 中添加 CSP，例如：

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

将域添加到 Cordova config.xml 中的whitelist：

<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'] 等访问帖子数据。

Answer 2

我猜您已准备好所有代码，但只是不确定在哪里找到代码的最佳位置。有一个很好的链接器，其中有关于如何布局您的 php 项目结构的明确说明：http://davidshariff.com/blog/php-project-structure/，希望这可以提供一种帮助。