5

When someone tries to login to my site via facebook, he's redirected to a page where he sees all the requested permissions and click to allow / disallow them.

Is there any way to have this page open up as a layered window through javascript without having the user leave my website? E.g so my website would be in the background while the facebook connect window hovers above it.

Any ideas at all?

Ali
  • 261,656
  • 265
  • 575
  • 769

3 Answers3

6

The answer is no. Also, you can't load the login page within an IFrame since Facebook has a frame breaker for that page.

The page you're talking about is called the OAuth dialog. By default, requesting users to login to your app will cause a page redirect since the "display" parameter is set to "page" (other values include: popup, iframe, touch, and wap). What you want is to invoke this dialog with display set to "iframe". However, the documentation states: "If you specify iframe, you must have a valid access_token." And, to get an access_token, the user needs to first login to your app. For that reason, you won't be able show the login page within an embedded IFrame.

However, once a user authorizes your app with a basic permission set, you may prompt that user for additional permissions with the dialog's display mode to "iframe" (since you have the access_token).

David H
  • 2,901
  • 1
  • 26
  • 21
  • So the best option if I want to keep him on my site when he logs in, is to use a pop up? – Ali Jun 11 '11 at 23:34
  • The best option is to use the JavaScript SDK's default behavior (i.e. page redirect) because popups may fail to open for a variety of reasons. For example, Internet Explorer's documentation [states](http://msdn.microsoft.com/en-us/library/ms537632(v=vs.85).aspx): "The Pop-up Blocker blocks script-initiated pop-up windows that are created [...] without the user clicking a link." I've seen other failures due to bugs with the JS SDK. – David H Jun 12 '11 at 00:19
  • Yeah but the client insists that you must be kept on the same site and not be redirected. For that, are popups the best option? (They're only triggered after a link is clicked anyway) – Ali Jun 26 '11 at 14:18
  • In that case, yes -- using popups is the second best option. – David H Jul 08 '11 at 07:24
3

I use Facebook Connect within a popup and it works pretty well.

1) "Fake" the Facebook-Login-Button

Take a Screenshot of the Button, wrap it's img-tag with an a-tag with attributes

href="<?= $facebook->getLoginUrl(...); ?>"
onclick="facebookPopup(this.href); return false"

2) Create Javascript Popup Function

function facebookPopup (url) {
    popup = window.open(url, "facebook_popup",
"width=620,height=400,status=no,scrollbars=no,resizable=no");
    popup.focus();
        }

3) Create FB Connect "Landingpage"

Create a php-File that will handle the user's data when he finished the connect dialog, for example save his username and facebook-uid if he's new, or just log him in if his ID was already known. Then close the Popup and Refresh your main page by Javascript:

function CloseAndRefresh() 
    {
        window.opener.location.href = window.opener.location.href;
        window.close();
    }

You may trigger that function by <body onload='CloseAndRefresh()'>

Remember to specify your landingpage's URL in the Login-Url (redirect_uri). Also, if you specify 'display'=>'popup' in the login URL, it will show a condensed version of the "Permission Request"-Dialog.

Felix
  • 31
  • 2
2

I support David's answer.

Also, If you somehow load the login dialog in an iframe or a div, the user won't be able to tell If he/she is really submitting login credentials to Facebook or some other site.

Can't comment yet. :(

anilmwr
  • 477
  • 9
  • 16