Ionic 2 PWA: Linking to specific page - ionic-framework

I want to let people share their own user profile in my app.
Therefore, each profile needs to have his own link, for example: myweb.com/user1
Unfortunetly, there are no such links/routes in an ionic 2 app.
This leads to my question- How I can let users share their own profile URL so other people will be redirected right to the sender profile page? Is there any way to do this so it will work in desktop too with Ionic 2?

For info - This is resolved with the addition of support for deeplinking in Ionic 3. The CLI commands $ ionic g page user will now create a page with it's own page module and the ability to specify how the url should be formed using the #IonicPage decorator. In your case you would also add the user id as a param in the #IonicPage segment, for example:
#IonicPage({
name: "user",
segment: "user/:id"
})
You can then deeplink straight to the user's page with the url.

You can set your app link using Custom URL scheme plugin. It will help you to create your app link, which can open from browser. For example if you type myApp:// in browser URL then navigate to that URL, it will open your app.
To do this install plugin as below :
ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myCoolApp
Where myCoolApp is the URL schema from which you can open your app.
For testing it is working or not type myCoolApp:// in any browser of your phone and go. If it will redirect to your app it is working, otherwise not working.

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.

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.

Facebook SDK install APP with install confirmation

I am looking for help to validate when a Facebook APP has been installed. I am currently using PHP SDK to have the clients sign in and in the same manor I would like for them to return to the site once the APP is completed and installed correctly.
Is there a method to use this link and have it return with the client id?
https://www.facebook.com/add.php?api_key=XXX
You should not use https://www.facebook.com/add.php?api_key=XXX for any cases other addition of application to page as a tab (and even this is undocumented).
If you're using PHP-SDK you should use Facebook::getLoginUrl to log user in, which support redirect_uri parameter so you can add client id as argument to this URL
Update:.
As it turns question is about adding application tab to page you should be using Add Page Tab Dialog to provide user with a way of "installing" application to page without leaving your app.
You can refer to answers on How to add tab application to a page with the "new auth dialog" for more info.
Update 2:
How to reach applications running as Page Tab described in "Integration with Facebook APIs" section of Page Tab Tutorial:
your application will also receive a string parameter called app_data as part of signed_request if an app_data parameter was set in the original query string in the URL your tab is loaded on. For the Shop Now link above, that could look like this: http://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here. You can use that to customize the content you render if you control the generation of the link.
You not required to add app_data, just use v=app_APPID to link to your page tabs (Facebook itself using sk instead of v, both works).

How to Test Facebook Connect Locally

I use ASP .NET and Facebook Connect APIs. but when I run the app and press Connect button it's return to the Website not to the test local server which is (http://localhost:xxxx/test.aspx)
So how I can test Facebook locally (i.e How I can change the callback url) ?
It's simple enough when you find out.
Open /etc/hosts (unix) or C:\WINDOWS\system32\drivers\etc\hosts.
If your domain is foo.com, then add this line:
127.0.0.1 local.foo.com
When you are testing, open local.foo.com in your browser and it should work.
Edit your app at www.facebook.com/developers/ and set the "Site URL" to "http://localhost/myapppath".
When done - change it back.
Facebook has added test versions feature.
First, add a test version of your application: Create Test App
Then, change the Site URL to "http://localhost" under Website, and press Save Changes
That's all, but be careful: App ID and App Secret keys are different for the application and its test versions!
I suggest creating a test app (for dev environment only) on https://developers.facebook.com/apps and set: Website with Facebook Login property to your localhost:[port] settings.
this option will work fine with no need to change hosts.
remember to change the appId back to your production app once you go live.
Edit - in the latest fb version you'll find it under the settings tab.
You don't have to do anything difficult!
Facebook → Settings → Basic: write "localhost" in the "App
Domains" field then click on "+Add Platform" choose "Web Site".
After that, in the "Site Url" field write your localhost url (e.g.: http://localhost:1337/something).
This will allow you to test your facebook plugins locally.
Facebook seemingly randomly disables the ability to set localhost as a domain on your facebook app. I found the easiest work around was to tunnel my localhost to the web. This can be done for free using http://progrium.com/localtunnel/ or with a custom url (easier since you don't have to change url everytime in facebook) https://showoff.io
I couldn't use the other solutions... What worked for me was installing LocalTunnel.net (https://github.com/danielrmz/localtunnel-net-client), and then using the resulting url on Facebook.
Looks like FB just changed the app dev page again and added a feature called "Server IP Whitelist".
Go to your app and Select Settings -> Advanced Tab
Get your public IP (google will tell you if you google "Whats My IP")
Add your public IP to the Server IP Whitelist and click Save Changes at the bottom
go to canvas page..
view it in browser.. copy the address bar text.
now go to your facebook app
go to edit settings
in website, in site url paste that address
in facebook integration , again paste the that address in canvas url
and also the same code wherever you require canvas url or redirect url..
hope it will help..
LAST TESTED 2021/06/07
Just a few notes to complement the excellent answer of #Erdal_G with my successful experience:
Apparently, HTTPS is needed even in the local environment (I used the library https-localhost).
[I don't know if this is mandatory] create a test app from the main app (https://developers.facebook.com/docs/development/build-and-test/test-apps/)
Set the redirect OAuth URI to https://localhost:<MY_PORT>/auth/ and update also all other URIs in .../instagram-basic-display/basic-display/ settings accordingly.
Finally, don't forget to use the client-id (aka app-id) and app-secret of the test app in the requests, which are different than the parent app
Create 2 apps and
In /initializers/env_variables.rb
if Rails.env == 'development'
ENV['FB_APP_ID'] = "HERE"
ENV["FB_SECRET"] = "HERE"
else
ENV['FB_APP_ID'] = "HERE"
ENV["FB_SECRET"] = "HERE"
end