Question

我使用Ionic Framework（Cordova和angular）实现了一个混合应用程序。我的应用程序使用Facebook登录（已在javascript中实现）。

我现在想要将该应用程序提交给Facebook审核，但我需要提交一个平台。我尝试使用＆＃34; Android App＆＃34;作为一个平台，但由于我没有使用Facebook android SDK登录facebook，我无法使用这个平台。

网站要求提供一个URL（自应用程序在移动设备上运行以来我没有这样做）。

在这种情况下做什么是正确的？

Answer 1

您已为自己的应用使用基于firebase的社交登录。这很简单。

制作离子应用

所以，第一步是创建一个空白的离子应用程序。在终端中，转到通常存储Ionic应用程序的目录。现在运行以下命令：

离子启动社会认证空白

这将为您创建一个空的Ionic应用程序。现在键入cd social-auth并运行以下命令：

离子发球这将在http://localhost:8100启动开发服务器。

注意：

离子服务实际上是在http://your_ip_here:8100启动服务器。为简单起见，我们使用地址http://localhost:8100在浏览器中查看应用（与访问http://your_ip_here:8100相同）。

现在，如果您在浏览器中加载地址，则可以看到新创建的空白应用。现在让我们暂停一下，创建社交媒体应用。如果您知道如何创建Facebook，Google +和Twitter应用，则可以跳过下一部分并跳转到创建Firebase应用。

创建Facebook

登录您的Facebook帐户并转到 https://developers.facebook.com
点击上的应用下拉菜单顶部并选择“创建新应用”。
为您的应用命名，选择一个类别，然后点击创建应用。
现在您可以看到您的应用ID和应用密码了。请注意这些值。
现在转到设置 - ＆gt;高级并填写字段有效的OAuth重定向URI，其值为https://auth.firebase.com/auth/facebook/callback。
保存更改，您现在已准备好Facebook应用程序。

创建Firebase应用 1.如果您没有帐户，请前往Firebase并创建一个新帐户。 2.登录后，您可以在黑客计划中创建一个新应用程序。只需填写以下详细信息并创建一个新应用。请注意您的应用URL。这是您的firebase参考。 3.现在单击Manage App，在侧栏中单击Simple Login。 4.在身份验证提供程序部分中，为Google，Facebook和Twitter启用身份验证。输入您在每个标签中记下的应用ID和密码。 5.默认情况下，登录时间为24小时。如果需要，您可以将其增加到更长的时间段。就我而言，这是30天。 6. Firebase会自动保存所有内容。因此，此时没有单击保存按钮。

转移到离子应用程序端：

Firebase有一个流行的AngularJS绑定，称为AngularFire，它使Firebase交互变得更容易。因此，我们需要下载3个脚本并将它们包含在我们的应用程序中。

<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js">   </script>
<!-- Firebase Simple Login -->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.js"></script>

Firebase是您需要包含的核心Firebase脚本，以便与Firebase进行交互。
AngularFire可让您更轻松地与AngularJS应用中的Firebase实例进行互动。
最后，我们需要Firebase简单登录，以便我们可以使用社交身份验证。

您可以从CDN下载这些脚本并将其保存在本地。因此，下载这些脚本并将它们放在您的Ionic项目中的www / lib / firebase中。

现在打开index.html并使用以下脚本进行更新：

<script src="lib/firebase/firebase.js"></script>
<script src="lib/firebase/firebase-simple-login.js"></script>
<script src="lib/firebase/angularfire.js"></script>

要使用Firebase，您需要声明对firebase模块的依赖关系。因此，打开www / js / app.js并将firebase添加为依赖关系，如下所示：

angular.module('socialAuth', ['ionic','firebase']);

创建登录屏幕 现在让我们构建我们的登录屏幕，它将提供三个登录选项。因此，我们需要创建一个登录状态并显示登录按钮。让我们在app.js中添加一个配置块，如下所示：

＆＃13;

angular.module('socialAuth').config(['$stateProvider',function($stateProvider){

    $stateProvider.state('login',{
        url:'/login',
        templateUrl:'views/login.html'
    });

}]);

＆＃13;

您需要在视图中创建一个名为login.html的模板。内容如下：

＆＃13;

<ion-view title="Login" >
    <ion-content has-header="true" padding="true" class="login">

        <a class="btn-auth btn-facebook large" ng-click="login('facebook')">
            Sign in with <b>Facebook</b>
        </a>

        <a class="btn-auth btn-google large" ng-click="login('google')">
            Sign in with <b>Google+</b>
        </a>

        <a class="btn-auth btn-twitter large" ng-click="login('twitter')">
            Sign in with <b>Twitter</b>
        </a>

    </ion-content>
</ion-view>

＆＃13;

现在，您需要让Angular在应用启动时加载登录状态。因此，将service $状态注入run（）块（在www / js / app.js中）并使用以下内容进行更新：

＆＃13;

.run(function($ionicPlatform,$state) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

   $state.go('login');

  });
});

＆＃13;

创建服务

现在我们将定义两个价值服务，如下所示。

＆＃13;

angular.module('com.htmlxprs.socialAuth.services',[])
    .value('FIREBASE_REF','https://social-auth.firebaseio.com')
    .value('userSession',{});

＆＃13;

代码在www / js / services.js中。如您所见，我们定义了一个新模块并注册了我们的服务。 FIREBASE_REF是指您之前创建的Firebase实例。您需要将其更改为指向您的。 userSession是一个自定义服务，用于保存有关已登录用户的信息，以便它可以在应用范围内使用。

一旦定义了这个新模块，请确保将其添加到app.js中的依赖项列表中。所以，现在我们的主要模块socialAuth依赖于以下3个模块：

