我使用 Ionic Framework（Cordova 和 angular）实现了一个混合应用程序。我的应用使用 Facebook 登录（已在 javascript 中实现）。
我现在想将应用提交给 facebook 审核，但我需要提交一个平台。我尝试使用“Android App”作为平台，但由于我不使用 Facebook android SDK 登录 facebook，因此无法使用此平台。
网站要求提供 URL（因为应用程序在移动设备上运行，所以我没有该 URL）。
在这种情况下，正确的做法是什么？
【问题讨论】：
标签： android facebook cordova ionic-framework hybrid-mobile-app
您可以将现有的 ionic 项目导入 intelxdk https://software.intel.com/en-us/intel-xdk。打开 intelxdk 然后点击右下角的导入现有项目，一旦你的项目被导入，你可以点击 emulate 选项卡来测试它，一旦你准备好构建，首先检查你的构建设置（点击左上角的项目选项卡）。然后点击构建选项卡，您将 facebook 作为底部的构建选项以及其他基于 Web 的构建。在这里阅读更多https://software.intel.com/en-us/xdk/docs/using-the-build-tab
【讨论】：
您的应用已使用基于 Firebase 的社交登录。很简单。
创建离子应用
所以，第一步是创建一个空白的 Ionic 应用程序。在终端中，转到您通常存储 Ionic 应用程序的目录。现在运行以下命令：
ionic 启动社交验证空白
这将为您创建一个空的 Ionic 应用程序。现在输入 cd social-auth 并运行以下命令：
离子发球 这将在http://localhost:8100 启动一个开发服务器。
注意：
ionic serve 实际上在http://your_ip_here:8100 启动一个服务器。为简单起见，让我们使用地址http://localhost:8100 在浏览器中查看应用程序（与访问http://your_ip_here:8100 相同）。
现在，如果您在浏览器中加载地址，您可以看到新创建的空白应用程序。现在让我们在这里暂停并创建社交媒体应用程序。如果您知道如何创建 Facebook、Google+ 和 Twitter 应用程序，您可以跳过下一部分并跳转到创建 Firebase 应用程序。
创建 Facebook
创建 Firebase 应用 1. 如果您没有，请前往 Firebase 并创建一个新帐户。 2. 登录后，您可以在 Hacker 计划中创建一个新应用。只需填写以下详细信息并创建一个新应用程序。记下您的应用网址。这是您的 Firebase 参考。 3. 现在点击管理应用程序，然后在侧边栏中点击简单登录。 4. 在身份验证提供程序部分中，为 Google、Facebook 和 Twitter 启用身份验证。输入您之前在每个选项卡中记下的 App Id 和 Secret。 5. 默认登录时间为 24 小时。如果需要，您可以将其增加到更长的时间。在我的情况下，它是 30 天。 6. Firebase 自动保存所有内容。所以，这次没有保存按钮可以点击。
移到您的 ionic 应用端：
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>
您可以从 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 中添加一个配置块，如下所示：
angular.module('socialAuth').config(['$stateProvider',function($stateProvider){
$stateProvider.state('login',{
url:'/login',
templateUrl:'views/login.html'
});
}]);您需要在视图中创建一个名为 login.html 的模板。内容如下：
<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>现在你需要让 Angular 在应用启动时加载登录状态。因此，将服务 $state 注入 run() 块（在 www/js/app.js 中）并使用以下内容对其进行更新：
.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');
});
}); 创建服务
现在我们要定义两个价值服务，如下所示。
angular.module('com.htmlxprs.socialAuth.services',[])
.value('FIREBASE_REF','https://social-auth.firebaseio.com')
.value('userSession',{});代码位于 www/js/services.js 中。如您所见，我们定义了一个新模块并注册了我们的服务。 FIREBASE_REF 指的是您之前创建的 Firebase 实例。您需要将其更改为指向您的。 userSession 是一个自定义服务，它保存有关已登录用户的信息，以便在应用范围内使用。
一旦您定义了这个新模块，请确保将其添加到 app.js 中的依赖项列表中。所以，现在我们的主模块 socialAuth 依赖于以下 3 个模块：
angular.module('socialAuth', ['ionic','firebase','com.htmlxprs.socialAuth.services']);创建登录控制器
为了让用户登录，您需要定义一个控制器。因此，让我们创建一个名为 LoginController 的控制器作为状态登录的一部分。代码如下：
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);
}
}]);代码进入 www/js/controllers.js。记得将这个新创建的模块添加到 app.js 的依赖列表中。
如您所见，我们创建了一个新的 Firebase 实例并将其提供给名为 $firebaseSimpleLogin 的服务。函数$firebaseSimpleLogin() 返回一个可用于登录和注销用户的身份验证对象。因此，我们将其存储在 userSession 中，因为我们将需要它处于不同的状态以实现注销功能。
接下来，我们将函数 login() 设置为 $scope，它接受一个提供者名称并调用 userSession.auth.$login(provider) 来启动登录过程。这里的提供者可以是 google、facebook 或 twitter。如果您上去查看登录模板，您会注意到我们已将 ng-click 指令附加到我们的按钮。例如，facebook 登录按钮附加了以下指令：
ng-click="login('facebook')"
因此，当用户点击按钮时，$scope.login()（由我们的控制器定义）会以 facebook 作为参数被调用。 Google 和 Twitter 的流程相同。
那么，我们如何知道登录是成功还是失败呢？好吧，$firebaseSimpleLogin 会触发 $rootScope 上的一些事件，您可以订阅这些事件以了解状态。这些事件如下：
因此，您可以将 $rootScope 和 userSession 注入 app.js 中的 run 块，并按如下方式处理这些事件：
$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');
});所以，一旦登录成功，我们将用户对象存储在 userSession 中，以便它可以在下一个状态下使用，并最终将用户重定向到主状态。我们将很快创建这个状态。同样在注销后我们将用户重定向到登录状态。
创建 HomeController 成功登录后，我们将用户发送到 state home。该状态向用户表示欢迎消息并显示他/她的图片。所以，让我们定义以下状态：
.state('home',{
url:'/home',
controller:'HomeController',
templateUrl:'views/home.html'
});像往常一样，这是在登录状态后在配置块中定义的。
现在让我们在 www/js/controllers.js 中定义对应的控制器：
angular.module('com.htmlxprs.socialAuth.controllers').controller('HomeController',['$scope','userSession',function($scope,userSession){
$scope.user=userSession.user;
$scope.logout=function(){
userSession.auth.$logout();
}
}]);因此，我们从 userSession 中检索用户并将其存储在 $scope.user 中。这将在视图模板中使用。我们还定义了一个作用域函数 logout()，它通过调用 userSession.auth.$logout() 将用户注销。
最后，我们的模板如下，进入views/home.html：
<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> 我们使用属性 user.displayName 显示用户的名称。接下来，根据提供商（谷歌、脸书或推特），我们会显示个人资料图片。最后，注销按钮在单击时会注销用户。
现在您需要确保在 index.html 中包含我们的自定义脚本，如下所示：
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>最后，index.html 中的正文应该更新为以下内容：
<body ng-app="socialAuth">
<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>【讨论】：