android - Facebook review for hybrid apps -

i implemented hybrid app using ionic framework (cordova , angular). app uses facebook login (that has been implemented in javascript).

i want submit app facebook review need submit platform. tried use "android app" platform since not use facebook android sdk login facebook cannot use platform.

website asks url (that not have since app runs on mobile devices).

what right thing in case?

you have use firebase based social login apps. it's simple.

creating ionic app

so, first step creating blank ionic app. in terminal go directory store ionic apps. run following command:

ionic start social-auth blank

this create empty ionic app you. type cd social-auth , run following command:

ionic serve start dev server @ http://localhost:8100.

note:

ionic serve starts server @ http://your_ip_here:8100. keep things simple let's use address http://localhost:8100 view app in browser (which same accessing http://your_ip_here:8100).

now if load address in browser can see newly created blank app. let's pause here , create social media apps. if know how create facebook, google+ , twitter apps can skip next section , jump creating firebase app.

creating facebook

1. login facebook account , go https://developers.facebook.com
2. click on apps drop down menu on top , choose create new app.
3. give name app, choose category , click create app.
4. now can see app id , app secret. note these values.
5. now go settings -> advanced , fill field valid oauth redirect uris value https://auth.firebase.com/auth/facebook/callback.
6. save changes , have facebook app ready.

create firebase app 1. head on firebase , create new account if don't have one. 2. once log in can create new app in hacker plan. fill following details , create new app. note app url. firebase reference. 3. click on manage app , in sidebar click on simple login. 4. in section authentication providers enable authentication google, facebook , twitter. enter app id , secret noted earlier in each tab. 5. default login period 24 hours. can increase longer period if required. in case it's 30 days. 6. firebase saves automatically. so, there no save button click time.

move ionic app side:

firebase has popular angularjs binding known angularfire makes firebase interaction easier. so, need download 3 scripts , 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 core firebase script need include in order interact firebase.
2. angularfire makes easier interact firebase instance in angularjs apps.
3. finally, need firebase simple login can use social authentication.

you can download these scripts cdn , keep them locally. so, download these scripts , put them in www/lib/firebase inside ionic project.

now open index.html , update 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 use firebase need declare dependency on firebase module. so, open www/js/app.js , add firebase dependency following:

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

creating login screen let's build our login screen provide 3 sign in options. so, need create login state , show buttons sign in. let's add config block in app.js following:

angular.module('socialauth').config(['$stateprovider',function($stateprovider){        $stateprovider.state('login',{          url:'/login',          templateurl:'views/login.html'      });    }]);

and need create template called login.html inside views. content 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 <b>facebook</b>          </a>            <a class="btn-auth btn-google large" ng-click="login('google')">              sign in <b>google+</b>          </a>            <a class="btn-auth btn-twitter large" ng-click="login('twitter')">              sign in <b>twitter</b>          </a>        </ion-content>  </ion-view>

now need ask angular load login state whenever app starts. so, inject service $state run() block (in www/js/app.js) , update following:

.run(function($ionicplatform,$state) {    $ionicplatform.ready(function() {      // hide accessory bar default (remove show accessory bar above keyboard      // 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 going define 2 value services 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. see defined new module , registered our services. firebase_ref refers firebase instance created earlier. need change point yours. usersession custom service holds information logged in user it's available app wide.

once define new module make sure add dependency list in app.js. so, right our main module socialauth depends on following 3 modules:

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

creating logincontroller

in order log users in need define controller. so, let's create controller called logincontroller part of state login. code 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 www/js/controllers.js. remember add newly created module dependency list in app.js.

as see create new firebase instance , provide service called $firebasesimplelogin. function$firebasesimplelogin() returns auth object can used login , logout users. so, store inside usersession going need in different state logout functionality.

next, set function login() $scope takes provider name , calls usersession.auth.$login(provider) start login process. here provider can google, facebook or twitter. if go , see template login notice have attached ng-click directives our buttons. example, facebook sign in button has following directive attached it:

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

so when user taps button, $scope.login() (defined our controller) gets called facebook argument. process same google , twitter.

so, how know if login succeeded or failed ? well, $firebasesimplelogin triggers events on $rootscope can subscribe know status. these events following:

1. $firebasesimplelogin:login: login has succeeded. so, can handle event , redirect our user home.
2. $firebasesimplelogin:error: error occurred during authentication. example, user cancelled login dialog presented facebook.
3. $firebasesimplelogin:logout: user has logged out. can subscribe event , redirect user login state.

so, can inject $rootscope , usersession run block in app.js , handle these events 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 login successful store user object in usersession can used in next state , redirect user home state. going create state shortly. after logout redirect user login state.

creating homecontroller after successful login send our user state home. state greets user welcome message , displays his/her picture. so, let's define following state:

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

as usual defined inside config block after login state.

now let's define 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, retrieve user usersession , store in $scope.user. going used in view template. define scope function logout() logs user out calling usersession.auth.$logout().

finally, our template following , goes 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 name of user using property user.displayname. next, depending on provider (google, facebook or twitter) show profile picture. finally, logout button, when clicked, logs user out.

now need make sure include our custom scripts in index.htmlas following:

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

finally, body in index.html should updated following:

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