I am working on a project for which i need to login from facebook. I have to create an android app for same project as well and required same facebook login in it. so i have implemented my web application for which facebook login is working fine. then i converted it in android app using same source code when i tried to login from android app it is open in browser and not working throwing error.
"given url is not allowed bty the application configuration:one or more of the given url is not allowed by the app settings."
I need a solution from which i can convert my same web application into android, iphone etc.
code:
app.js
var myApp = angular.module('myApp',['ngRoute']);
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true,
version: 'v2.5'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
home.js
myApp.controller('HomeCtrl',["$scope",function($scope){
$scope.name = 'Login please';
$scope.FBLogin = function(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
console.log(response);
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
console.log("dsgfds");
};
}]);
//........updated code implemented using ngcordova.................//
Html code
<!DOCTYPE html>
<html ng-app="facebookApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="application/javascript" src="js/customjs/fbapp.js"></script>
<title></title>
</head>
<body ng-controller="mainCtrl">
<div>
<div>
<div id="home">
<div id="fb-root" >
</div>
<div >
<h1>Login</h1>
</div>
<div>
<a ng-click="facebookLogin()" style="text-decoration: none"><button>Login via Facebook</button></a>
</div>
</div>
</div>
</div>
</body>
</html>
fbapp.js
var app = angular.module("facebookApp",['ngCordova']);
app.controller('mainCtrl',["$scope","$cordovaOauth", function($scope, $cordovaOauth /*$cordovaFacebook*/) {
$scope.facebookLogin = function() {
$cordovaOauth.facebook("xxxxxxxxxxxxxxxxxxxx", ["public_profile","email"])
.then(function(success) {
alert("welcome1");
}, function (error) {
// error
alert("error :"+ error);
});
}
}]);
error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=facebook-app&p1=Err…92.168.1.3%3A3000%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A449)
(anonymous function) @ angular.js:38
(anonymous function) @ angular.js:4526
n @ angular.js:321
g @ angular.js:4487
fb @ angular.js:4409
Ac.c @ angular.js:1691
Ac @ angular.js:1712
fe @ angular.js:1606
(anonymous function) @ angular.js:30423
i @ jquery.min.js:2
j.fireWith @ jquery.min.js:2
n.extend.ready @ jquery.min.js:2
J @ jquery.min.js:2
problem solved using deviceready event.
deviceready event is essential to any application. It signals that Cordova's device APIs have loaded and are ready to access.
Cordova consists of two code bases: native and JavaScript. While the native code loads, a custom loading image displays. However, JavaScript only loads once the DOM loads. This means the web app may potentially call a Cordova JavaScript function before the corresponding native code becomes available.
The deviceready event fires once Cordova has fully loaded. Once the event fires, you can safely make calls to Cordova APIs.