Connecting to an external API with Angular - javascript

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.

Related

JavaScript app to Symfony API rest authentication

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?

Prevent calling django-rest-framework APIs programmatically

I'm using django-rest-framework, which accepts API requests from frontend javascript. My frontend javascript and backend django APIs are hosted on the same apache server and are within the same domain.
Is there a way by which I can ensure that my APIs are accessible only via the frontend javascript and not via curl commands or any other programming methods ?
I'm not sure about that, the nature of an API is making it accessible to those who have the key and correct way to request information but there are other tools to achieve the same effect if you're only wanting your db accessible from your site. Take a look at django ajax https://github.com/yceruto/django-ajax it works by throwing a decorator on a view which returns a json response. I've found it to be a very helpful tool.

How to do OAuth authentication via AJAX / jQuery?

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

single origin policy getting in my way when using XMLHttpRequest

Here's my situation -- I have an account on a site that allows API access. So, theoretically, I could write a program to query the site via its API. I would like to build a local html page using javascript, that shows some results returned from an API call to this site.
My first impulse was to use XMLHttpRequest, which won't return anything from the site -- a known problem due to the single origin policy.
I have no control over what the API returns -- it's XML or nothing.
I would very much like to keep my solution simple -- just HTML and javascript, no php, asp, c# or any of the rest of the alphabet soup of potential technologies out there. I'm also not running my own web server.
Is this even possible? Is there some simple solution I've overlooked?
(I should note here that I'm not trying to hack a website -- i've already got a legitimate account there, and they give me access to the data on the site via their API. I'm just trying to show their data in a more interesting way on my local machine.)
If the Web Service API you are trying to hit does not except a JSONP request or does not implement Cors headers then the only option is to create a Web Service of your own that is either on the same origin of your website or implements JSONP or Cors headers which will be used to hit the the Web Service with the desired data you are looking for. This is a very common problem when interacting with web services these days.
If API doesn't provide jsonp, or is not CORS enabled, there is one other javascript option and that's Yahoo's YQL service. It uses server proxy to get data in multiple formats including scraping html using Xpath selectors, grabbing xml or json or csv and returning data in either xml, json or jsonp format.
This means with javascript you get get data from virtually any API
YQL console link

google gadget and sites api

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.

Categories

Resources