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?
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).
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.
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. :(
Related
Let's say an external site has a redirection page before actually moving to the internal site when user clicks the link.
This internal site only has a button that will let you go back using
History.back() or .go(-x). I can only do changes on the internal site.
What's happening here is that we now have a "loop" that redirects to the external redirection page using history.back(), and then the user will be redirected once again to the internal site.
Flow:
External site -> user clicks on internal site link -> external site sends user to external redirection page -> user redirects to visit the internal site -> user click history.back button -> user get redirected to external redirection page -> user redirects to visit the internal site again
I basically do not want the user to end up at the internal site after users clicks the history.back button.
I thought about saving page visit in localstorage, so that if it gets redirected back to the internal site again it will instead do history.go(-2).
I am also aware of https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer document.referrer, but that will also degrade the UX since the user gets redirected back and forth at least once.
The only solution I could think of is having a query parameter upon visiting the internal site someurl.com/?redirects=2, so that we could do history.go(-redirects). However, that requires the external site to decide how many redirects it has.
Is it possible to know if user comes from a redirection page from the external site? Is there a way so that we can skip the external redirection page and just go straight to the external page?
window.location.replace is there for exactly the same requirement, please refer https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
Assuming that the external rediection page contains only the logic for rediection and no content, they should have used location.replace for redirection to have a clean state of history.
I know that you do not have control over external site but I just wanted to help in case you can ask someone to make changes there :)
I came up with a solution to the problem, but my approach does use document.referrer.
Regarding UX degradation when using document.referrer, it should be barely noticeable as long as your clientside code is optimized.
Also, you might be interested to read this MDN Article.
My solution approach is attached here:
const isExternalURL = (url) => new URL(url).origin !== location.origin;
function checkExternalURL() {
const referrerPage = document.referrer;
if (referrerPage == undefined) return false;
return isExternalURL(referrerPage);
}
if (checkExternalURL()) {
console.log("External URL Detected");
} else {
console.log("Internal URL Detected");
}
This should be simple, I want to know how to open a new page in the same window using VBScript?
steps:
when open page go to database
retrieve the records you need
Build URL where you want user to be redirected
Using response.redirect send user to desired page. It will open page in the same window.
You also can use JavaScript set.location to same url with basically same effect.
Depends on how heavy data is and how well your data retrieval methods are it could be so fast that user nor even realizes that he was not on the same page, however if browser set to alert user on redirect that would be a different story.
If you are trying to redirect your page to a new page you should be able to use a redirect
really simple example vbscript:
Dim URL
URL = "mywebpage.com/newpage.asp"
Response.Redirect (URL)
this page has a few other examples:
http://msdn.microsoft.com/en-us/library/ms524309%28v=vs.90%29.aspx
As you know, Facebook is filtered in many countries, and if we put a "Like" button in our page, they will see a "ACCESS DENIED" message form their internet provider instead of the Like button. so the question is, can I detect if Facebook is viewable by the user or not? so I just show the Like button if the users have access to Facebook and it's not filtered.
Thanks
Test if the domain www.facebook.com is accessible by loading the favicon.ico and if so, show the iframe:
<iframe src="http://www.facebook.com/plugins/like.php" id="fbfm" style="display:none">
</iframe>
<script>
var fbicon = new Image();
fbicon.onload = function() {
document.getElementById("fbfm").style.display = "";
};
fbicon.src = "http://www.facebook.com/favicon.ico?" + Math.random();
</script>
I guess you could set a very small width and height on the like button iframe, just enough for the button itself, and hope that any "ACCESS DENIED" message has enough padding not be visible in the iframe's viewport! :)
The alternative might be to "ping" Facebook, as in make an AJAX request and see what the response is. Hopefully any blocked response from an ISP would contain an HTTP 403 status code, or something sensible, but if not you'd have to scrape the return HTML and try yourself to determine whether you're seeing Facebook or an error page, then decide whether to render the like button or not.
My advice would be to use a service like ShareThis or AddThis. There is a chance that they aren't blocked in your country (you can test it before you use it with and without a VPN) and they give you an advantage that your users can share your website with friends on other portals that are available to them.
It would certainly be interesting for other people to know whether or not those services are available in countries where Facebook is blocked as many of them can't test it themselves.
Use the Facebook javascript library at: http://developers.facebook.com/docs/reference/javascript/
and use the FB.getLoginStatus(...) function to check and decide what you want your application to do. If they have logged in or not (connected or not_authorized) then they are logged into facebook and you can show your like button. If the status is unknown they haven't logged in yet but can see facebook.
If the facebook script does not load or return any value then facebook is probably blocked and you don't want to display your like button.
NOTE: You'll also need to create an app id with facebook to link your javascript to.
If my Facebook canvas page is pointing to mydomain.com, and if a user goes directly to mydomain.com, how do I make the site show up on the Facebook canvas page? Basically, I want my website to always load on the Facebook canvas. If I just do a redirect to apps.facebook.com/mydomain, I think it gets into an infinite loop because the Facebook canvas is trying to load mydomain.com.
Check for the referrer in the HTTP request header, and base your logic on that. That being said, I don't know that redirecting your entire site to Facebook is a good solution to your problem.
A better solution would be to host the Facebook app portions on a separate page or domain, and link to it from your frontpage.
You can do it client side in javascript. Check if the page is currently opened inside an iframe, if it's not the case you are not inside facebook and should execute a redirect:
if(window.parent === window) do the redirect
You could find a way to implement it serverside, but, unless facebook is passing some specific parameters when loading, probably you will need to rely on the HTTP_REFERER parameter and the browsers will not send it always.
If your app is being loaded within Facebook, the page will be POSTed to, and the POST data will contain a signed_request field. This can be used on the server to discover if the user is accessing the app correctly - how you persist this information across navigation within the iframe is up to you.
Client side you can check window !== top, and /canvas/.test(window.name).
I found this on another question and use it in my own script:
<script type="text/javascript">
function NotInFacebookFrame() {
return top === self;
}
function ReferrerIsFacebookApp() {
if(document.referrer) {
return document.referrer.indexOf("apps.facebook.com") != -1;
}
return false;
}
if (NotInFacebookFrame()) {
top.location.replace("https://apps.facebook.com/YOUR_APP_NAMESPACE");
}
</script>
This checks if they are currently in the Facebook frame and *ONLY if they are not it will redirect them to "https://apps.facebook.com/YOUR_APP_NAMESPACE"
Note: you can use this on any page in you app just change the URL accordingly.
For example: If you are using this in http://YourDomain.com/anotherpage.php you can change the URL in the code above to https://apps.facebook.com/YOUR_APP_NAMESPACE/anotherpage.php
I have just tried to use the Facebook registration plugin inside an iframe page tab.
In case anyone is wondering why I would want to do this, I want to use the Facebook registration plugin to create a newsletter signup form on my FB page.
I tried with this code:
<iframe src="https://www.facebook.com/plugins/registration.php?
client_id=113869198637480&
redirect_uri=&
fields=name,birthday,gender,location,email"
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="100%"
height="330">
</iframe>
and this code:
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1"></script>
<fb:registration
fields="name,birthday,gender,location,email"
redirect-uri=""
width="530">
</fb:registration>
In both cases I used the APP_ID of the page tab application, and the canvas url for that page tab, but I filled out the website field with the website being used.
WHen I take out the pre-filled FB info and fill out the form, a var_dump on the receiving page gives out the right info, but when I submit it with the pre-filled FB info, it does a popup saying, you are registering with APP_NAME_HERE, if you want to do this click continue, or undo if you don't (something like that) and when I click continue nothing happens.
I have used Firebug to inspect the page, and I think that the data is being sent to another iframe, but I don't know how to access it. I have tried changing target to _top, _self and _parent but this didn't work either. I also tried creating a new app specifically using the website attribute, and that failed in the same way too. ANy help gratefully received.
As far as I can tell, the target attribute is broken when using pre-filled info. Perhaps it has something to do with the way the flow must happen when the confirmation popup appears, but AFAIK it's not documented that the two cannot be used together. In any case, the pre-filled data seems to have the effect of forcing target=_top no matter what you specify in the attributes.
That being the case, you will have to specify an external page address as the redirect_uri and process the data there and then redirect back to the Facebook page address. If necessary you can pass some data back using the app_data parameter in the query string.
Most than likely you are already flagged as registered and are receiving back the cookie/header for FB connect to work. If this is the case you will need to un-register your application on facebook in the application management page. Once you do that the button will work again.
Lastly, if the user is logged into Facebook and already connected to
your application, the button will say Login and won't do anything when
clicked (but your application should detect this state using the
getLoginStatus method and not show the button).
https://developers.facebook.com/docs/plugins/registration/
You can debug your registration status using
FB.Event.subscribe('auth.statusChange', function(response) {
if(!response.authResponse) return;
console.log(response)
});
Hope this helps.
Looks to me that you are missing something:
< fb:register >
Here you can see that tha attribute onvalidate, which contains the name of the js function called after the Register button is pressed, to whom is passed the whole object containing the user info.
Greetings ;)
Luca
In the second code redirect-uri="" needs a value. It needs to be prefixed by your site url.