Tutorial :Facebook page acquire full screen after clicking on iframe



Question:

i am trying to open facebook authentication page in IFRAME that i have created on my page but the problem is once the page get loaded into iframe and i click on an iframe the facebook authentication page acquires the whole page in a full screen and iframe get vanish.

https://graph.facebook.com/oauth/authorize?client_id=<id>&type=user_agent&redirect_uri=http://localhost:3662/test.web/pages/z.aspx&display=popup  

here is my url that i am setting in iframe src attribute


Solution:1

I just ran into this myself. The solution I used?

Javascript Authentication

And the rough steps

// trigger this any way you want  window.open(      'https://graph.facebook.com/oauth/authorize?client_id=CLIENT_ID&display=popup&scope=PERM_LIST&redirect_url=http://example.com/oauth_redirect'    , 'authorize'    , 'width=600,height=350'  );  

This displays the authentication window in a popup. Now, the next bit what you do with the redirect url (in my example, http://example.com/oauth_redirect)

The access_token parameter in the URL holds the OAuth token - so retrieve that and do whatever you need to with it (store in a cookie, whatever). And then use JS to control what happens to the popup and opener

<script type="text/javascript">    // Perhaps load the next page?  window.opener.location = 'http://example.com/canvas'    // close the popup  window.close();    </script>  

See this relevant forum thread as well.


Solution:2

Not sure about that, but I think the "popup" form factor is for real popups, you should try the "page" form factor here


Solution:3

This is a security mechanism; the user has little way to tell whether your IFRAME is really Facebook, or you presenting something that looks like Facebook. With a full URL at the top, this becomes much more transparent (yes, they should implement SSL with a valid cert to truly prove this, but hey).


Solution:4

Login in iframe is not allowed for security reasons. Use a popup instead. You can do what Peter suggested with window.open or use the JS SDK, for example: http://fbrell.com/auth/all-in-one.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »