Final Result
So now, we have achieved sending a request to the server and received a parsed JSON object with our access code. For the type of requests we are going to do, this is all the authenticating we need. Now, to get the information, we must essentially update our code to make a new request. We will need to change some of the variables and completely remove some as well. We will no longer need to have the client ID, client secret, grant type, and tokenUrl. We will now be using a variable to store our access token (copied from the last step), and we will rename our URL variable to seriesURL to reflect the data we are requesting. We are going to be making a GET request to search the database for manga with a certain keyword. So, in our case let’s try out the search feature! Our request will be pointing to "https://anilist.co/api/manga/search/fate " (If you are confused on how we got this route, read the documentation). If our request was successful then we should be getting back JSON objects about the selected keyword, which is "fate" in our case.
Hit edit on JSFiddle and update the authCode variable with the code you received earlier!
Since we are sending a GET request, the body of our URL can be empty, hence the null value on line 9. We will also use different request headers for this call. Now this is something that isn't explained very well in the documentation and can leave you stuck wondering why you are getting an error code 401(like I did). For this request, we will use an Authorization: type Bearer. You may remember this as one of the values sent back to us in our request for an access token. If you look at line 8 you will see how that is represented in code form. Notice the space behind the second parameter 'Bearer ', this must be there for the server to recognize it!
Now that we've noted the differences from the previous code, let’s see this in action: replace the authCode string with the access code you received in the last step and change the search parameter to anything you’d like! If you hit run, you should see the returned objects in the developer console! They will have a variety of properties which are explained in the documentation. Try this with a few different search words and see what kinds of series you find.
Now that's cool, right? If we were implementing this on an application, we could have it access this data and display it to our users without them ever needing to leave our app!
Let's try another call that only needs client credentials! Let’s go ahead and retrieve the user reviews for one of my favorite manga called Attack on Titan. The route for this one tells us it needs a manga id and the one for the series we chose is “53390”. This route displays an array of review models, so this will need a slight tweaking of our code. Precisely a for loop to loop through the array of reviews and print the text from each to the console. Edit the code below and search for some reviews on some series you enjoy!
There is only one review for Attack on Titan but if there were more they would be displayed one by one!
We’ve reached the end of the tutorial and hopefully by now you should have a good understand of AJAX requests, JSON, Oauth2.0, and how to make a request using JS! Now remember you normally won’t be making requests this way as it can expose your information, but this demonstrates some of what may be abstracted from you when you make requests server side, using a framework like Node.JS. I hope you enjoyed this tutorial and can now make requests to API which utilize Oauth2.0 and client credential grant types!