Solved

Facebook SDK - Login

Posted on 2014-01-25
17
324 Views
Last Modified: 2014-01-27
Hello

I need to make a simple html window that will check if an access token is valid and the app has the required permissions or else it will display the a facebook login screen and ask for the required permissions for the app and  then return a access token (site must not redirect!)
The access token will later be used to get friend information and so on.

I can't seem to get this to work, if somebody could help me out with this, I would be grateful.
Because site must not redirect is because I will be using this in a Flex app, the HTML file will be local and if facebook wants to redirect back it, will not be able to redirect back to a local path.
0
Comment
Question by:JoachimPetersen
  • 9
  • 8
17 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39810042
Could you post your code?
It's all about theses three functions :

function bCheckTokenValid(token) {
    // code
    return TrueOrFalse; // a boolean
}

functions sGetCurrentToken() {
   // code
   return token; // a string
}

function sDisplayFacebookLoginScreenWhichRequestPermission() {
   // code
   return token; // a string
}

Open in new window

0
 

Author Comment

by:JoachimPetersen
ID: 39810145
The reason for me to write here was because the code from facebook site did not even work:
see their example code here:
https://developers.facebook.com/docs/opengraph/getting-started/
That code is not working, here is my app ID, so you don't need to create a app in facebook yourselfs: App Id: 306529702749085
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39810194
no, their code really work, it used by million of developers... let me do a correction, billion of developers :)
0
 

Author Comment

by:JoachimPetersen
ID: 39810362
try and run the 'official' example and replace the 'replace me' with '306529702749085'
Then tell me if it is working.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39810411
work
0
 

Author Comment

by:JoachimPetersen
ID: 39810616
Well mine do not display the login button, it might be my browser settings then.
Anyway, that is the code I have so far, the problem is that I need the login to be embedded in the page as StageWebView in Flex does not support popup and a local file return to facebook oauth is not possible (https://www.facebook.com/dialog/oauth?client_id=AppID&redirect_uri=ALocalPathIsNotPossibleHereSoFarIKnow&response_type=token))
So the facebook login has to be embedded in the local page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39810652
So you need to do the work on the server side
0
 

Author Comment

by:JoachimPetersen
ID: 39810751
So there is no solution to embed the facebook login to your own page? like define a div an it creates a facebook login area?
(client-sided with javascript)
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 82

Expert Comment

by:leakim971
ID: 39810756
with no popup no
0
 

Author Comment

by:JoachimPetersen
ID: 39810807
I am then forced to make the file on a server then, I found this PHP script and is what I am looking for, the problem is that I do not know PHP and javascript very well, so I would need some help to translate this into javascript:

<?php
  $app_id = "YOUR_APP_ID";
  $app_secret = "YOUR_APP_SECRET"; 
  $my_url = "YOUR_POST_LOGIN_URL";
     
  // known valid access token stored in a database 
  $access_token = "YOUR_STORED_ACCESS_TOKEN";

  $code = $_REQUEST["code"];
    
  // If we get a code, it means that we have re-authed the user 
  //and can get a valid access_token. 
  if (isset($code)) {
    $token_url="https://graph.facebook.com/oauth/access_token?client_id="
      . $app_id . "&redirect_uri=" . urlencode($my_url) 
      . "&client_secret=" . $app_secret 
      . "&code=" . $code . "&display=popup";
    $response = file_get_contents($token_url);
    $params = null;
    parse_str($response, $params);
    $access_token = $params['access_token'];
  }

        
  // Attempt to query the graph:
  $graph_url = "https://graph.facebook.com/me?"
    . "access_token=" . $access_token;
  $response = curl_get_file_contents($graph_url);
  $decoded_response = json_decode($response);
    
  //Check for errors 
  if ($decoded_response->error) {
  // check to see if this is an oAuth error:
    if ($decoded_response->error->type== "OAuthException") {
      // Retrieving a valid access token. 
      $dialog_url= "https://www.facebook.com/dialog/oauth?"
        . "client_id=" . $app_id 
        . "&redirect_uri=" . urlencode($my_url);
      echo("<script> top.location.href='" . $dialog_url 
      . "'</script>");
    }
    else {
      echo "other error has happened";
    }
  } 
  else {
  // success
    echo("success" . $decoded_response->name);
    echo($access_token);
  }

  // note this wrapper function exists in order to circumvent PHP’s 
  //strict obeying of HTTP error codes.  In this case, Facebook 
  //returns error code 400 which PHP obeys and wipes out 
  //the response.
  function curl_get_file_contents($URL) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($c, CURLOPT_URL, $URL);
    $contents = curl_exec($c);
    $err  = curl_getinfo($c,CURLINFO_HTTP_CODE);
    curl_close($c);
    if ($contents) return $contents;
    else return FALSE;
  }
