i have created an facebook application
when trying to access the application for the first time
i don't see the dialog asking to authorize the application
i only see a facebook logo ,
only when pressing the link under the logo i can see the auth dialog
what i am doing is to redirect the client to this URL
https://www.facebook.com/dialog/oauth?client_id=my client number&redirect_uri=http%3A%2F%2Fmy-side-domain.com%3A9000%2F&scope=read_stream,user_birthday,user_location
can u tell me what i am missing
(it redirect ok under chrome , but not on firefox)
thank you
Is this a canvas app on facebook.com? What you are describing sound like what happens when you do a redirect to the oauth dialog in a canvas app within the canvas iframe. You need to bust out of the iframe during the redirect:
Because of the way that we currently load iframes for Apps on
Facebook.com, it is important that you navigate the top window of the
user's browser to the OAuth Dialog. Many apps do this by sending a
script fragment to the user's browser setting the top.location.href
property to the dialog URL.
source: http://developers.facebook.com/docs/appsonfacebook/tutorial/#auth
Related
I have a web application (React js with Kotlin backend) that has normal email + pw (plus PIN) login, and it also supports 3rd party authentication (Google and Facebook). It works on mobile and web, however, when I open my webpage through Facebook app - which opens it's own browser - and try to log in with 3rd party authentication, I can click on that "Continue as me" button, but then the page refreshes and I'm not logged in. I saw the same thing happen on other sites too, e.g. Figma, Pinterest, etc. I thought it's impossible to log in this way anymore, however, I just noticed that you can actually log in to Stackoverflow this way (so facebook app -> facebook browser -> stack overflow -> 3rd party auth and it works).
Has anyone figured it out how it was possible for Stackoverflow to do this?
Ok, I found the solution. The problem was that when a user clicked on 'Login with FB' button on my site, I sent a request to fb to get back a content of a login window and I created a pop up window where I rendered it, I put on a listener on that pop up window and once it was done, then I got the access token and sent it to backend and logged the user in. On a normal browser it works perfect (both pc and mobile) but as I mentioned above it didn't work in an in app browser like facebook app.
The issue was that facebook app opens a website in it's own browser that doesn't handle any pop ups, so after a successful authentication I saw that nothing happened and it was because we were not redirected to the original window where we should have, and it had the token in the url. So the solution was instead of making this pop up window for FB login, just redirect the user to the fb login page (and stay on the same window), and once the login is successful, just handle the token as is.
i have made a web app for the iPhone that connects to facebook using oAuth.
When i try this on my computer everything works fine: i can click login on my page, it redirects to a authentication page of Facebook, i click OK, redirects back to my page and i'm logged in.
When i do the same thing on my iPhone: i tap login on my site, it redirects to the facebook auth page. But THEN it changes to a mobile page and that page is just blanc. There is nothing on it and the 'title' is "UNTITLED"...
How can i fix this ? (or is this a bug at Facebook ?)
Thanks
Evert
In the Facebook Developer page for your app, have you enabled "Native iOS App" checkmark
and the fields in that section.
Like you have to specify the bundle id of your app, you have to enable Facebook login radio button and also you have to enter the url scheme of your app in the Url Scheme suffix field.
Standard is to prefix fb to your fb app id and use it as the url scheme.
Also make sure you enter this urlscheme in the Xcode project in the info.plist file
under URL types . This will be used to redirect to your app once the authentication is successful/failed.
I'm having a problem that I can't see to fund the solution to.
I have a tab on my Facebook page (one of those static HTML: iFrame apps). There are no problems accessing it from a PC, however when I try accessing the tab from a mobile device it says:
"The page you requested was not found.
Back to previous page"
Is there some way I can either create a tab accessible on mobile devices, or just redirect them to an external domain?
Thanks!
How to create a mobile accessible Facebook Page Tab App
In order to create a Page Tab App which has a mobile accessible version (an external website accessed directly, not via a Facebook iFrame). You need to add and configure 3 different "Platforms" in the app developer settings. These should be configured as follows:
Page Tab
Configure this as you would normally.
Page Tab Name: the name you want to appear on the page tab
Page Tab Url: the url where you are hosting the page tab app (e.g. http://myapp.com/page-tab)
Secure Page Tab Url: the same thing but with https in front (e.g. https://myapp.com/page-tab)
Website
This is where you configure the url for your mobile site
Mobile Site URL: This is the url you want mobile users to be redirected to (e.g. http://myapp.com/mobile-version)
Site URL: This is used for Facebook Connect, if you are not using Facebook connect, just put your mobile url in here too.
App on Facebook
This is going to be the gateway to your app. Mobile users arriving on this page will be redirected to the mobile website. You can use javascript to redirect desktop users to your Facebook Page Tab App.
Canvas App Page: this will be http://apps.facebook.com/my-app-namespace, this is the link you will post on your facebook wall or in your ads, or anywhere else you want to link to your page tab
Canvas Url: this is a link to a page on your app that will be embedded as an iframe on the canvas app page. You will use this page to redirect to your page tab using JavaScript. e.g. http://myapp.com/canvas-redirect
Secure Canvas Url: This is the same as above but with https in front (e.g. "https://myapp.com/canvas-redirect")
Your Canvas Redirect Script
You want people arriving at your canvas app on a desktop browser to be redirected to your page tab app. Because it is loaded inside an i-frame, the only way to do this is using JavaScript.
This will be the content of your Canvas Url (http://myapp.com/canvas-redirect above):
<script>top.location="http://facebook.com/page_tab_url/app_1234"</script>
Note the "top.location" - this will redirect the parent window, not just the iframe to the page tab. When a user arrives on the canvas page in a desktop browser, they will be redirected via JavaScript to your Page Tab App. Mobile users will be redirected by Facebook to the Mobile Site Url you specified above.
Testing in Sandbox Mode
If your app is in Sandbox Mode, only admins, developers or testers of the app will be able to see it. In particular users not logged into Facebook, or who are logged into Facebook but are not admins or testers of the app, will not be able to access the app canvas page - they will just see a 404 error. In order to test your mobile redirect when the app is in sandbox mode, you need to ensure that you are an an admin, developer or tester of the app AND you are logged into Facebook's mobile site on your phone's web browser - i.e. Safari on iOS and Chrome on Android. It is not sufficient to be signed into the Facebook Mobile App on your phone, you must also be logged in using the browser.
A note about User Roles
You can configure the App User Roles by clicking on the "roles" tab in the app settings. You can add a Facebook user, or a Facebook Group as any of the roles. (If you add a Group, all the users in that group will have the role specified in the app). In order for a user to have a specific role on an app, they must:
Verify their facebook account: http://www.facebook.com/help/verify
Install the Facebook Developer app https://developers.facebook.com/
(Edited to reflect updated Dev Settings UI and readibility)
As an update to this, Facebook now automatically redirects to your website without needing any hacks.
To do this make sure you have added a website platform to your app and put your mobile URL in there.
I had a hard time figuring out how to access page tabs with mobile and, thanks to Ben in a previous comment, I found a way. First of all, you can't access page tabs with your mobile phone, so you will need to point it where your page tab takes it source. Facebook can do that for you if you are using canvas, but if you access it with a desktop computer, you will be redirected to your canvas link, not your page tab. This is how we fix it :
--
1) Go into your App (Facebook developers) under Settings - Basic
2) Copy your Page Tab URL from the Page Tab section (something like http://yourpagetab.yourdomain.com), and past it in your Mobile Site URL into the Mobile Web section.
3) Do the same with the App on Facebook section, but instead of pointing it into your page tab, you will have to use a redirection file. Let's use http://yourpagetab.yourdomain.com/redirection.php?fb
Note that you have to use ?fb at the end of your link. It does nothing, but Facebook wants it. Actually it could be ?anything and probably only ?
4) Create that redirection.php file (don't add the ?fb) and add this code in it
<script>top.location="http://facebook.com/your_fb_page/your_page_tab"</script>
You have tho replace /your_fb_page/your_page_tab with the link to your page tab.
5) Save it!
--
Now, all you have to do is to use the Canvas Page url that Facebook provides you (under App on Facebook). If people click on it and are on desktop, they will be redirected into the page tab. If they are on mobile, they will be redirected to your website hosting the page tab.
If you are using fan gate (user have to like your page before accessing your page tab) : this will not work as the mobile user will get stuck on your fan gate.
The only ways to get through that is to disable the fan gate or to use Mobile Detect (you can search it on Github) and disable it only for users that are on mobile. It's a small price to pay if you want your page tab to work with mobile users. Desktop users will still need to like your page to see your page tab.
you can also use a link like this to stop facebook redirecting mobiles
https://www.facebook.com/MyAppName/?sk=app_11111-APP-ID-11111&ref=ts
I'm one of the developers of Static HTML. We actually have a feature built into the app now that generates smart, shortened links that work for mobile and desktop. If you click on the "+" icon at the top of the editor, it'll pull up a shareable link.
If you use that link, we do a little bit of extra magic so that your tabs fit better on small screens.
Edit: we've discarded the special formatting, because it was glitchy on iOS devices.
Here is the php code I use for the redirect:
// Mobile_Detect
require 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if (strpos('https://' . $_SERVER['HTTP_REFERER'] . $_SERVER['REQUEST_URI'], 'facebook.com') !== false && $detect->isMobile()) {
echo '<html><head><script type="text/javascript">window.top.location.href = "https://yourappurl.com";</script></head><body></body></html>';
die();
}
i set up a new app-- when my users recieve the permission scree, after clicking "Go to app" i want it to redirect to my own website (ex.www.mysite.com) instead its redirecting me to my website within facebook.
Since my website is not compatible within facebook, i need the app to lead users to my site- how can i do that?
The url that the users are being redirected to once the clicked the allow button is the url you provided in the "redirect_uri" parameter when you sent the user to the oauth dialog.
Instead of specifing your fb app url (apps.facebook.com/APP_NAME) you can use ex.www.mysite.com (as long as it's the same as what's in the app settings).
Another thing that you can do is to just reload the page using javascript:
top.location.href = "ex.www.mysite.com";
With all of that said, you should not be doing that.
It cleary says in the Facebook Platform Policies:
The primary purpose of your Canvas or Page Tab app on Facebook must not be to simply redirect users out of the Facebook experience
and onto an external site.
If your app has a Canvas presence, then the Go To App button will redirect to your canvas landing page. For example http://apps.facebook.com/yourapp
If your app is strictly a Connect app then the Go To App button will redirect to your site outside of Facebook for example http://www.yourapp.com
If your app has both Canvas and Connect implemented, it will go to the Canvas page.
The relevant settings in the Facebook developer app are under "Select how your app integrates with Facebook". You do not need to have any canvas presence within Facebook.com. You can just check the box for Website and then the Go To App button will take users directly to your site. Be aware that if you do this you lose the ability to use a few important API features such as Bookmarks and Requests.
I would like to integrate an existing, external application with Facebook using Mobile Web method and its authenticated referrals as well as to be able to redirect user (incoming from a different place) to Facebook login page. I do not want it to be embedded in Facebook page.
If I understand correctly how the authenticated referrals work, I must somehow reach the authentication dialog which will redirect me to the Mobile Web URL, which I specified in the application configuration.
Additional information: I would like to avoid making the application public until it is ready, so I have set the Sandbox Mode setting to Enabled.
How to get the URL, with which I will be able to test authenticated referrals?
You can land at your game's Mobile Web URL page using following steps:
Switch your user agent to iPhone or other mobile.
Go to the http://m.facebook.com page.
Press the "identity" icon in the top left edge of the screen to show the bookmarks menu.
Look for the application in the Apps section.
Press the application bookmark.
Above procedure worked for me. My user was an admin of the project but it will probably work also for devs and testers (just a guess).