＆＃13;

angular.module('socialAuth', ['ionic','firebase','com.htmlxprs.socialAuth.services']);

＆＃13;

创建LoginController

为了记录用户，您需要定义一个控制器。因此，让我们创建一个名为LoginController的控制器作为状态登录的一部分。代码如下：

＆＃13;

angular.module('com.htmlxprs.socialAuth.controllers',[]).controller('LoginController',['$scope','FIREBASE_REF','$firebaseSimpleLogin','userSession',function($scope,FIREBASE_REF,$firebaseSimpleLogin,userSession){

    userSession.auth=$firebaseSimpleLogin(new Firebase(FIREBASE_REF));

    $scope.login=function(provider){
        userSession.auth.$login(provider);
    }

}]);

＆＃13;

代码进入www / js / controllers.js。请记住将此新创建的模块添加到app.js中的依赖项列表中。

如您所见，我们创建了一个新的Firebase实例，并将其提供给名为$ firebaseSimpleLogin的服务。函数$ firebaseSimpleLogin（）返回一个auth对象，可用于登录和注销用户。因此，我们将其存储在userSession中，因为我们将需要它以不同的状态进行注销功能。

接下来，我们将一个函数login（）设置为$ scope，它接受一个提供者名称并调用userSession.auth。$ login（provider）来启动登录过程。这里的提供者可以是谷歌，脸书或推特。如果您上去看到登录模板，您会注意到我们已将ng-click指令附加到我们的按钮。例如，facebook登录按钮附加了以下指令：

ng-click="login('facebook')"

因此，当用户点击按钮时，$ scope.login（）（由我们的控制器定义）将以facebook作为参数进行调用。 Google和Twitter的流程相同。

那么，我们如何知道登录成功还是失败？好吧，$ firebaseSimpleLogin触发$ rootScope上的一些事件，您可以订阅它们以了解状态。这些事件如下：

$ firebaseSimpleLogin：login：登录成功。所以我们可以处理此事件并将我们的用户重定向到家。
$ firebaseSimpleLogin：error：期间发生了一些错误认证。例如，用户取消了登录对话框由facebook提供。
$ firebaseSimpleLogin：logout：用户已注销。您可以订阅此事件并将用户重定向到登录状态。

因此，您可以将$ rootScope和userSession注入app.js中的run块并按以下方式处理这些事件：

＆＃13;

 $rootScope.$on('$firebaseSimpleLogin:login', function(event, user) {
       userSession.user=user;
       $state.go('home');
   });

   $rootScope.$on('$firebaseSimpleLogin:error', function(event, error) {
        console.log('Error logging user in: ', error);
   });

   $rootScope.$on('$firebaseSimpleLogin:logout', function(event) {
         $state.go('login');
   });

＆＃13;

因此，一旦登录成功，我们将用户对象存储在userSession中，以便它可以在下一个状态中使用，最后将用户重定向到home状态。我们将很快创建这个州。注销后，我们还会将用户重定向到登录状态。

创建HomeController 成功登录后，我们将用户发送到州主页。此状态通过欢迎消息向用户打招呼，并显示他/她的图片。所以，让我们定义以下状态：

＆＃13;

.state('home',{
        url:'/home',
        controller:'HomeController',
        templateUrl:'views/home.html'
    });

＆＃13;

像往常一样，这是在登录状态后的配置块内定义的。

现在让我们在www / js / controllers.js中定义相应的控制器：

＆＃13;

angular.module('com.htmlxprs.socialAuth.controllers').controller('HomeController',['$scope','userSession',function($scope,userSession){

$scope.user=userSession.user;

$scope.logout=function(){
    userSession.auth.$logout();
}

}]);

＆＃13;

因此，我们从userSession中检索用户并将其存储在$ scope.user中。这将在视图模板中使用。我们还定义了一个范围函数logout（），它通过调用userSession.auth来记录用户。$ logout（）。

最后，我们的模板如下，并进入views / home.html：

＆＃13;

<ion-view title="Welcome">
    <ion-content has-header="true" padding="true">
        <h4>Welcome, {{user.displayName}}</h4>
        <div ng-switch="user.provider">
            <img ng-switch-when="facebook" ng-src="{{user.thirdPartyUserData.picture.data.url}}"/>
            <img ng-switch-when="google" ng-src="{{user.thirdPartyUserData.picture}}" height="100" width="100"/>
            <img ng-switch-when="twitter" ng-src="{{user.thirdPartyUserData.profile_image_url}}"/>
        </div>
        <a href ng-click="logout()">Log out</a>
    </ion-content>
</ion-view>

＆＃13;

我们使用属性user.displayName显示用户的名称。接下来，根据提供商（谷歌，脸书或推特），我们会显示个人资料图片。最后，点击退出按钮会将用户注销。

现在您需要确保在index.htmlas中包含我们的自定义脚本：

＆＃13;

<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

＆＃13;

最后，index.html中的正文应更新为以下内容：

＆＃13;

<body ng-app="socialAuth">
  <ion-nav-bar></ion-nav-bar>
  <ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>

＆＃13;

Answer 2

您可以将现有的离子项目导入intelxdk https://software.intel.com/en-us/intel-xdk。打开intelxdk，然后点击右下角的import exisiting项目，导入项目后，可以点击模拟选项卡进行测试，一旦准备好构建，首先检查你的构建设置（点击左上方的项目标签）。然后点击构建选项卡，你将facebook作为底层的构建选项与其他基于Web的构建。在此处阅读更多内容https://software.intel.com/en-us/xdk/docs/using-the-build-tab enter image description here

Facebook评论混合应用程序

2 个答案: