phonegap - using external site as app - facebook login - facebook

I'm building a app site running through phone gap. Phone gap simply checks the user has internet connection and loads an external web app into the frame. I can navigat through the site fine with no blibs but as soon as I try the login to Facebook (either PHP redirect or javascript SDK) the app suddenly gets its navbar back or opens a new window (javascript SDK).
Is there anyway I can prevent this?
regards

It took some doing but using the ChildBrowser plugin, I've managed to login! (this is for android) I've used some code from a facebook connect plugin which didnt work for me, re wrote some stuffs so I could understand it and now works. Chears Juicy Scripter!
var fb_success = 'https://www.facebook.com/connect/login_success.html';
var fb_logout = 'https://www.facebook.com/connect/login_failed.html';
var fb_logout_ = 'http://m.facebook.com/logout.php?confirm=1&next=' + fb_logout;
var authorize_url = '';
var my_client_id = '##################';
var my_secret = '######################';
var my_type = 'user_agent';
var my_display = 'touch';
var token = false;
var fb_code = false;
var device_ready = false;
var ajax_url = '';
function logged_in(){
// alert('do what you need to do!');
}
function fb_force_logout(){
}
function fb_auth_check(){
console.log('fb_auth_check()');
if( fb_code !== false ) {
console.log('ajax test instigated...');
ajax_url = 'https://graph.facebook.com/oauth/access_token?client_id=' + encodeURIComponent(my_client_id) + '&client_secret=' + encodeURIComponent(my_secret) + '&code=' + encodeURIComponent(fb_code) + '&redirect_uri=' + fb_success;
$.ajax({
url: ajax_url,
type: 'POST',
success: function(html){
token = html.split("=")[1];
console.log('success! token = ' + token);
window.plugins.childBrowser.close();
fb_init();
},
error: function(error) {
console.log('there was an error...' + ajax_url);
window.plugins.childBrowser.close();
}
});
}
}
function fb_track_redirects(loc){
console.log('redirect tracked... ' + loc);
if ( loc.indexOf(fb_success) >= 0 || loc.indexOf(fb_success) > -1 ) {
fb_code = loc.match(/code=(.*)$/)[1]
console.log('success redirect... fb_code=' + fb_code);
fb_auth_check();
window.plugins.childBrowser.close();
} else if ( loc.indexOf(fb_logout) >= 0 || loc.indexOf(fb_logout) > -1 ) {
window.plugins.childBrowser.close();
}
}
function inner_init(){
console.log('inner_init()');
if( token === false ) {
console.log('token was false...');
authorize_url += "https://graph.facebook.com/oauth/authorize?";
authorize_url += "client_id=" + encodeURIComponent(my_client_id);
authorize_url += "&redirect_uri=" + encodeURIComponent(fb_success);
authorize_url += "&display=" + encodeURIComponent(my_display);
authorize_url += "&scope=publish_stream,offline_access";
console.log('instigated location change...');
window.plugins.childBrowser.onLocationChange = function(loc){
fb_track_redirects(loc);
}
console.log('open Facebbok login window');
window.plugins.childBrowser.showWebPage(authorize_url);
}else{
logged_in();
}
}
function fb_init(){
console.log('fb_init()');
if( device_ready === false ) {
console.log('first device run...');
document.addEventListener("deviceready", function(){
device_ready = true;
console.log('device ready...');
inner_init();
}, false);
}else{
inner_init();
}
}
$(document).ready(function(){
$('#login').bind('click', function(){
fb_init();
return false;
})
});
</script>

This is how it works for all apps native or web without patching the SDK code.
This is probably can be done, but will require digging into code. The question is do you really need it? This is a desired behavior.
You can try to use PhoneGap Facebook plugin and enable Single Sign On so native Facebook App if exists will be opened instead of browser to authenticate the user.
BTW,
Apps that are just external sites wrapped mostly rejected in app store.
Update:
Where is some points that may be also helpful in answer (by Facebook employee) to similar question How can I use an access token to circumvent FB.login().
Also have a look on ChildBrowser PhoneGap plugin (and Example).

Related

Flutter: how to create post request with form data same js code

