CODEWITHSUNDEEP
facebookauthenticationfacebook-javascript-sdkfacebook-oauth
njr101
njr101

Reputation: 9629

Facebook client-side authentication - http or https redirect from OAuth dialog

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)

Upvotes: 0

Views: 1765

Answers (2)

C3roe
C3roe

Reputation: 96417

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

Upvotes: 0

Nitzan Tomer
Nitzan Tomer

Reputation: 164357

I recommend that you won't listen to the "v6 of the Facebook C# SDK".

What you're describing that you want to do spells "Server-Side authentication flow".
What you should do is implement the server side flow, then when the user lands in your app, after the server authentication you load the fb js sdk and get client side token like this:

FB.getLoginStatus(function(response) {
    if (response.status === "connected") {
        // response.authResponse has everything you need like signed request, access token, etc
        // you can also make FB.api request or use FB.ui which will use the client side token
    }
    else {
        // user is either logged out of facebook or hasn't authenticated your app
        // should not happen if the user went through the server side authentication
    }
});

This code does not require the user to interact with the page since it does not pop up a new window.
Notice here that the client side part of your app will be using a different token than the one you should have on the server, and the two tokens will have different expiration times (server is longed lived while client is short).
This approach is better and safer in my opinion since it does not require you to send the authentication data from the client to the server or the other way around.

Upvotes: 0

Related Questions