?>

Open in new window


So far, the translation of the script to javascript is:
  var app_id = "**********";
  var app_secret = "********"; 
  var my_url = "************/faceauth.html";
     
  // known valid access token stored in a database 
  var access_token = "AOldFaceBookToken";
// get the token like this for testing: https://www.facebook.com/dialog/oauth?client_id=APPID&redirect_uri=************/faceauth.html&response_type=token
  var code = var _REQUEST["code"];
    
  // If we get a code, it means that we have re-authed the user 
  //and can get a valid access_token. 
  if ((code)) {
    var token_url="https://graph.facebook.com/oauth/access_token?client_id="
       + "" +  app_id  + "" +  "&redirect_uri="  + "" +  urlencode(my_url) 
       + "" +  "&client_secret="  + "" +  app_secret 
       + "" +  "&code="  + "" +  code  + "" +  "&display=popup";
    var response = file_get_contents(token_url);
    var params = null;
    parse_str(response, params);
    access_token = params['access_token'];
  }

  // Attempt to query the graph:
  var graph_url = "https://graph.facebook.com/me?"
     + "" +  "access_token="  + "" +  access_token;
  response = curl_get_file_contents(graph_url);
  var decoded_response = json_decode(response);
    
  //Check for errors 
  if (decoded_response.error) {
  // check to see if this is an oAuth error:
    if (decoded_response.error.type== "OAuthException") {
      // Retrieving a valid access token. 
      var dialog_url= "https://www.facebook.com/dialog/oauth?"
         + "" +  "client_id="  + "" +  app_id 
         + "" +  "&redirect_uri="  + "" +  urlencode(my_url);
      alert(("<script> top.location.href='"  + "" +  dialog_url 
       + "" +  "</script>"));
    }
    else {
      alert( "other error has happened");
    }
  } 
  else {
  // success
    alert(("success"  + "" +  decoded_response.name));
    alert((access_token));
  }

  // note this wrapper function exists in order to circumvent PHP’s 
  //strict obeying of HTTP error codes.  In this case, Facebook 
  //returns error code 400 which PHP obeys and wipes out 
  //the response.
  function curl_get_file_contents (URL) {
    var c = curl_init();
    curl_setopt(c, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt(c, CURLOPT_URL, URL);
    var contents = curl_exec(c);
    var err  = curl_getinfo(c,CURLINFO_HTTP_CODE);
    curl_close(c);
    if (contents) return contents;
    else return false;
  }

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39810813
when I say it's not possible to do it without :
- server side
- popup

I don't see why translating (IF POSSIBLE) php code to JS code will allow it doable...
No, you should use server side code if you CAN'T use the popup version facebook give you.
0
 

Author Comment

by:JoachimPetersen
ID: 39810845
I understand but above provided script checks the response from oauth (client side)
Then to display login, I use oauth again and have the above code the file on a webserver, provide the oauth return url to the webserver file.
0
 

Author Comment

by:JoachimPetersen
ID: 39810848
What I am saying:

www.example.com/Myfile.html --> checks token provided ---> if no token ---> redirect to https://www.facebook.com/dialog/oauth with returnurl to www.example.com/Myfile.html
if token is working then it will call a as3 function

so I need the script as that would be the way to go with the information you have provided to me so far.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39810849
so why people are using server side if they just can do it client side?
0
 

Author Comment

by:JoachimPetersen
ID: 39810869
The facebook oauth does the server sided function, then it returns what I asked for in request, then I simply handle it.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39810907
so you're ok, you can close the question accepting your own answer
0
 

Author Closing Comment

by:JoachimPetersen
ID: 39811336
No the points goes to the solution, what I asked for was not possible as you pointed out so you answered my question, I just wanted to write a complete solution as I could so other people would see the solution to this if they found this post.

So what I am going to do is use oauth insted of using facebook sdk javascript to avoid the popup window.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now