I have a new website that require users to log in with Google login (using react-oauth/google package).
The problem starts when users clicking on my website link from the facebook mobile app, and then they're redirected to the website in the facebook embedded browser.
However, since last year, Google login blocks embedded browsers.
Is there any way to either:
Configure something so people coming in from facebook could log in using google-login, without the need of redirecting them to a different mobile browser?
If not, how can I redirect the users out of facebook and into their mobile default browser? window.location.href="my.url" don't actually openning any browser in the mobile.
Related
Is there a way to use mobile apps Facebook (Apple, Android, etc ...) to automatically authenticate users who wish to use social access for the Captive Guest-Wifi portal or similar services?
I worked with the standard social login authentication module of the standard captive portal which intercepts the first call of the operating system (Captive Portal Assistant) or the standard browser (Chrome, Safari, FF, etc ...), but this means that a user must know his credentials.
It could be easier to use the App where the customer is already logged in...
thanks!
I need to authenticate the facebook user not to only open Facebook App.
To do it, check this link - Facebook Login for Android out. It would help you.
Also, in this question - Making facebook login work with an Android Webview there is a method to create a Facebook login button with their javascript API.
The problem that you may face is "Android captive portal's splash page limitation". The splash page has a lot of limitations on js codes.
After that, if you faced this kind of problem, create a redirect page for the splash page and on the redirected page, you can do anything you want as a normal web page.
I have a mobile website that I would like to allow users to share the url via their native Facebook and Twitter apps (it is tedious to have to login to m.facebook.com).
I can have a link to fb://post to open the FB app, but I can't figure out how to actually pass params for updating a status. I want the functionality of using the sharer.php link on the desktop, but for the native mobile app.
Is this possible?
Using a web browser e.g. Chrome on Android, if a mobile website requires a user to be logged in to Facebook and they are not, the browser will ask for Login details even though the phone may be logged in to Facebook via the Facebook native App. Is there any way to get details from the Facebook App without the user having to log in again?
If you want to login in website in a browser, using Facebook account from Facebook app - it is impossible, without intermediary application, or service. And even with it, I don't think, that you can get user login data.
Other approach - is try to launch Facebook app from your site, and show site from it, but again, you can't login to it, using app.
Why? Because the app, holds only token data, and nothing more. You can't get other information, like password, or email. Also, the work of browser, that save cookies and the app, that save token is different. You can't connect them together.
Clearly speaking it is not possible using website in browser.
Even it is also not possible if you develop any android app, the reason is that the facebook app will not share any data to any other app (even if it is running on the same device).
I also don't think that launching the facebook app from browser will be feasible for you, as you just want to use the facebook login system and then want the users back on your website (and again facebokk will not send any data to your web or app even if it is launched from your web or app).
I think it's not possible, because we wont link browser and an app.
I developed one android app with facebook login integration.If facebook native app already logged in, now i click my app facebook login button it directly redirect my app to my home page without asking fb username and password.
For me i used localStorage in javascript
localStorage.setItem("userName", userName);
localStorage.setItem("password", password);
var uname=localStorage.getItem('userName');
var pass=localStorage.getItem('password');
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'm a bit confused about the difference between a facebook canvas application and a facebook mobile web application. Here is the context of my confusion..
I have a canvas application, let us call its namespace as myfbapp, and I basically can access it from https://apps.facebook.com/myfbapp and after I login to FB it opens up with in Facebook. I'm using java (apache / tomcat) for my server side implementation and for simplicity sake let us say I just have an index.html and a authenticationfilter.java (which implements Filter) in my web application. I don't have any Facebook specific Javascript API (no FB.init() javascript or anything like that ) or code in my index.html. Whenever user accesses my canvas application I first get a request to my web application where I get the signed_request , oauth_token , FB user ID etc which I can use for my internal authentication, session creation etc. I have absolutely no issues with this canvas application and every thing works fine. Please note that when user accesses this app the request I get from the browser to my app server has the signed_request , user_id etc.
Now I wanted to make this app available on mobile devices as well and I thought, oh well all I need to do is add the mobile URL for this app in the mobile web app section in Facebook for the same myfbapp. I did that and as expected when I login to facebook from my android phone myfbapp is listed under the apps section, so far so good. The problem starts when I click on the app. I get the request on my app server but it doesn't contain the signed_request , user_id etc.. ????? I was expecting the mobile app to work the same way as the canvas app but apparently it doesn't or I'm doing some thing wrong.
Then I started reading more about facebook mobile app at http://developers.facebook.com/docs/guides/mobile/web/#register where it talks about adding various Facebook Javascript API's in the index.html (I never did anything like that in my canvas app) and then I started thinking , may be then mobile web app is more (or exactly) like a regular web app with FB connect and not like canvas application (meaning it doesn't really load with in Facebook) , is this true?
On mobile facebook you can not see any custom pages/tabs. They are apparently wokring on that at the moment.
So it will be different to a canvas app. Your mobile app will be a completely seperate site and page not in an iFrame on Facebook.
Some behaviour i discovered recently with Facebook Canvas / Page Tabs on mobile devices.
Maybe this helps to understand a little bit better how facebook behaves in mobile context.
Mobile Browser
Access App URL
Example URL http://apps.facebook.com/myapp/
Redirects to the configured mobile website under Settings > Website > Mobile Site URL and adds additional params /?ref=web_canvas&code=<signed_request_code_field>
About the signed_request code field
An OAuth Code which can be exchanged for a valid user access token via a subsequent server-side request
Access App Center
There is no way to access the Facebook App Center via the mobile browser.
Access Page Tab
Example URL http://facebook.com/a_facebook_page/custom_page_tab_url
Custom Page Tabs are not visible via the mobile browser.
Facebook Open Graph Search
Searching for myapp returns the link to the Facebook Canvas.
Same behaviour like Access App URL via Mobile Browser
Mobile Facebook Client
Access App URL
There is no way to access this url directly.
Access App Center
There is no way to access the Facebook App Center.
Access Page Tab
Example URL http://facebook.com/a_facebook_page/custom_page_tab_url
Custom Page Tabs are not visible via the mobile facebook client.
Facebook Open Graph Search
It says that this app is not compatible with this devices.
You need to register an iOS / Android App and send the user to this app to get rid of this error. Probably it helps the user if you add the link to the standalone application to the Facebook description of the app. Which should then be visible there.