Ionic Facebook Integration - facebook

I integrated facebook in my ionic app but keeps getting the error
Given URL is not allowed by the application configuration: One or more of the given URLs is not allowed by the app settings. To use this URL you must add a valid native platform in your App's settings.
I added the platform and saved it. What am I doing wrong over here ?

The error you are getting in the console is because your app isn't configured properly in the Facebook Developers page.
Check your config.xml
<widget id="com.ionicframework.coaching154009" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
We need the widget id. Then go to facebook (developer mode obviously), check your app.
Configuration->Basic->Add platform->Android.
Google play app name-> .
In this case: com.ionicframework.coaching154009
Google play app name: com.ionicframework.coaching154009
Then accept and save changes.
Cross reference #404
Refer these links as well -
#1
#2
#3

Related

App Store/Play Store redirection if App is not installed on ionic App

I have implemented deeplink for my ionic v1 application and also implemented universal link for same. I also checked so many links to implement App store redirection functionality.
Most of the link suggest to implement javascript code which first check device and based on ios/adnroid/window it will redirect to particular store but let say I will create that javascript code look like below
const iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS) {
window.location.href = "temp://itunes.apple.com/us/app/...";
}
but where should I put this file so when user click on deeplink it should redirect to particular this file and redirect to App Store/Play Store?
Let say I want to give my deeplink to some other server for which i don't have any access then what?
is there any other param or attribute we can set like fallback url by which when app is not installed it will automatically going to that particular link?
Any answer would be great help.
Thanks.
Usually it works that way:
You place a link on the website where you want to advertise your app. That link has a click tracking domain that points to your server. e.g. click.example.com/....
Upon clicking, if the app is installed, Universal Links would ensure that the app is opened. This is done by iOS (only if you configured Universal Links correctly, see https://developer.apple.com/ios/universal-links/). If the app is not installed, a redirect is done to your click tracking domain. This is where your Javascript logics should apply, so basically you need to reply to the request with a 302 redirect to an HTML file that contains the redirection logics (as in the example above). In that server response you can handle any fallback URL you want to use.
By the way, to make Universal Links work, anyway you had to host the AASA file, so you probably already created a server, so you can use it for the case where the app is not installed.

Branch.io - How to setup universal links/App links in Ionic app

My app is built on ionic 1 and I have followed this guide to get things working. https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking When you click on the branch url, the app opens up fine.
Now I want to setup android app links. When I receive an email with my web app url, eg: https://app.example.com, this should open up the app if mobile app is installed. If not user should be taken to play store/App store.
Also if the link has query params (the query params will be dynamic), this should be passed to the mobile app. eg: https://app.example.com/mypath?query_params=1234567890
Based on the path in the url, the user will be redirected to the respective page on the ionic app.
I have setup the branch sdk bower install branch-sdk. When I click on the url (https://app.example.com) this still opens up on browser. This is how my index.html in ionic app looks like.
<script src="lib/branch-sdk/dist/build.min.js"></script>
<script type="text/javascript">
console.log("Branch SDK Loading");
branch.init('key_test_ikEKvQjiZRwV1LXZ2hUlamfewwhVQ5rw', function(err, data) {
console.log("Branch SDK Loaded");
console.log("Branch SDK Err and Data ", err, data);
});
</script>
Any idea how to set these things up?
Alex from Branch.io here:
Everything you've described should generally be working once you've done the initial integration process. If you haven't already, I'd suggest reviewing our main integration guide to make sure all the steps were completed.
If you're still having difficulty, get in touch with our Integrations team. They're fantastic!
EDIT: this is due to using Postmark for email sending. To understand why this is a problem, take a read through this blog post. It's primarily about iOS Universal Links, but App Links work almost exactly the same way.
To get this working, you'll need to turn off link tracking on Postmark.

what is AppLink URL in FB.Mobile.AppInvite in Facebook SDK for Unity? and how to get it? or make it?

I am using Unity 5.3.4f1 and Facebook SDK for unity 7.4
The problem is poor documentation and not having step by step guide to facebook SDK FB.Mobile.AppInvite in:
https://developers.facebook.com/docs/unity/reference/current/FB.Mobile.AppInvite
FB.Mobile.AppInvite(
new Uri("www.HereGoesTheAppLinkUrl.com"),
new Uri("https://www.dropbox.com/s/vzl519vvf4hfe3j/3DTank1200X628.png?dl=0"),
AppInviteCallback };
The issue is what is AppLink? how to create it?any Csharp code for that?
where is the documentation regarding this subject? any guide example? anyone anything? am I even asking the right questions?
In a few newbie words - AppLink is a webpage full of meta headers. These meta headers redirect the client to appropriate application or store on their device.
E.g. if you create an AppLink page for MyXYZapp, which is an app for both iOS and Android, than probably you'll have a pseudo code in your AppLink page header like this:
//client is visiting the applink:
if the client is on Android:
try:
open app with bundle id `com.AndroidCompany.MyXYZapp`
else if MyXYZapp is not present on the device:
redirect client to Play Store page of MyXYZapp
else if the client is iOS:
try:
open `com.iOSCompany.MyXYZapp`
else:
redirect to AppStore page of MyXYZapp
else if client is visiting from any other OS:
redirect to AppStore / PlayStore via browser (or create your own behaviour)
EDIT:
Facebook itself now provides applinks, as described here:
https://developers.facebook.com/docs/applinks/index-api/
EDIT, THIS NO LONGER WORKS:
Now most people do not own servers to host these kinds of pages so facebook offers free hosting and very easy tool to generate AppLinks for your apps:
https://developers.facebook.com/quickstarts/?platform=app-links-host
read more here:
https://developers.facebook.com/docs/applinks/hosting-api
p.s. hope the URLs don't decay and dissolve through the coming centuries
p.p.s the URLs have decayed under 2 years. Crazy

Facebook App : This must be derived from Canvas URL, Secure Canvas URL

Hi I wan't to create a facebook app to use it for the auth in my new site locally installed(my machine),but from yesterday I don't succeed to install it and use it, all time I have this very strange error when I wan't write a domain in the "App Domains" :
This must be derived from Canvas URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL or Secure Page Tab URL. Check and correct the following domains
the domain of my application is http://localhost/project/app_dev.php/ it dosn't work I change it by a real url such as : http://www.exemple.com/,but I had the same error,and just I notice that I see this error when I create an app with new look of facebook (yesterday)...
In my case the problem was I hadn't completed the "+ Add Platform > Website" section. Once I did that the contents of App Domains became valid and the error went away.
I had this same problem yesterday, the stackoverflow answers that helped me the most were
Make local development work with Facebook/Google APIs and Canvas URL / Secure Canvas URL error message ( Also checkout How to handle OmniAuth callbacks in multiple environments?)
The Facebook developer UI has changed a bit. I'm writing this answer to consolidate all the info that helped me.
1. Make local.host Point to Your Computer
First thing you need to do is (as answered in the first link), facebook won't take localhost as a valid callback site, because it confuses localhost with a top level domain (com org etc.) in other words there is not dot . in your domain name. So change your /etc/hosts to add the entry
127.0.0.1 local.host
Now youcan access your app at http://local.host/... (this will take effect as soon as you save /etc/hosts file, no need to restart anything)
2. Add local.host as the Site URL on the facebook Dev Console
The second thing you need to do is add local.host as the site url on the facebook page
Now don't use your production app. Add a dummy app on your https://developers.facebook.com account Because your production app will have to set the site URL to your production URL and not local.host
Configure the dummy app as shown in the screenshot. But that website section(shown in the screenshot) won't be visible on the Basic settings page from the beginning.
First you will have to click + Add Platform button at the bottom, and select Website.
Notice I added http://local.host:3000/. That's where my ruby server runs in dev mode.
Also, be sure to use App Id and App Secret for the dummy app when running your webapp in dev mode.
HTH.
My problem was that logging in with facebook wasn't working for my app.
It turned out that I just needed to fill in the "Valid OAuth redirect URIs" field on the "Advanced" tab.
e.g. http://example.com/auth/google/callback
I'd a similar problem, Facebook have changed now on left pane file login (After selecting you app from top left corner) -> Valid OAuth redirect URIs
If you work on desktop app like WPF or winforms and use a WebBrowser Control to log in with the Facebook SDK.
You have to set to yes the Embedded Browser OAuth Login in Advance Tab of your facebook apps setting.
hope I help
Chose "Add platform" at the bottom and give your localhost url. "http://localhost:port/".
After this step. Facebook allows you to add localhost:port as your domain url.
After these 2 steps you can test "login with facebook" without any trouble.

Given URL is not allowed by the Application configuration

I am trying to create facebook sign-in page according to this tutorial. I only changed the two lines
appId : '370675846382420', // App ID
channelUrl : '//http://bp.php5.cz/channel.html', // Channel File
and I get the following 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.
What might be the problem?
The problem is that whatever url you are currently hosting your app is not setup in your Application configuration. Go to your app settings and ensure the urls are matching.
Updated
Steps:
Go to 'Basic' settings for your app
Select 'Add Platform'
Select 'Website'
Put your website URL under 'Site URL'
This can also happen when the redirect_uri submitted with the https://www.facebook.com/dialog/oauth request is not present in the list of Valid OAuth redirect URIs under:
Settings >> Advanced >> Security
After much trial and error, when I added the redirect_uri that I was using (https://www.facebook.com/connect/login_success.html in my case), I suddenly got to the step past this error.
The above answers are right, but you have to make sure you input right URL.
You have to go to: https://developers.facebook.com/apps
Select your app
Click settings
Enter contact email (for publishing)
Click on +add platform
Add your platform (probably WEB)
Enter site URL
You have two choices to enter: http://www.example.com or http://example.com
Your app will work only with one of them. In order to make sure your visitors will use your desired url, use .htaccess on your domain.
Here's good tutorial on that: http://eppand.com/redirect-www-to-non-www-with-htaccess-file/
Enjoy!
Go to your application, settings (basic tab) and add platform (website). Type your site url and done.
Do the above work of adding the site and then the url.
I think the layout of facebook has changed little bit so also do the below things.
- Go to developers.facebook.com -> your app
- Go to Settings->Advanced.
- Under the Security->Valid OAuth redirect URIs, insert all the uri's your app is supposed to redirect to. For example (
http://localhost:1443/cas/login, https://localhost:2443/cas/login, http://rajanpupa.com/cas/login
etc)
- That should do it.
I faced the same issue. I had entered http://www.example.com in the App settings. When anybody accessed my website using the full URL, Facebook Login worked fine. But if somebody typed in the URL without www in the browser, Facebook Login failed with this error message. When I changed the App Setting to http://example.com everything started working fine.
Go to https://developers.facebook.com/apps and open the app you have created. open setting tab and add platform and insert site url where you want to share facebook button .Its done.
The other answers here are excellent and accurate. In the interest of adding to the list of things to try:
Double and triple-check that your app is using the right application ID and secret key. In my case, after trying many other things, I checked the application ID and secret key and found that I was using our production settings on our development system. Doh!
Using the correct application ID and secret key fixed the problem.
My Problem Solved by
public static final String REDIRECT_URI = "http://google.com";
it will redirect to Url after ur Login into Facebook.and also you have to reach
url : https://developers.facebook.com -> My App -> (Select your app) ->Settings ->Advanced Setting -> Valid OAuth redirect URIs : "http://google.com".
In the place of "http://google.com" you can place ur respective project Url.so,that it will redirect to your Page.
I was getting this error when trying to run my test web page directly from "file:///C:/webtests/myfile.htm". To fix it, I didn't have to make any changes to my App Settings. Instead, I just had to host my HTML file on an actual server and then hit it like: "http://localhost/myfile.htm".
Hope that helps someone.
I'm using the Facebook Canvas platform (Unity WebGL) and I don't needed to add the Website platform. The only thing I did was add my website root url in:
Product
Facebook Login
Valid OAuth redirect URIs
For me it was the "Single Sign On" (can be seen at the bottome of the screenshot in phwd's answer) setting that was turned off.
I ran into this with the IBM BlueMix SSO service and had to use the BlueMix provided redirect URL as my "site" URL instead of my actually web application site URL to fix it. Once I made that change the problem went away.
This can be caused by incorrect app-ID
In my ionic sample I had the same issue because I had inserted a different "app-ID" in my ionic app other than the app-ID I received from Facebook developer account.
so we have to carefully insert the relavent appID
Things have evolved in Facebooks approach, I now realised that you need to
"Add Product" to your App: facebook login.
make sure oauth & web auth on
add my own site url to ""Valid Auth redirect URI" (and removed the default https://www.facebook.com/connect/login_success.html which his in the
Without this I get the URL Blocked error.