How to use Facebook test app to do Facebook Login - Web JavaScript

Question

This is my first time to write JavaScript.... I am using JSBin as the IDE. And I am trying to use JavaScript to allow users login and get their public data in Facebook Graph API.

I created a Facebook Web App, and then created a Test App for this App. None of these 2 Apps work. For each of these Apps, I have created a test user like this:

Below Are How I Failed....

First Try: I have checked this Facebook Login Doc, changed the app id to my own app id, and version changed to 2.6 as my app settings. But, the problem is, on JSBin, nothing show up.....

Second Try: Then I found an online example, and I modified the code to make it like this

<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId      : '1814637902090044',
cookie     : true,  
xfbml      : true,  // parse social plugins on this page
version    : 'v2.6' // use graph api version 2.6
});

FB.Event.subscribe('auth.authResponseChange', function(response) 
{
 if (response.status === 'connected') 
{
    document.getElementById("message").innerHTML +=  "<br>Connected to Facebook";
}    
else if (response.status === 'not_authorized') 
{
    document.getElementById("message").innerHTML +=  "<br>Failed to Connect";
} else 
{
    document.getElementById("message").innerHTML +=  "<br>Logged Out";
}
}); 

};

function Login()
{
    FB.login(function(response) {
       if (response.authResponse) 
       {
            getUserInfo();
        } else 
        {
         console.log('User cancelled login or did not fully authorize.');
        }
     },{scope: 'email'});
}

  function getUserInfo() {
    FB.api('/100012237662406', function(response) {
    var str = "<b>Email:</b> "+response.email+"<br>";
    document.getElementById("status").innerHTML=str;

});
}


 // Load the 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));

 </script>
 <div align="center">
 <h2>Facebook OAuth Javascript Demo</h2>

  <div id="status">
Click on Below Image to start the demo: <br/>
 <img src="http://hayageek.com/examples/oauth/facebook/oauth- javascript/LoginWithFacebook.png" style="cursor:pointer;"   onclick="Login()"/>
 </div><div id="message">Logs:<br/>
  </div></div>
</body>

As you can see, I am using the app id of my Test App, the user is my test user id, but when I click the button, always get this error

Third Try: Since above error shows "app in development mode....", I have checked these 2 solutions: Solution 1, Solution 2. But I really cannot find those choices in App Review and I cannot find Status & Review. When it comes to Test App, it even has no App Review. Then I tried to public my App like this

But then I got the error:

Here are the url settings:

For that Redirect URL, I have also tried http://localhost/oauthcallback.html, but didn't work either. I don't have any real url can be used for redirect....

I think, if Test App without App Review can be used to test Facebook Login, it may not be the settings in App Review problems. Do you know how to solve this problem, so that my Javascript will allow user login and send me their public data in Graph API?

How to use Facebook test app to do Facebook Login - Web JavaScript

0 Answers0