Question

Trying to figure out how to use the JavaScript SDK. I’m new to JavaScrip. I was able to use the PHP SDK but want to run my stuff clientside. Anyhoo, I don’t really understand the SDK documentation on the develop site. So the base code is:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
            appId      : 'YOUR_APP_ID', // App ID
            channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
};

// Load the SDK Asynchronously
(function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
}(document));

Which I think I understand…it loads the SDK and then runs the FB.init stuff once it loads. I don’t know where to put all of the OAuth stuff though, and how to structure the login request (i.e. if not logged in the make a button and if you are then return access token etc.

Can someone hold my hand through this beginning part. I’ve searched everywhere and I just don’t quite get it.

Edit:

Okay, second try with authentication. Didn’t work:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
            appId      : 'XXX', // App ID
            channelUrl : 'XXX', // Channel File
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
    FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                // the user is logged in and connected to your
                // app, and response.authResponse supplies
                // the user's ID, a valid access token, a signed
                // request, and the time the access token 
                // and signed request each expire
                var uid = response.authResponse.userID;

                var accessToken = response.authResponse.accessToken;
                FB.api('/me', function(response) {
                        alert(response.name);
                });

            } else if (response.status === 'not_authorized') {
                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 + '.');
                                    FB.logout(function(response) {
                                            console.log('Logged out.');
                                    });
                            });
                        } else {
                            console.log('User cancelled login or did not fully authorize.');
                        }
 }, {scope: 'email'});
            } else {

            }
    })

};

// Load the SDK Asynchronously
(function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
}(document));

</script>

Thanks!

Answer 1

Just below this line,
// Additional initialization code here
is where the oauth stuff goes.

I would suggest getting used to calling FB.getLoginStatus() first. See: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

---

EDIT

based upon the question edit above
This should be done inside the window.fbAsyncInit function

FB.api('/me', function(response) {
        alert(response.name);
});

and only after you’ve checked the getLoginStatus() so you know if the person is logged in or not.