CODEWITHSUNDEEP
phpjavascriptfacebookoauth-2.0facebook-oauth
Romeo
Romeo

Reputation: 376

How to properly use facebook OAuth2?

After like 3 days desperately trying to integrate the facebook login system into my website i've came to the conclusion that i miserably failed. I simply created a mess of PHP SDK with JavaScript SDK API calls and the result was as expected, not working.

I've searched on Google and stackoverflow answers to other's questions, tutorials, explanations but I now admit myself as defeated.

Can you give me a good tutorial for this job? Or can you give me an indepth view of their library thingy?

Hope this won't be closed.

EDIT: Is this the recommended method of using's facebook login system?

EDIT 2:

FB.init({ appId : '<?php echo $core->appId; ?>', // App ID from the App Dashboard channelUrl : '//romeo.no-ip.org/94seconds/channel.html', // Channel File for x-domain communication status : true, // check the login status upon init? cookie : true, // set sessions cookies to allow your server to access the session? xfbml : true // parse XFBML tags on this page? });

This code generates FB.getLoginStatus() called before calling FB.init().

My page looks like this:

<!DOCTYPE html>
<html>
    <head>
        <script src="../node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js"></script>
    </head>
    <body>
        <div id="fb-root"></div>
        <script>
          window.fbAsyncInit = function() {
                FB.init({
                  appId      : '<?php echo $core->appId; ?>', // App ID from the App Dashboard
                  channelUrl : '//romeo.no-ip.org/94seconds/channel.html', // Channel File for x-domain communication
                  status     : true, // check the login status upon init?
                  cookie     : true, // set sessions cookies to allow your server to access the session?
                  xfbml      : true  // parse XFBML tags on this page?
                });
          };

          // Load the SDK's source Asynchronously
          // Note that the debug version is being actively developed and might 
          // contain some type checks that are overly strict. 
          // Please report such bugs using the bugs tool.
          (function(d, debug){
             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" + (debug ? "/debug" : "") + ".js";
             ref.parentNode.insertBefore(js, ref);
           }(document, /*debug*/ false));
        </script>
    </body>
</html>

EDIT 3: Nevermind, i've just realised i've spent 3 - 4 hours punching walls because i've missplaced some code. I've lost the error. :D thank you guys.

Upvotes: 0

Views: 223

Answers (1)

Jaspal Singh
Jaspal Singh

Reputation: 1240

Here you go bro!

  1. This will add the fb js sdk to you page 

    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=" + APP_ID;
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

  2. This will inform you if the user is logged in or not or what his current staate is

    window.fbAsyncInit = function() {

    // Additional init code here
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            // logged in and connected

        } else if (response.status === 'not_authorized') {
        // not_authorized - the user has not authorized ur app

        } else {
        // User is not_logged_in

        }
    });

    FB.Event.subscribe('edge.create',
        function(response) {
            //Not relevant here
            //User has just liked your page
            //likeHandler(response);
        });
};

  3. This is to log the user in

    function Login() {
    FB.login(function (e) {
        //        console.log(e.authResponse);
        if (e.authResponse) {
            M_access_token = e.authResponse.accessToken;

            //custom function to get user details
            get_details();
        } else {
        //            console.log("Error : Failed to Authorize")
        }
    }, {
        scope: "email,user_likes,publish_stream"
    })
}

//Notice the scope param above

  4. This is for logging out the user 

    function Logout() {
    FB.logout(function(response) {
        // user is now logged out
        });
}

  5. custom function Get_details

    function get_details(typeCalled) {
    FB.api("/me?fields=name,id,email,gender,username,picture", function (e) {
        fbUserObject = e;
        //        M_user_id = e.id;
        //        M_user_full_name = e.name;
        //        M_user_email = e.email;
        //        M_user_gender = e.gender;
        //        M_username = e.username;
        //picture = e.picture.data.url;
    });
}

  6. once you have the user data, you can pass that to the server and set up the session. Once user clicks on the logout button, you should clear the session on the server.

All the Best! :)

Upvotes: 2

Related Questions