Question

I have read a load of the FB docs but I still can’t get this working.

I have a FB app running in an IFrame. I am using the JS SDK to authenticate the user. So if the user has not used my app before, I need to prompt them with to authorize.

I tried using FB.Login() but this has two big problems:

1. It opens a popup which is ugly
2. I want the login screen to appear automatically (i.e. without requiring the user to make another click)

So instead I tried rediecting to the OAuth dialog on the client. For this to work, the OAuth url must be opened in the top window which means I need to pass the redirect_uri as apps.facebook.com/myapp.

The problem is that this will only work if I use https as the prototcol. But if the user is already using facebook over http, I don’t want to switch them to https.

Here is my code:

window.fbAsyncInit = function () {
    FB.init({
        appId: 1234567890,
        channelUrl: "//mydomain.com/channel.html",
        status: true,
        cookie: true,
        xfbml: true
    });

    FB.Event.subscribe('auth.statusChange', function (response) {
        console.log(response);
        if (response.status === "connected") {
            // User has authorized app
        } else if (response.status === "not_authorized") {
            var url = "//www.facebook.com/dialog/oauth?";
            var queryParams = ["client_id=1234567890",
                  "redirect_uri=//apps.facebook.com/myapp",  // NOT WORKING
                  "response_type=token"];
            var queryString = queryParams.join("&");
            url += queryString;
            window.top.location = url;
        }
    });
};

Is there a way to use the OAuth dialog to authenticate using the client-side flow? Or am I going about this completely the wrong way?

(P.S. I don’t want to use the server-side flow because according to v6 of the Facebook C# SDK, the recommended method is to authorize on the client and pass the access_token from the client to the server)

Answer 1

"redirect_uri=//apps.facebook.com/myapp", // NOT WORKING

– is that your main problem? If so, you can easily read out the protocol used in requesting your app’s URL inside the iframe with JS, it’s inside the location.protocol property. And yes, the protocol used by your app matches that the user used to surf to the Facebook website 😉