Facebook API: How to authenticate a web app - javascript

I am attempting to write a plugin for a webapp that integrates it with facebook using the Javascript API. The application is installed by our customers on their own servers each with their own site names. This poses a problem to me as Facebook wants me to specify a site url for the application. This url is going to be different for every customer. Creating a new application for each customer is not an option.
In my research of this problem it seems that I have to pretend to be a desktop app and follow that authentication path. I cannot figure out how to do this.
Anyone have any idea how this can be done?

Are you going to host the app as a canvas app or outside facebook?
Is the url important to you? There is a strict one-to-one relation between base-url and application.
What many apps do is host the apps as directories in their domain. For example http://crazy-fb-app.com/customername
That's your options basically if you want to use Javascript SDK.
If you're going to be using server side technology you could have the user authorize the application while requesting permission to access user's data while he's offline. in that case you will receive a non-expiring (or long-expiring) authentication token which you can use from the server to make Graph API calls on behalf of the user. For some stuff you can obtain an Application Auth token (which is shorter and non-user-specific) to make calls to the graph.
Rotem

Related

Calling a secured REST api from Javascript without user login screen

How would you call the secured REST api from the Javascript script application that doesn't have the login?
I have a Javascript application (React) that doesn't have a user login. It needs to call some REST api services that uses Oauth (Azure Ad -
WindowsAzureActiveDirectoryBearerAuthentication).
Those REST services have CORS enabled.
I also registered my web application in Azure Ad.
The issue is that the javascript application needs to call https://login.microsoftonline.com/{{tenantId}}/oauth2/token to get the access token. I found no way to enable the CORS for that URL. My JS application doens't have any login so I can't show the login screen in popup or use adal js.
The solution that I come up with is that I put my Javascript application in NodeJS (Express). The JS call the NodeJS that calls the login.microsoftonline.com to get the token and pass it when calling other secured REST services.
It works great but I think there might be some security issues around that.
Is there any better way to design this kind of application?
What you are doing is the proper approach. It keeps all the Oauth tokens secure on your server without having to expose them client side.
That is the main reason most Oauth2 API's don't implement CORS

HTTPS on localhost for OAuth for a desktop application

I am creating a desktop application that using Spotify's oauth api. I am using the implicit grant flow described here: https://developer.spotify.com/web-api/authorization-guide/#implicit_grant_flow
My idea is to have an "Authenticate" button, that you click and it opens your browser. You login/approve the connection with Spotify. Then it sends you to a redirect url.
I want to set this redirect url to 127.0.0.1:58212 or some port on the loopback device.
My question is, should I use https for this?
I am leaning towards yes. One because the access token needs to be secure, and I believe other users on the system could potentially read the message when it is sent, and two because in the time it took the user to log in, someone could have taken over the port.
So I want SSL for encryption of the message, and I want to ensure I am actually talking to my app.
How do I generate certificates in this situation? I think each instance of the application needs to have its own certificate, and I need to somehow inform the computer to trust that certificate during the lifetime of the application.
I could also generate the certificate during installation, and do some step during installation that makes the system trust that certificate.
Am I thinking about this the correct way, or am I going about this all wrong?
I am using electron and express in JavaScript to write my application.
Thanks for any advice.
The best way to securely use Oauth with installed applications such as desktop applications is to use the Oauth 2 flow for installed applications. But this option would have to be implemented by the service provider. Google provides for this option.
https://developers.google.com/api-client-library/python/auth/installed-app
Unfortunately, many services do not implement OAuth2.
To use Oauth 1.0 with installed applications, instead of returning to a callback_url, the service provider displays the auth code to the user which the user can then copy and paste to the desktop application. Check out Trello Ouath integration which allows for this.
The Web Api flow that you are trying to achieve will not work in the case of desktop apps. The redirect uri 127.0.0.1:port is your local uri. The service provider will need, at the very least, your public ip to redirect the flow back to your system.
AFAIK, for a Desktop or a native app it is much better to implement the Oauth authorization code flow. The implicit grant is intended to be used on a device browser and not on a Web View.
If your app uses a Web Service to connect, your Web Service needs a redirect URL that uses https. Luckily most hosting platforms like Heroku provide this to you for free (otherwise you need to buy an SSL certificate which might be a lot of work).
On the authorization code flow, a token doesn't need to see the client, it is all stored in the backend.
Most services allow you to test on localhost with http.
I wrote a tutorial that could give you some guidance on the flow.

