How to use the javascript SDK from a desktop application - javascript

I'm writing a desktop application to interact with facebook by using an embedded browser which is running HTML \ javascript from local files.
I was able to use the login dialog to retrieve a token (using the method described in the facebook documentation for desktop applications), but i'm still failing call basic SDK functions, such as FB.init() and FB.getLoginStatus().
When executing FB.init():
FB.init({
appId: '120260327220',
status: true, // check login status
oauth: true // enable OAuth 2.0
});
I get the HTTP response (through HTTP sniffer):
<span>Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.</span>
And when executing FB.getLoginStatus():
FB.getLoginStatus(function (response) {
if (response.authResponse) {
alert("logged in and connected user, someone you know");
} else {
alert("no user session available, someone you dont know");
}
});
i get nothing!
The application is completely client based, meaning i have no server side, thus there's no URL to register the facebook application with. Running on IE.
Does anyone know if and how i can use the facebook javascript SDK from a local javascript file (for desktop application)?
EDIT: configuring the application URL to be http://localhost is not a valid option, since eventually this script should be able to run on any machine, whether localhost is configured or not.
Thanks.

Related:
The JS SDK is designed to be used on websites (per definition served and accessible over http or https) and we do not plan to support the use of file: or any other protocols.
This is consistent with plugins in general, where http/https URIs are usable as identifiers (open graph amongst others), but where file:// URIs are not.
You can try initializing the SDK inside a web accessible document including using an iframe - note then that you will have to add logic to ensure correct resizing.
As an answer to a Facebook bug report.

As you mentioned that you have an embedded browser within your Desktop app so in this case what you can do is host the app's page that has facebook related functionality over the web and pull this same page's url inside your embedded browser. This way you will be able to provide a valid domain in app's settings and not localhost. Also you can make valid calls to facebook APIs from your page and your Desktop app can then make use of all these facebook related data as they are being pulled onto your embedded browser.
In a nutshell your Desktop app will be much like the Facebook's canvas where the app's page is pulled and displayed inside the canvas. However in your case you will be having a complete control of how, when, where and which parts of the page gets displayed and moreover a properly glued and well structured UI will make the external page and Desktop app blend together and users will never come to know the difference.

Since I got no acceptable answer here are my realizations and what I eneded up doing::
There's no way to use the Facebook SDK on local page due to cross domain ajax issues.
The way to work around it is using JSONP ajax calls to Facebook's graph API (JSONP is allowed for cross domain).
The login process is done by navigation (in a new window) to the login page, with specific URL parameters to set the page's attributes.

If you are using PhoneGap 1.0 and Xcode 4, start by following these instructions: http://www.pushittolive.com/post/1239874936/facebook-login-on-iphone-phonegap
My installation looks like: http://cl.ly/AHQ1
Be sure to move the ChildBrowser.js file out of the plugins folder and into the root of your www folder. Also be sure to link to that ChildBrowser.js in your index.html file.
Then follow these 3 steps, http://collingo.com/2011/08/18/installing-childbrowser-ios-phonegap-plugin-in-xcode-4/
Lastly, update your PhoneGap.plist file as mentioned in this post: http://wiki.phonegap.com/w/page/43708792/How%20to%20Install%20a%20PhoneGap%20Plugin%20for%20iOS, mine looks like: http://cl.ly/AHAH

What is the Application URL that you have set on the application's Developer page? I'm just guessing based on the FB.init() error message that you need the to set the URL to be "http://localhost/start page name". When debugging our application we run it locally and have the URL of the application set this way.

Related

Etherpad disconnects when collaborate with multiple users

Inside a Vue component, I run multiple instances of Etherpad editor which are embedded in iframes. Below is an example of that component-
Etherpad.vue (A page component)
<div>
<iframe src="https://mydomain.in/p/1505-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
<iframe src="https://mydomain.in/p/1506-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
<iframe src="https://mydomain.in/p/1507-g4Q?token=uuid&userName=jo&userColor=%23ffc7c7&rtl=false&lang=en"></iframe>
</div>
Now, I prepare a URL for this page suppose its, https://mydomain.in/etherpad/collaborate and share it with others to collaborate on this page. Each user who has access to this URL can type inside these three editors.
The issue
If only a single user is collaborating on this page, things are fine. As soon as other users started working on it, each user is having the following popup of disconnection-
And once a user clicks force reconnects, it appears on the other user's side which is resultant to allow only one user to type at a time.
Environment
vue: 2.6.11
node : 13.14.0"
Etherpad version: 1.8.16,
Web server: Nginx
Browser: Chrome
Authentication: Custom JWT verification (can see in iframe URLs)
Etherpad database type: postgress (database is hosted on a separate machine)
Etherpad client and Vue are being served on the same domain to avoid the cross-domain
cookies, and cross-domain embedding issues.
I am serving Etherpad behind Nginx reverse proxy. On the root
path ('/') I serve the Vue application and on /p/ path requests,
I pass them to the Etherpad node server.
Things I tried to debug
Tested locally, one user in Firefox and another in Chrome, working fine.
Tested with two users with different IP addresses, giving a disconnection popup.
Some answers say to look into the settings to alter the connection limit but didn't mention which settings.
For some users, this issue occurs when pasting a long text but for me, it's happening even when typing a single sentence.
Any help to suggest where to debug or which settings to change even in code or at server configuration would be great.

