Facebook JS connect unsupported browser IE mobile - facebook

Question

I am getting error "unsupported browser: IE" when I am trying to login using facebook in windows mobile device(Lumia 800). Is there any way it can be fixed or facebook have to do fixes in their script. Or any other workaround can be done for this issue? Please suggest.

Answer 1

I have faced this problem as well with a big project I did for Microsoft. I needed to oath with Facebook on windows mobile devices, and got the same error. This is how I solved it:
Generally there are two ways to oath with javascript - the simple way (which generates this error) described here:
https://developers.facebook.com/docs/javascript/quickstart
and the manually build login flow described here:
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow
Here is a quick explanation of what you have to do for the second option:
1) Load SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
2) On page load check for access_token. If the user didn't login, there will be no access token. if the user did, there will be access token appended to the URL as a query but with '#' instead of '?'
I used this function:
function getUrlVars()
{
var query = '#';//normally ?
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf(query) + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Now determine if you got the access_token:
var urlString = getUrlVars();
var hasAccess=false;
var userToken;
if(typeof(urlString)!='undefined' && typeof(urlString.access_token)!='undefined'){
hasAccess=true;
userToken=urlString.access_token;
}
if user has access redirect them to the same (or other) url with the app id, access token and response type:
var appID = 'your app id';
if(!hasAccess){
$('#login').on('click',function(){
var login_redirect_uri = 'http://www.yourpage.com/';
var login_response_type = 'token';
var loginURL = 'https://www.facebook.com/dialog/oauth?client_id='+appID+'&redirect_uri='+login_redirect_uri+'&response_type='+login_response_type;
window.location.replace(loginURL);
});//login-click
}
3) if there is no access token in the url query, use a server side service (we will build below) to validate the token
var tokenValidate = 'https://titan-img-gen.aws.af.cm/toeknValidate.php';
$.ajax({
type: 'GET',
url: tokenValidate,
crossDomain: true,
data:{
token:userToken
},
dataType:'json',
success: function(validateData){
if(validateData.error){
showError();
}else{
username = validateData.username;
firstname = validateData.firstname;
lastname = validateData.lastname
//continue your code
}
},
error: function (responseData, textStatus, errorThrown) {
showError();
}
});
4) Server side service (PHP)
a)generate app token: https://developers.facebook.com/docs/facebook-login/access-tokens/
b)same origin resolution might be needed:
header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
c) define app_token :
$app_token='*******';
d)check for token parament in get
$reponse = array();
if(!isset($_GET['token']) || $_GET['token']==NULL ){
$reponse['error'] = true;
}else{
$user_access_token = $_GET['token'];
//continue here...
}
e) use facebook graph service to debug token
$fbDebug = "https://graph.facebook.com/debug_token?input_token=$user_access_token&access_token=$app_token";
f)get the json file, decode it and get the user_id from it. you can then retrieve more info from Facebook easily
try{
$fbResult = file_get_contents($fbDebug);
$fbResultDecode = json_decode($fbResult);
if(isset($fbResultDecode->data->error)){
$reponse['error'] = true;
}else{
$user_id= $fbResultDecode->data->user_id;
$userJSON = file_get_contents("https://graph.facebook.com/$user_id");
$userInfo = json_decode($userJSON);
$reponse['username'] = $userInfo->username;
$reponse['firstname'] = $userInfo->first_name;
$reponse['lastname'] = $userInfo->last_name;
}
}catch(Exception $e){
$reponse['error'] = true;
}
g)return the JSON
header('Content-Type: application/json');
echo json_encode($reponse);
Bada-Bim-Bada-Boom
I lied, it wasn't a quick explanation... but I hope it will save you some time!!!
Tomer Almog