REST API: user-agent-based client (app) authorization

I have two separate web apps:
database API
and basic web-client (Flask) with some JS-code (Knockout.js) for interactive
features like filtering products 'on-the-fly', cart, etc.
To implement interactive answers through API I use JavaScript requests running in a user's browser. I want to control access to API and give it only to authorized web-apps, for example, my own client JS-code.
I read about HMAC and Oauth. The key point: the server and the client share the same secret which is used to generate a HMAC, for example.
But how should I generate a HMAC inside a user's browser using a secret and not exposing the secret to others? As I understand, if my JS-code has access to a secret, than anybody on the internet has that access, right?
JavaScript applications are what are called 'public clients' in OAuth 2.0. It basically means they cannot keep secrets and therefore you cannot do client (application) authorization.
So, if you are using a JavaScript application to talk to your API, you'll need to do user authentication and give users access to your API. Or switch to a server side application to access your API.

how widget is created only through script

I have come across few chat application and the website which I don't know how these things work. can someone tell me how these application works in the website.
I have seen some website with a chat widget for helping the customer for respective to their business. On signing in these application, a script file is send to email, when it is pasted over the website. Automatically a widget is created. And this widget and the application is connected externally.
Sorry, if my question is not clear. I will give some links of application and website which give you some idea what I'm trying to ask.
Website
http://www.a1000yoga.com/
http://www.voyzek.com/contact-us/
Application
https://www.zopim.com/
https://my.livechatinc.com/
What you mean is called providing Web API,
Wikipedia's definition of Web API is :
A server-side web API is a programmatic interface consisting of one or
more publicly exposed endpoints to a defined request-response message
system, typically expressed in JSON or XML, which is exposed via the
web—most commonly by means of an HTTP-based web server. Mashups are
web applications which combine the use of multiple server-side web
APIs.
In brief, They implement their service in their servers, and let you access their services by HTTP requests.
You sign up in their website and they generate a API token(a random string maybe), then when you want use their services, you send them your requests with your API token as authentication or identifying mean, and they process your request throw their application and with your data on their servers, and send you respond.
For example when you use this messaging services(or Captchas, Ads networks, etc), they provide a piece of Javascript containing your API code, then when someone views your web page, the code will send request with your API token to API provider servers and they process data for you.
You can then access to your data through their website, another API, email or etc.

OAuth request token for an installed application

I'm trying to use/understand Google request token mechanism. I intend to use it for an application I've start to develop to access Orkut data using OpenSocial API.
I read this document that explains the steps to obtain a token for an installed application. This document tells you to use the OAuthGetRequestToken method from Google OAuth API to acquire a request token . Accessing the manual of this function (available here). But the parameter oauth_consumer_key, which is required, asks for the "Domain identifying the third-party web application", but I don,t have a domain, it is an installed application.
So my question is, what should I put in this parameter in that case?
I'm using oauth_playground to run my tests.
Thx
From what i have read in the documentation, the following instruction on getting a request token implies that you simply pass 'anonymous' as the consumer key...
"1.The installed application contacts the Google Authorization service, asking for a request token for one or more Google service. The request is signed using the "anonymous" consumer key/secret." (OAuthForInstalledApps)
The trick is to create a hybrid auth process. You register a web app at a domain you own, authorize users for a web app via the OAuth for Web Apps process, then implement a mechanism by which their installed app can pick up that authorization from the web app.
My thinking on this would be that the installed app would send your site a request for a keypair. It would receive an initiate key and an authorize key, both of which you'd store in a database at the web site for one time use.
The app would then use whatever mechanism to launch an external browser, pointing it to
yourdomain.com/authorizestart.php?initiate=[initiate code]. The site stores the code in a session variable, then sends the user off to Google to authenticate. When authentication is successful and Google sends the user back with the next token, you store it in the database entry related to the initiate key.
The user closes the browser, clicks a "done" button in your app, and the app then sends a request to yourdomain.com/tokenretrieve.php?authorize=[authorize key]
Your site looks up the Google token and transmits it back, the app completes the Oauth process.
The issue with this is that you have to share the "consumer secret" you created in the registration process with the app. Someone could decompile it or try to capture its output and discover your secret key which is part of the method for encrypting responses from the Google servers. That said, how is that worse than using "anonymous" as your consumer secret?

Categories