CORS, AJAX and how I solved Cross Domain

The first time I added covers for books, I did it with AJAX directly trough Google Books. But this is illegal and shows a “Cross domain” error. The quick solution was to disable my browser security. This workaround was good for testing and development, but not in real world. In this way, every client of my app should also disable his security to view Books in 3D. It was unacceptable.

 5778074401_42477e853c_o

@ Flickr, Scott Wendling

1. My first idea was to use CORS(Cross origin resource sharing), to send from my server an header with

Access-Control-Allow-Origin: *

CORS_What_Means

Clearly that didn’t helped me.

2. My second try was to render from server all the images like this:

<html>

….code..

            <div id=”images”>

                         <img src=”..from google books servers…”> 

                        <img src=”…..”

                       …..more images…

           </div>

…code..

</html>

Again this might seem to work if you just want show images, but you are not allowed to draw them on the canvas.

3. Third idea was to continue to do AJAX requests, but to my server and my server to do a request to Google books; then to serve the actual client with the image.

SERVER_Request

 

This way actually works for a few times, but after a while Google blocks my IP for too many requests.

4. The final idea is to save images on my server. If a client does a request for an image that I don’t have I do a request to Google, but if I already have the image, the server just delivers it.

This one actually have the disadvantage that my server is going too need a lot of memory to store those images. But for now it seems to be my best choice.

Application guide

Books in 3D is a easy to use web app. It allows you to visualize as a 3D library, your books from goodreads social network.

First you just need to log in with your goodreads account and allow the app to access your shelves.

captura1 When you are logged in, you see two main actions: view library and update books.

The update books action is going to connect to goodreads database and will try to retrieve your read books. This is action is a must, if you are the first time on the site, because your account in this app will start with zero books. So you should update your list of books as soon as possible. 😉

captura3

After you decided that you can view your library, you can just choose “View Library” and enjoy your books in 3D.

nice2

You can walk around. The controls for the camera are as you would expect: W,A,S,D – forward,left, back, right movement and mouse controls.

captura4

Your library can be shared with a simple link or on most important social networks: facebook, twitter and google+.

shareLibrary

Goodreads has a ‘badreads’ documentation API

Badreads

 @Flickr Alexandre Normand

Goodreads documentation page was written in a hurry… it lacks of examples and of easy to use methods.

After I failed so many times trying to get a token for the user(due to the fact that their API doesn’t respect the standard OAuth), Goodreads prepared me another surprise, it didn’t allow me to get the user identity. Without the user id or name, I couldn’t retrieve any books.

Somehow I managed to find my user id from Goodreads an hard coded in the url request to retrieve books only for my account. Another surprise, it didn’t retrieve all the books and it didn’t retrieve good images for the books. Most of the thumbnail were “no cover” standard image.

After a long day of work, I came up with this idea: to retrieve as many books as I can from Goodreads  and take their ISBNs (books id). After that to use Google Books API to search for thumbnails.

Connecting to Goodreads.com

My biggest issue right now is that I can’t retrieve books from Goodreads.

First I need to understand the OAuth protocol to let a user to authenticate on Goodreads and allow my app to retrieve his books. What it stops me from actually implementing this idea is the lack of a good library which could abstract all these task in a simple to use interface.

My only source of information right now is the official API documentation, but… it is not very user friendly. 😦

Goodreads logo

https://www.goodreads.com/api