Facebook review for hybrid apps

Question

I implemented an hybrid app using Ionic Framework (Cordova and angular). My app uses Facebook Login (that has been implemented in javascript).

I want now to submit the app to facebook review but I need to submit a platform. I tried to use "Android App" as a platform but since I do not use Facebook android SDK to login with facebook I cannot use this platform.

Website asks for an URL (that I do not have since the app runs on mobile devices).

What would be the right thing to do in this case?

Answer 1

You can import your existing ionic project into the intelxdk https://software.intel.com/en-us/intel-xdk. Open the intelxdk then hit import exisiting project on the bottom right, once your project is imported you can hit the emulate tab to test it, once you are ready to build, check your build setting first (hit the projects tab top left). Then hit the build tab, you will facebook as a build option in the bottom with other web based builds. read more here https://software.intel.com/en-us/xdk/docs/using-the-build-tab

Answer 2

You have use firebase based social login for your apps. It's very simple.

Creating an Ionic App

So, the first step is creating a blank Ionic app. In the terminal go to the directory where you usually store Ionic apps. Now run the following command:

ionic start social-auth blank

This will create an empty Ionic app for you. Now type cd social-auth and run the following command:

ionic serve This will start a dev server at http://localhost:8100.

Note:

ionic serve actually starts a server at http://your_ip_here:8100. To keep things simple let's use the address http://localhost:8100 to view the app in the browser (which is same as accessing http://your_ip_here:8100).

Now if you load the address in the browser you can see your newly created blank app. Now let's pause here and create social media apps. If you know how to create Facebook, Google+ and Twitter apps you can skip the next section and jump to Creating a Firebase app.

Creating Facebook

1. Login to your facebook account and go to https://developers.facebook.com
2. Click on Apps drop down menu on the top and choose Create a New app.
3. Give a name to your app, choose a category and click Create App.
4. Now you can see your app id and app secret. Note these values.
5. Now go to Settings -> Advanced and fill up the field Valid OAuth redirect URIs with the value https://auth.firebase.com/auth/facebook/callback.
6. Save the changes and you now have the Facebook app ready.

Create a Firebase app 1. Head over to Firebase and create a new account if you don't have one. 2. Once you log in you can create a new app in the Hacker plan. Just fill up the following details and create a new app. Note your App URL. This is your firebase reference. 3. Now click on Manage App and in the sidebar click on Simple Login. 4. In the section Authentication Providers enable authentication for Google, Facebook and Twitter. Enter your App Id and Secret which you noted earlier in each tab. 5. By default the login period is 24 hours. You can increase it to a longer period if required. In my case it's 30 days. 6. Firebase saves everything automatically. So, there is no save button to click this time.

Move to your ionic app side:

Firebase has a popular AngularJS binding known as AngularFire which makes Firebase interaction easier. So, we need to download 3 scripts and include them in our app.

<!-- 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>

1. Firebase is the core Firebase script that you need to include in order to interact with Firebase.
2. AngularFire makes it easier to interact with your Firebase instance in AngularJS apps.
3. Finally, we need Firebase Simple Login so that we can use social authentication.

You can download these scripts from the CDN and keep them locally. So, download these scripts and put them in www/lib/firebase inside your Ionic project.

Now open up index.html and update it with the following scripts:

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

In order to use Firebase you need to declare a dependency on firebase module. So, open up www/js/app.js and add firebase as a dependency as following:

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

Creating Login Screen Now let's build our login screen which will provide three sign in options. So, we need to create a login state and show the buttons for sign in. Let's add a config block in app.js as following:

angular.module('socialAuth').config(['$stateProvider',function($stateProvider){

    $stateProvider.state('login',{
        url:'/login',
        templateUrl:'views/login.html'
    });

}]);

And you need to create a template called login.html inside views. The content is as following:

<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>

Now you need to ask Angular to load login state whenever the app starts. So, inject the service $state into the run() block (in www/js/app.js) and update it with the following:

.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');

  });
}); 

Creating Services

Now we are going to define two value services which are as following.

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

The code goes inside www/js/services.js. As you see we defined a new module and registered our services. FIREBASE_REF refers to the Firebase instance you created earlier. You need to change this to point to yours. userSession is a custom service that holds information about the logged in user so that it's available app wide.

Once you define this new module make sure to add this to the dependency list in app.js. So, right now our main module socialAuth depends on the following 3 modules:

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

Creating LoginController

In order to log users in you need to define a controller. So, let's create a controller called LoginController as a part of the state login. The code is as following:

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

}]);

The code goes into www/js/controllers.js. Remember to add this newly created module to the dependency list in app.js.

As you see we create a new Firebase instance and provide it to a service called $firebaseSimpleLogin. The function$firebaseSimpleLogin() returns an auth object that can be used to login and logout users. So, we store it inside userSession as we are going to need it in a different state for logout functionality.

Next, we set a function login() to $scope which takes a provider name and calls userSession.auth.$login(provider) to start the login process. Here the provider can be google, facebook or twitter. If you go up and see the template for login you will notice that we have attached ng-click directives to our buttons. For example, the facebook sign in button has the following directive attached to it:

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

So when a user taps the button, $scope.login() (defined by our controller) gets called with facebook as the argument. The process is same for Google and Twitter.

So, how do we know if the login succeeded or failed ? Well, $firebaseSimpleLogin triggers some events on $rootScope which you can subscribe to know about the status. These events are as following:

1. $firebaseSimpleLogin:login: The login has succeeded. So, we can handle this event and redirect our user to home.
2. $firebaseSimpleLogin:error: Some error occurred during authentication. For example, the user cancelled the login dialog presented by facebook.
3. $firebaseSimpleLogin:logout: The user has logged out. You can subscribe to this event and redirect the user to login state.

So, you can inject $rootScope and userSession into run block in app.js and handle these events as following:

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

So, once the login is successful we store the user object in userSession so that it can be used in next state and finally redirect the user to home state. We are going to create this state shortly. Also after logout we redirect the user to login state.

Creating HomeController After successful login we send our user to state home. This state greets the user with a welcome message and also displays his/her picture. So, let's define the following state:

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

As usual this is defined inside config block after login state.

Now let's define the corresponding controller in 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();
}

}]);

So, we retrieve the user from userSession and store it in $scope.user. This is going to be used in the view template. We also define a scope function logout() which logs the user out by calling userSession.auth.$logout().

Finally, our template is as following and goes into 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>	   

We display the name of the user using the property user.displayName. Next, depending on the provider (google, facebook or twitter) we show the profile picture. Finally, the logout button, when clicked, logs the user out.

Now you need to make sure you include our custom scripts in index.htmlas following:

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

Finally, the body in the index.html should be updated to the following:

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