Using Only Javascript To Shrink URLs Using The Bit.ly API

Question

I'm playing a bit with Javascript these days... I was shrinking some URLs using bit.ly to tweet them, then I started to think on a automated process that could use their API to shrink the URLs I wanted, then I looked up on their documentation, and I saw that they only support PHP(with some Javascript), but there is anyway that I could make this using only Javascript?

Cecilacecile

Answer 1

Here is an example how to get a shortened URL with Bitly API and jQuery, no server side code required.

function get_short_url(long_url, login, api_key, func)
{
    $.getJSON(
        "http://api.bitly.com/v3/shorten?callback=?", 
        { 
            "format": "json",
            "apiKey": api_key,
            "login": login,
            "longUrl": long_url
        },
        function(response)
        {
            func(response.data.url);
        }
    );
}

The following code could be used to get a short URL:

/*
Sign up for Bitly account at
 https://bitly.com/a/sign_up

and upon completion visit
https://bitly.com/a/your_api_key/ 
to get "login" and "api_key" values
*/
var login = "LOGIN_HERE";
var api_key = "API_KEY_HERE";
var long_url = "http://www.kozlenko.info";

get_short_url(long_url, login, api_key, function(short_url) {
    console.log(short_url);
});

Hebron

Correct me if I'm wrong, but this will mean anyone has access to your personal, private API key -- i.e. I could then hijack your account and fill it with BS shortened URLs if I viewed the source of your page. – Afterdamp

API key and secret key is not the same thing. You just can't hide any API key for client side JavaScript API, since source code is available. But API provider can check that referrer URL matches URL supplied during regitration process. – Hebron

Answer 2

Depending on where the JavaScript is executing, you could always use the bit.ly REST API:

http://code.google.com/p/bitly-api/wiki/ApiDocumentation

via XmlHttpRequest, for example:

http://api.bit.ly/v3/shorten?login=bitlyapidemo&apiKey=R_0da49e0a9118ff35f52f629d2d71bf07&longUrl=http%3A%2F%2Fbetaworks.com%2F&format=json

Ingrown

But how I can put the shortened URL into a variable to use it freely? – Cecilacecile

Several ways to do this easily -- one is to simply use the JQuery support for JSON remote request parsing and pull out the answer from the larger result into a var. See api.jquery.com/jQuery.getJSON for an example. – Ingrown

Answer 3

From the developer best practises page on bitly:

To ensure the security of your API key and/or OAuth access token, we strongly suggest that you make requests to the bitly API server-side whenever possible.

Any requests to the bitly API made via client-side Javascript present the risk of your OAuth token or API key being compromised, but there are steps you can take to partially mitigate this risk. Most importantly, never include your api_key or access_token inline in the page. Keep any references to your api_key or access_token in code that is contained in external javascript files which are included in the page. For additional security, don't have the key or token itself contained anywhere in your javascript code, but rather make an ajax call to load it, and keep it in a variable stored in a privately scoped method. For an example of this implementation, please see our sample html and included javascript files.

Absurd