I want to upload an image to the server with flutter, in js t use form data with input file but with flutter I don't know what to do.
in js:
formData.append("file", e.clipboardData.files[0]);
formData.append("session", sessionid);
formData.append("fileindex", fileListIndex);
var hostname = window.location.hostname;
var protocol = window.location.protocol;
if (hostname === "localhost") {
xhr.open("POST", "http://localhost:9999/" + uploadpoint, true);
} else if (hostname === "www.aladin.finance") {
xhr.open("POST", protocol + "//uploadfile.aladin.finance" + "/"
+ uploadpoint, true);
} else {
xhr.open("POST", protocol + "//uploadfile." + hostname + "/"
+ uploadpoint, true);
}
xhr.withCredentials = true;
xhr.send(formData);
Flutter has this great package called Dio to handle all sort of http requests. It's very easy to do what you want with it. Check this: https://pub.dev/packages/dio#sending-formdata

Log in to Facebook with phantomjs - 302 issues?

I'm trying to write a phantomjs script to log in to my facebook account and take a screenshot.
Here's my code:
var page = require('webpage').create();
var system = require('system');
var stepIndex = 0;
var loadInProgress = false;
email = system.args[1];
password = system.args[2];
page.onLoadStarted = function() {
loadInProgress = true;
console.log("load started");
};
page.onLoadFinished = function() {
loadInProgress = false;
console.log("load finished");
};
var steps = [
function() {
page.open("http://www.facebook.com/login.php", function(status) {
page.evaluate(function(email, password) {
document.querySelector("input[name='email']").value = email;
document.querySelector("input[name='pass']").value = password;
document.querySelector("#login_form").submit();
console.log("Login submitted!");
}, email, password);
page.render('output.png');
});
},
function() {
console.log(document.documentElement.innerHTML);
},
function() {
phantom.exit();
}
]
setInterval(function() {
if (!loadInProgress && typeof steps[stepIndex] == "function") {
console.log("step " + (stepIndex + 1));
steps[stepIndex]();
stepIndex++;
}
if (typeof steps[stepIndex] != "function") {
console.log("test complete!");
phantom.exit();
}
}, 10000);
(Inspired by this answer, but note that I've upped the interval to 10s)
Called like so:
./phantomjs test.js <email> <password>
With output (filtering out the selfxss warnings from Facebook):
step 1
load started
load finished
Login submitted!
load started
load finished
step 2
<head></head><body></body>
step 3
test
complete!
(Note that the html output in step two is empty)
This answer suggests that there are problems with phantomjs' SSL options, but running with --ssl-protocol=any has no effect.
This appears to be a similar problem, but for caspar, not phantomjs (and on Windows, not Mac) - I've tried using --ignore-ssl-errors=yes, but that also had no effect.
I guessed that this might be a redirection problem (and, indeed, when I replicate this on Chrome, the response from clicking "Submit" was a 302 Found with location https://www.facebook.com/checkpoint/?next), but according to this documentation I can set a page.onNavigationRequested handler - when I do so in my script, it doesn't get called.
I think this issue is related, but it looks as if there's no fix there.

Facebook app permission request before using my app [duplicate]

I have a facebook app installed and working great.
What I would like to do is add in the functionality of requesting user permission data.
such as - read_friendlists,user_groups,email,user_birthday,status_update,publish_stream,
Firstly here is the code that checks if a fan or none fan is on our facebook timeline app.
// If a fan is on your page
if ($like_status) {
$a = file_get_contents("http://www.domain.com/home.php");
echo ($a);
}
else {
// If a non-fan is on your page
$a = file_get_contents("http://www.domain.com/home.php");
echo ($a);
}
What I would like to do, is, if a none fan is on our page, open a facebook request for permission and set a number of permissions. Then redirect them to the // if a fan is on our page.
I have had a good look around here but I am still not clear how to setup the "request" for permission page.
Any help would be greatly appreciated
you can do this in two ways..
1) Open oauth dialog in page by setting the url
var oauth_url = 'https://www.facebook.com/dialog/oauth/';
oauth_url += '?scope=email,user_birthday,user_location,user_about_me,user_likes';
oauth_url += '&client_id=' + appid;
oauth_url += '&redirect_uri=' + encodeURIComponent('https://www.facebook.com/pages/' + appname + '/' + pageId + '/?sk=app_' + appid);
window.top.location = oauth_url;
2) Or you can open the oauth dialog in popup:
FB.login(function(loginResponse) {
if (loginResponse.authResponse) {
var userId = loginResponse.authResponse.userID;
}
else {
//'User cancelled login or did not fully authorize.
}
}, { scope: 'email,user_birthday,user_location' });

Trying to retrieve facebook user email using facebook connect for cordova 3.2

