I have implemented login using ChromeCustomTabsBrowser. After successful login, if app's Open Supported links setting is set to "Ask evety time" instead of "Open in this app", response is not getting back to the app and showing 404 screen as attached in screen.
Interesting - looks like you are using an https scheme for redirects and here is how we'd like the technology to work:
You are automatically deep linked back to your app when a login response is received over the https URL.
However, in practice I believe this is what happens:
Almost all mobile browsers try to run an internet hosted web page instead
A claimed https scheme solution is very hard to achieve and rarely used in practice today - more of an aspiration than a reality? But I believe it would need to work like this:
Capture the response on the internet web page which runs on your mobile device
Then deep link back to the app
A similar approach is used by a sample internet web page of mine - do a view source to see the logic
If it helps I have a demo Android sample that instead uses the more mainstream option of private URI schemes - though I may update it to claimed https schemes one of these days.
Code
Explanatory Articles
Even getting this form of Chrome Custom Tab based login working was a struggle, and my posts have some lessons learned that may be useful.
I have a Laravel application with login.
It all works fine in a browser, but if I use Android WebView, and try to login, I get an error
Trying to get property of non-object
This is because, when I try and get the user with Auth::user(); it returns null.
I am logging my user in using auth()->login($user) in a function. If I dd($user) at this step, it does get the correct user - but then I redirect into /dashboard which then fires a function, where the first thing it does is to try and get the user.
Its at this point it breaks.
This all works in a browser - also in an android browser. But not in Webview.
Can this have anything to do with the session cookie or something? Is it possible to try and dd() the session cookie to see if it exists?
And if it doesn't, how come this isn't setting in Android Webview?
I have tried using CookieManager.getInstance().setAcceptCookie(true); but this isn't helping, and should also be defined by default.
All help appreciated
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
I have researched the most popular questions on SO already (Question 1, Question 2, Question 3, Question 4, and Question 5)... None of them help with my situation.
I have the application settings laid out like this...
App Domains: azeverything.com
Sandbox Mode: Disabled
Website with Facebook Login
Site URL: http://azeverything.com
****App Domains*** requires that no protocol be identified and Site URL requires that a protocol be identified.*
I have tried using www.azeverything.com and that didn't work either. Everything seems to match up. By the way, this is a WP site. I'm not developing locally either. It's all live.
Try to check at Settings > Advanced. At Valid OAuth redirect URIs, make sure you have a correct domain.
Hope it works.
You need to add the URL to your app:
Go to the app, you want for user login, on the Facebook Developers page
Click on the settings tab
Click add platform
Select Website
After selection it will ask for some details such as URL for your website which uses login with facebook feature, fill the form and submit it
That's all and you are done. Make sure that the app's URL is the same from where you're logging in.
Under Basic settings:
Add the platform - Mine was web.
Supply the site URL - mind the http or https.
You can also supply the mobile site URL if you have any - remember to mind the http or https here as well.
Save the changes.
Then hit the advanced tab and scroll down to locate Valid OAuth redirect URIs its right below Client Token.
Supply the redirection URL - The URL to redirect to after the login.
Save the changes.
Then get back to your website or web page and refresh.
This is a basic breakdown for slow people like me, and I didn't see this mentioned before.
The "redirect uri" isn't the place where you're redirecting to, but where it's coming from.
Say you have your app at http://myFBapp.com listening to /auth/facebook, and after they log in, redirecting them to /UserLoginHooray. The "Valid OAuth redirect URIs" should read http://myFBapp.com/auth/facebook, not http://myFBapp/UserLoginHooray.
Explanation:
HTTP Requests that have been redirected (302) include the original address in the header, so Facebook is merely putting a very basic layer of security on the request.
I chased my tail on this issue for hours. My coder and I could login with FB without a problem but my wife couldn't. She would get this topic's subject message. I tried every setting and URL that I could think of for my Lavarel app.
My issue was that my wife was signing in from:
http://www and we were using http://
A short trip to CPanel and a redirect fixed that. Hope this helps someone!
For Lavarel these FB app settings worked for me:
Settings/Basic - App Domain: mydomain.com , Site URL: http://mydomain.com/login.
Settings/Advanced - Client OAuth Login: Yes.
Settings/Advanced - OAuth redirect URIs: http://mydomain.com , http://mydomain.com/login.
App Details/App Center listed platforms = No. I'm only using the login for now.
I have a website with facebook login.
It has been stable and working for months.
No code change has happened for weeks.
Then, suddenly, the facebook login gives an error message:
Error
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
After debugging "for awhile", I reset my facebook app secret and it started to work again!
Michael Blackburn's answer helped me resolve my issue, but I want to give more detail on my fix.
I have a php app that posts to a user's FB page.
I own two domains:
http://app.my-web-app.com
http://app.mywebapp.com (no hyphen)
I built my site off the first domain because it read better IMHO (at least it did at the time).
Some users typoed the url so I bought the second one with no dashes for that reason.
So, one of my users was having the "Given URL" error.
Turns out he was going to http://app.mywebapp.com and the rest of them were going to http://app.my-web-app.com
I fixed everyone by adding all possible redirect URIs:
Granted, there are 100 better ways to implement this, but here is the workaround for now.
1.Make Sure Website Url and platform added, if not then visit https://developers.facebook.com/quickstarts/ then Select
Platform -> Setup SDK -> Website Url And so on..
Note: website url can't be like this : https://www.example.com just remove www and make it simple and working ;)
2.Goto App Dashboard -> Setting -> Click on Advanced Tab then go to bottom of the page and enable Embedded Browser OAuth Login
and leave Valid OAuth redirect URIs blank and Save it
I found Valid OAuth Redirect URIs under PRODUCTS then Facebook Login > Settings not as everyone is stating above. I am supposing this is a version issue.
It still didn't work for me. I guess I really have to add Android Platform rather than just the Website. This is annoying because my app is still in development mode :(
UPDATE: I'm using Expo to develop my react-native app and used info provided here: https://developers.facebook.com/apps/131491964294190/settings/basic/ to set up the Android and iOS platforms. This resolved the issue for me.
Sometimes this error occurs for old javascript sdk. If you save locally javascript file. Update it. I prefer to load it form the facebook server all the time.
Go to facebook developer dashboard
Select settings -> select WEB(for website) -> Add platform
Add your site URL.
This should resolve your issue.
So... facebook distinguishes pretty harshly between http and https in your app. This is just another small thing to check if you run into trouble.
I solved this issue by specifying correct site URL in my App Settings.
It works fine now. You have to specify your website Url such as http://www.xyz.com/
Under advanced tab make sure "Valid OAuth redirect URIs" contains valid URI or leave it empty(not recommended)
"http://example.com/"
instead of
"http://www.example.com"
sometimes you need to check your code (the part of redirect)
$helper = new FacebookRedirectLoginHelper('https://apps.facebook.com/xxx');
$auth_url = $helper->getLoginUrl(array('email', 'publish_actions'));
echo "<script>window.top.location.href='".$auth_url."'</script>";
if any changes happens there (for example, the name of your application "https://apps.facebook.com/xxx" in relation the application settings in facebook, you will get the above error
For Android Developers,
Make sure you have enabled Facebook Login inside the Products list inside Dashboard of your Facebook project app and have added all the required details as you go through the whole flow.
The login should work without giving the same error.
I created my first Sencha touch 2 app by watching this video (http://youtu.be/5F7Gx0-W-M4) and it has a store page structured like this:
Ext.define('FirstApp.store.Places',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.Place',
proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
reader:{
type:'json',
rootProperty:'results'
}
}
}
})
The after-build (after running "sencha app build native") package work very well on my MAC (all browsers) but the generated app (i am running it on my nexus phone) works but doesn't collect any data from the google maps json.
Any help would be appreciated
The example you are referring is using google map's place search API. You can not use this API when you build the app for mobile phone with proxy set to ajax . Basically, you can not use any resource that is outside your domain. Like if your site is at yourdomain.com and there is someotherdomain.com, then you can't make ajax request to this someotherdomain.com from yourdomain.com unless that domain allows you to. In this case, your mobile app is not having any domain. You are just loading a page inside webview.
The reason is, ajax will not be able to load cross-origin resources. App build works on browsers because I believe you're using chrome with --disable-web-security flag. To work with CORS you need to use JsonP proxy. It's the only way if you're packaging for mobile app. If in a case, you own the server ( not in this context though ) then you can allow CORS by setting appropriate headers like
Access-Control-Allow-Origin: *
or
Access-Control-Allow-Origin: http://yourdomain.com/resource
Try setting proxy to JsonP .
I'm trying to integrate Twitter sharing functionality into my Android PhoneGap application, and rather than re-implement the controls to shorten URLs and track tweet length, I thought I'd use their premade web intents at https://twitter.com/intent/...
So I'm trying to launch a URL like https://twitter.com/intent/tweet?text=Hello in a ChildBrowser window, so that I can let Twitter's interface take over. The user could sign in with their credentials, and once they're signed in, the text from the URL params would appear in the Tweet box.
It won't work. When I use http://twitter.com/intent/... instead of https://twitter.com/intent/... , ChildBrowser displays the sign-in screen, but as soon as the user submits their credentials, the screen goes white. I suspect this is because Twitter switches over to HTTPS.
I confirmed that this was the case by trying a simple window.open instead of window.plugins.childBrowser.showWebPage. I have no problems with HTTP / HTTPS when using the native browser on Android. However, the native browser prompts me to accept an unverified security certificate. I suspect this is the problem with ChildBrowser - it doesn't know how to handle that prompt.
Using the native browser popover simply isn't an option: the user needs to be able to exit the process after hitting 'Tweet' or 'Follow', etc., but the 'back' button on the Android device simply moves the history one step backward to the POST action for their intent. Then, it re-launches the app from scratch, instead of returning you to the original state.
How can I configure ChildBrowser / my Android Phonegap application to override SSL issues on Twitter, so that I can run web intents in Childbrowser?
The relevant code is:
base="https://twitter.com/intent/tweet?text=";
URL=base+encodeURIComponent("it works!");
// works, but asks to accept a certificate
window.open(URL);
// blank white page
window.plugins.childBrowser.showWebPage(URL, { showLocationBar: true });
My cordova.xml file has whitelists configured as such:
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
...which I don't suspect should be a problem. However, a basic test of swapping origin=".*" yielded no change in behaviour.
I've also examined the HTTP and HTTPS headers for the Twitter intent landing pages. There doesn't appear to be anything out of line - they're identical, except for the Strict-Transport-Security header for HTTPS, which works elsewhere (e.g. Github).
Please help!
The ChildBrowser is not bound by the whitelist. The whitelist is only used to keep the main PhoneGap app from running code outside of trusted domains.
I'm confident if you go get the latest ChildBrowser code from Android you won't have run into this problem anymore. We've made some changes recently that make it more robust.
Also, Libby has a good tutorial integrating Twitter and the ChildBrowser.
http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt5p1