404 error when accessing website with parameters (vuejs)

I am working on a website using VueJS and just figured out how to do url parameters, which works well on my local machine. I can navigate to a page, and copy the full link including parameters in my browser and the page loads the same way.
Example: I type localhost:8080 to load the index site, navigate to localhost:8080/param1/param2 to go to another site, everything works fine. I can even type in localhost:8080/param1/param2 DIRECTLY (without going to index page first) and it works too.
However, after a build and upload to my web hosting provider, I can not type in the url with parameters DIRECTLY, it only works when navigating from index page.
I can the following error:
404 Error
I have almost no experience with routing and web hosting and even after extensive research could not find a solution online. Any help would be greatly appreciated.
Additional information based on comments I've received:
Web host:
I have a login to Plesk where I can manage my settings. There I have "Apache & nginx" settings which look like this:
Apache Settings
nginx Settings
This is due to the fact that SPA's do not have different HTML pages for different URL's like conventional pages. So, you have to either redirect all the requests to the index.html page in the server settings or set the history property to this history: createWebHashHistory().
Let me know if this works.
P.S: Sorry I don't know how to configure the settings for this in Apache or Nginx

how to communicate with desktop application from web page loaded over https

I'm trying to make desktop application that receives messages from a page running in the browser. The desktop application can be written in any way, i just need to be able to talk to it from the browser. The web site is written in angular. I don't care about the response from the desktop application or need to communicate back to the browser in any way. Serving the website over https is causing issues though (but a requirement), and I was wondering what a good way around those would be.
The ideal solution was to make the app a web server and just have the website post to localhost:PORT and the server would get the request and do what it needed to do. however, since the website is served over https, it blocks the http request to localhost due to mixed content rules.
i tried submitting a form on the page and having the target be a hidden iframe, but that also gets blocked due to it not being https.
I tried changing the target to be _blank, and that "worked" but it opens a new tab with the response in it, which would be really annoying while you're using the website (it's supposed to be in the background). I set up the response to have a window.close in it, but the window still flickers for a second each time and it's something i would like to avoid.
I tried making a self signed certificate for the desktop application's server but the browser blocks that until you accept it for the first time, and I don't want people to have to go to "https://localhost:1234" in their browser and accept the insecure. I'm imagining getting a valid certificate for a localserver isn't possible too.
Is there any to accomplish this? Thanks
You can redirect the browser to http://localhost:PORT (e.g. using status code 302 or window.location in JS) and pass data to desktop app in query string. That should execute in browser without warning. Then you can return some html back from desktop app to browser. If your data for desktop app are too big to encode in query string, you can pass just url in query string where desktop app can download the data.

Requested file in Javascript downloading to the user's computer rather than being read

I am trying to perform a hack, what my primary goal is to get the mp4 links of youtube videos. In past, I have been downloading the text file from http://www.youtube.com/get_video_info?video_id=videoidand extracting the links from there, this works in the apps but in browser its not possible because its a cross site request and browsers do not allow it.
To counter this I used easyXDM, now the problem is the file is being downloaded on the user's machine instead of opening in Javascript. Here's the easyXDM code
$(document).ready(function(){ var socket = new easyXDM.Socket({
remote: "http://www.youtube.com/get_video_info?video_id=PBOBJRto728", // the path to the provider
onMessage: getVideo
});
});
Here's the page http://www.voltsoft.com/default.html, you can go there and see what's happening.
How can I read the data from the file in javascript?
easyXDM is not going to faciliate your needs. In order for easyXDM to function you need it hosted on the two domains you want to communicate between. In this case you need it on both voltsoft.com and youtube.com. You can't use easyXDM here because you can't upload arbitrary HTML/JS content to youtube.com.
Generally the solution in this situation is that you either need to proxy the remote contents server-side or you need the cooperation of the remote server.

Change server HTML app into self-contained desktop app

I wrote a simple web server that takes the public link to a google document containing image urls and names and outputs a print-friendly HTML photo directory with its contents.
I created it for a volunteer organization that I will no longer be able to stay involved in. I need to pass on the ability to generate that directory to my successor.
I'm not confident that I can trust myself to maintain that web application for the long term the organization needs. I'm hoping that instead I can change it to a self contained program, that members of the org could email around to whoever needed to generate the directory.
My first thought was to make a .html file the could open in a browser but I can't download the CSV data from google with Ajax, because it is cross domain. After googling there doesn't seem to be a way around this.
Is there a straightforward framework? I would guess I could do it with Adobe AIR, but I'd prefer something that simply removed the cross domain security feature.
I could take the time to embed a UIWebView into a Mac app, but since I want to write the app primarily in HTML, I'd have to create a bridge to let the web view make a cross domain request anyway right? Also it's not cross platform.
Any other ideas? How can I package my app as a desktop application instead of a web service?
You can get around the cross domain XHR using flash. CrossXhr can do it from apps served by regular http servers. I've never tried it with a static, file-served webapp. Follow the instructions here:
http://code.google.com/p/crossxhr/wiki/CrossXhr

Categories

Resources