I already Googled that, but I didn't found any answer that satisfy me, maybe because it's impossible.
I want to know if I can authenticate a website directly from JavaScript to a Symfony API rest. My goal is to create a script in JavaScript, which make ajax requests to the API (the API accepts cross origin requests) and get some data in the response, but the website(s) needs to authenticate with the API to get this data.
I can certainly use JSON web tokens or OAuth to make the website authenticate as a user, but in this case I need to have some script on the server side of the website and call it from ajax to get the website authenticate and return the token in the response. I don't want to store anything on the website, only put my script tag in the html, to facilitate the installation of the service(it's a widget) for webmasters.
I also know that I can do that with referrer authentication, but I will avoid that, everyone can change referrer in the request headers. I can also put an apikey in the link of the script <script src="mydomain.com/myjs.js?apikey=MY_API_KEY"> but everyone can access the apikey and use it from everywhere.
Is there a way to do that safely?
After some research I think the only solution is what I already done, apikey-referrer authentication:
How to keep API keys secret when using client side Javascript?
How does Google Maps secure their API Key? How to make something similar?
Related
I am creating an app and I need to invite Twitter users to my app through API. my question is
in Twitter is it possible to get follower list using front end (React) or do I need to use back-end like nodejs?
The following paragraph is no longer valid for Twitter API, please check the #Akshay Vijay Jain's answer.
Yes, you need a backend because when you use API KEY & API SECRET strings of your app in frontend like React, etc. they are will be usable from everyone. I can steal your API Credentials and use your API for my app this is will exploit your API quota, if you use a premium or enterprise API, I can exploit your money.
Jun 2020 Update.
It's NOT possible to connect to twitter API from front-end, by any means, because of same-origin policy of browser, I have done extensive research and experimentation
Twitter's response doesn't include Access-control-allow-origin header and so browser will discard the response in between actually browser makes a pre-flight request before actual request and response of the pre-flight request dictates browser to not make actual request to Twitter api.
Only solution is to create cors-enabled rest apis on your own node server and in handler of that rest API, call twitter api either using twitter-lite or twit and return the result back to the front-end as response of cors-enabled rest API
As mentioned in another answer, you can, but it’s not recommended. With API quota you better have twitter API responses cached to make your quota last through larger number of requests.
I'm trying to connect to the Expedia Api. With this they have an api key and id.
I was using jsonp with this but there is a bug in there causing problems. The other thing is my api key is exposed in the javascript.
So now I have to find another way. I am now requesting json but of course I can't get cross domain with it so I have found a php proxy. My app is now reliant on php (this is ok though). When I access the php proxy I now get authentication errors. I have tried a different endpoint on a different site and the script works.
So therefore I cannot access this API.
There seems to be very little information, tutorials and scripts out there on how to make an api cross site, php proxies or authentication. I thought with the amount of sites now reliant on this type of technology there might be something.
How can I make a php proxy and return this data back to angular?
How can I safely hide my api key?
Have all of your API keys etc in a PHP file on your server. In that PHP file you need to curl to the API. Then have your PHP script return a json_encode() of whatever their API returns. That way no one sees your API deets.
I've worked a bit with Twitter web API, I know it works with OAuth, I've consumed the API using a python library. I've also tried a bit of Instagram API using a Java Script small library.
I know those perform web REST requests in the background, authenticating first and then querying requests as I code.
However, what if I want to perform the requets using jQuery $.ajax from a web application?
I've read some docs and sites and it seems it's just possible. Like only ajaxing to the API routes, starting with the authentication route.
But, how does this process work? I mean, I query by AJAX to the auth route and then how do I keep track of that authentication. How to keep that communication? Will the redirect URL play its role then?
Reading this site for Instagram API I start getting a clue about it, but got the doubts mentioned above.
I want to perform all AJAX requests in the Java Script server background (I'm using node.js), assuming I will provide my apps OAuth in the $.ajax. Is that OK or I can actually code it on client site keeping my OAuth tokens save?
And, if it's concern of this same question, when it comes to bytes (pictures, sound, etc) how to catch the response from API.
Okay, if I understand what you are trying to do is to make an Ajax call from a web page to the Twitter API and post/retrieve tweets and other info from Twitter.
Since the release of the API v1.1, Twitter has deprecated the v1.0 API and one of the major changes in 1.1 was Authentication Required on all Endpoints
And to do this from JavaScript and jQuery is quite possible (albeit very cumbersome, difficult and requires the use of many 3rd party JS libraries to HMAC Hash your data and keys and calculate content lengths on the client side before making your Request. Twitter API does not support CORS but does support JSONP for these kind of Ajax requests. But this is not recommended - since doing this on the client side will require you to have your Twitter App Access Keys - Private keys - embedded in your script files - which is basically a big NO-NO. And hence a server side solutions to generate your oAuth tokens is recommended. But once you have achieved that, it may be easier to get the token on your script and make Ajax calls using that from the browser. But I haven't gone that far in my research.
Also, this is based off of my research in Mid 2013 when my Twitter Ajax widgets stopped working because of this change and I gave up trying to fix it using that route after I realized it would compromise my security keys. Things may have changed since then.
If you are still interested to find a solution, this walkthrough would be a good place to start learning about Twitter's oAuth and how the Access Tokens are generated: https://dev.twitter.com/docs/auth/oauth
I have developed an API for my new service and am in process of developing SDKs (php, ruby and JavaScript) for this API.
Some of the calls to API are open to public, but some require API key and API secret. My question is, how do I make sure that people can hide their key and secret from world while using JavaScript API.
I would Imagine the call something like:
jQuery.ajax({
url:'http://api.domain.com/v1/display/',
data: {offset:0, limit:0, apiKey:'apikeynotlikelogin',apiSecret:'apisecretlikepassword'},
success: function(data){
alert(data);
}
});
But almost everyone these days know that if they open firebug or even simplier ctrl+shift+j in chrome, they can see the code together with all information above. I have considered many options, but it seems to me like there is just no way how to hide apiKey and apiSecret on front-end.
Any suggestions? There must be a way Im sure.
Thanks!
EDIT:
Thanks everyone for answers and trying to solve the issue. Here are some of the answers and why is still not what I need:
Using domain name in the request to make sure its from the correct client.
This is valid suggestion, but still could be quite easily faked
Generating unique key for each call
This seems to be more advanced, but again I found it not usable for my case. I need to authorize the "App" (thats what people register in system in order to get credentials and authorize to API) because users will have different levels of privacy set and according to those clients will be served with result.
So If I cam make client to first call "handshake" to get the session unique key, but then again (either in handshake or next request), client has to send his apiKey and apiSecret in order to authorize to API and get the correct result (according to policies etc.) So at the end, it is exactly the same as without the handshake request, anyone who knows the apiKey and apiSecret could first call handshake and then the authorization.
Hope it makes sense
You can make it harder, but you can't really secure it.
You can have them register the pages from which they are going to make the requests, and check that the request originates from an authorized origin when checking authentication. Not perfect, as this can be faked, but harder for a casual user.
Or they can proxy through a server, but this does not help much since they need to secure access to their proxy.
I'm writing a google gadget (nothing but plain html + javascript) to upload a file onto a private google site using the sites api. http://code.google.com/apis/sites/docs/1.0/developers_guide_protocol.html#UploadingFiles
I can only upload the file using a multi-part form. But it doesn't work because the api needs oauth authentication. Authetication involves setting some header fields in the POST request. Unfortunately form submit does not let us set the header, thus no authentication. I can't make an ajax call because of cross-domain restrictions. Any ideas on what can be done?
One way I can think of is to use a proxy which makes the authenticated call, but I want to avoid that. I need a javascript-only way of doing it.
post to a server side script and initiate a curl request with all the headers you want?
I'm looking at the same problem. I now found Google APIs Client Library for JavaScript. I don't know if it supports Google Sites, but I plan to try.