I'm developing an android app wherein it requires to be logged into the app via facebook. I'm using facebook connect for cordova 3.2 and its working fine.But the problem is I'm not able to get the user's email address. I tried scope : email , permissions : 'email', but it simply does not work.I have installed facebook sdk for android the cordova 3.2 version and configured that with my project. I call the facebook login uri with a button click event.
var facebookConnect;
$("#facebookfbtn").unbind("click").click(function () {
facebookConnect.login(loginCallback, true);
});
document.addEventListener("deviceready", deviceready, false);
function deviceready(){
facebookConnect = window.plugins.facebookConnect;
}
loginCallback = function(result){
alert(result);
if(result == "OPENED")
{
facebookConnect.me(meCallback);
}
}
logoutCallback = function(result){
alert(result);
}
meCallback = function(result){
alert(JSON.stringify(result));
//var test = JSON.stringify(result);
alert('Good to see you, ' + result.name + '!' + '\n'+ 'Your Details :'+ '\n'+'Location:'+result.location+'\n'+'Email: '+result.email);
}
statusCallback = function(result){
alert(result);
}

Facebook login not responding to FB.login response

I am working on a android phonegap application with facebook integration.
FB.login(function(response) function has a response handler it is being called when
user click on fb button, but its not getting into the function response
or alert('test') every time. it gets into this script only when i hit
around 5 or 6 times. wat i need is to fetch the access token the very first time i logged into facebook. i have gone through a lot of links regarding this but
cant find an exact solution for this...
FB login callback function not responding if user is already logged in facebook
Even this question seems to be same but i cant figure it out my solution.
this is the code am working :
<div id="data">Hello Facebooktesters, loading ...</div>
<button onclick="login()">Login</button>
<button onclick="me()">Me</button>
<button onclick="logout()">Logout</button>
<button onclick="Post()">facebookWallPost</button>
<script type="text/javascript">
document.addEventListener('deviceready', function() {
try {
alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({
appId : "xxxxxxxxxxxxxxx",
nativeInterface : CDV.FB,
useCachedDialogs : false
});
document.getElementById('data').innerHTML = "FB init executed";
} catch (e) {
alert(e);
}
}, false);
function me() {
FB.api('/me/friends', {
fields : 'id, name, picture'
}, function(response) {
if (response.error) {
alert(JSON.stringify(response.error));
} else {
var data = document.getElementById('data');
fdata = response.data;
console.log("fdata: " + fdata);
response.data.forEach(function(item) {
var d = document.createElement('div');
d.innerHTML = "<img src="+item.picture+"/>" + item.name;
data.appendChild(d);
});
}
var friends = response.data;
console.log(friends.length);
for ( var k = 0; k < friends.length && k < 200; k++) {
var friend = friends[k];
var index = 1;
friendIDs[k] = friend.id;
//friendsInfo[k] = friend;
}
console.log("friendId's: " + friendIDs);
});
}
function login() {
FB.login(function(response) {
alert('test');
if (response.authResponse) {
alert('logged in');
var access_token = FB.getAuthResponse()['accessToken'];
alert(access_token);
window.location = "test.html"
} else {
alert('not logged in');
}
}, {
scope : "email"
});
}
function logout() {
alert('test');
FB.logout(function(response) {
alert('logged out');
//window.location.reload();
});
}
function Post(ele) {
var domain = 'http://192.168.0.46:8082/';
console.log('Debug 1');
var params = {
method: 'feed',
name: 'test - test',
link: domain+'test/test/showproddetails.action?product.productId=1',
picture: 'http://www.careersolutions.com/test.png',
caption: 'test',
description: 'test'
};
console.log(params);
FB.ui(params, function(obj) { console.log(obj);});
}
</script>
Thank you,
raj
You are missing semicolon in this line :
window.location = "test.html"
This question was posted a while ago but I would like to point out something. FB.login function opens a popup dialog asking if the user would like to log in to your app using Facebook. It is generally recommended that it be run after clicking a button as most browsers would block popup dialogs when a page loads. If the user had previously authorized your app then the popup dialog redirects back to your app and closes the dialog box (assuming your app is a website).
If what you intended to do was to check whether a user is logged in to your app upon page load, then it's recommended that you instead use FB.getLoginStatus method like so
function checkLoginState() {
FB.getLoginStatus(function(response) {
// Check response.status to see if user is logged in
alert(response.status);
});
}
Refer to this extensive documentation on facebook