CODEWITHSUNDEEP
javascriptfacebook
David Jacob
David Jacob

Reputation: 213

Facebook - JavaScript SDK - How to ask for permission automatically

I am using HTML 5 to develop a few things and inserting Facebook JavaScript SDK within the same.

I have developed a Facebook application where I want to:

1) If user is not logged in facebook, it will ask for login, but if the user is logged in and opens the application, it should ask for the persmission automatically rather than the user needing to click the link having FB.LOGIN() again.

There is one Stack Overflow question, How do I get my Facebook application to automatically ask for the required permissions post installation where they do it by using window.top.location = "<?php echo $loginUrl; ?>";, but how can I find this authenication URL within JavaScript?

JavaScript code:

<div id="fb-root"></div>
<script>
    // 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));

    // Init the SDK upon load
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'appid', // App ID
            channelUrl : '//www.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
        });

        FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;

                document.getElementById('auth-loggedout').style.display = 'none';
                document.getElementById('auth-loggedinnotauthenticate').style.display = 'none';
                document.getElementById('loginauthenicated').style.display = 'block';
            }
            else
                if (response.status === 'not_authorized') {
                    window.top.location = "https://www.facebook.com/dialog/oauth?client_id=id&redirect_uri=http://apps.facebook.com/appp/";
                }
                else {
                    window.top.location = "https://www.facebook.com/login.php?api_key=id&skip_api_login=1&display=page&cancel_url=http://apps.facebook.com/appp/";
                }
    });
</script>

Upvotes: 0

Views: 8482

Answers (2)

Madan
Madan

Reputation: 690

Use this:

FB.getLoginStatus(function(response) {
    if (response.authResponse) {
        fbUserId = response.authResponse.userID;
        token = response.authResponse.accessToken;
    }
    else {
        FB.login(function(response) {
            if (response.authResponse) {
                fbUserId = response.authResponse.userID;
                token = response.authResponse.accessToken;
            }
            else {
                 console.log('User cancelled login or did not fully authorize.');
            }
        }, {scope: 'user_location'});
    }
},true);

Upvotes: 3

Nitzan Tomer
Nitzan Tomer

Reputation: 164129

I think that the best option for you is to use the authenticated referrals feature which means that Facebook will take care of the authentication for you, along with the permissions you need.

The user will be passed to your application only after the user went through the authentication process.

If that does not suit you for any reason, please check out the documentation for authentication and especially the server-side flow since it seems like that's what you're after from what you've wrote.

From your JavaScript code, it seems that you are not using the channel URL property when you init the Facebook SDK. As it states in the JavaScript SDK documentation (Channel File section):

The channel file addresses some issues with cross domain communication in certain browsers

And then:

The channelUrl parameter is optional, but recommended.

I can't promise that it will fix it, but it might.

It should be like this:

// Init the SDK upon load
window.fbAsyncInit = function() {
    FB.init({
        appId      : 'appid', // App ID
        channelUrl : '//www.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
    });

    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;

            document.getElementById('auth-loggedout').style.display = 'none';
            document.getElementById('auth-loggedinnotauthenticate').style.display = 'none';
            document.getElementById('loginauthenicated').style.display = 'block';
        }
        else
            if (response.status === 'not_authorized') {
                window.top.location = "https://www.facebook.com/dialog/oauth?client_id=id&redirect_uri=http://apps.facebook.com/appp/";
            }
            else {
                window.top.location = "https://www.facebook.com/login.php?api_key=id&skip_api_login=1&display=page&cancel_url=http://apps.facebook.com/appp/";
            }
});

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

As you can see, first you need to define the window.fbAsyncInit callback method, and only then load the SDK.

Upvotes: 1

Related Questions