If you use Java, the concept is EXACTLY the same, you will just need to find a similiar library to C#'s webClient, such as this: WebClient.DownloadString in Java?
The goal of this tutorial is to show you a basic setup on how and why you need to use another language like C# to secure your calls API calls.
This is also more of a "show you" tutorial, as sites like JSFiddle only support scripting languages and not entire object-based languages.
Scripting languages like Javascript allow you to debug its execution which is great for watching your variables and finding flaws within your code, but this also means that your users can debug your script/variables as well. If you happen to store your API key within Javascript (as do within the first tutorial) then anyone can easily see your API Key. After this brief tutorial you should have a better idea on how to secure your key.
First and foremost, do not freak out if you have used neither of these before. What I show you will be very simple, and if you are familiar with any sort of Object-based language like Java then it will be a breeze.
C#: C# is a commonly used program language that tends to run on Microsofts .NET Framework. I personally use this langauge a lot for my web applications and I would strongly recommend that you check it out as well since it is becoming a very powerful language. If you know Java, then C# is a breeze.
Visual Studios: Visual Studios is just an IDE for languages like C#. And an IDE is basically a fancy program for running and executing your code, it makes developing very easy as well.
Why scripting languages are insecure
If you recall from the past tutorial, the information you get from the RIOT API is called JSON. However while it is very simple to get this with Javascript it is not the safest way.
Let's jump back to my first example in tutorial 1 which I have embed into the site here.
DEV KEY
Summoner Name
Summoner Level:
Summoner ID:
Enter in your key and the Summoner Name "Teemo"
Open up your browser's developer console/inspector (in most browser hotkey F12 opens it). It should look something like Fig 1.
Navigate to the Sources tab, and try to find my function.
You can either use search functions (Ctrl+F) to look for keywords like our function name: function summonerLookUp()
Or you can just open the body tag as I put the script right there.
Once found, click on a line at the top of the function, some sort of marker should appear
Now click submit, and the javascript code should stop at your break point.
Step through the code (F10), until you hit $.ajax({
If you click step (F10) one more time now, it will shoot through the entire ajax loop as this is asynchronous, HOWEVER. Look to the right of your developer window.
You should see a section called variables or local, notice Figure 2.
As you can see, your API key is completely visible, and it is visible to anyone who uses your code.
So how do we fix this?
With languages like C# or PHP, you can call the RIOT API data and then pass only the JSON to the Javascript function(s). You may be wondering why this is secure and Javascript isn't? Well it is quite a simple concept. Javascript is client-side, meaning the user can see, read, execute and do whatever it wants since you give their browser the code to run it. However, C# or PHP is server-side, meaning the user can generally NOT see or touch the code. The user may ask for some data, but the server does the actual execution of it.
For an even simplier example imagine if you went to your bank. Let's say you want to get some money from the safe. Now the banker can either give YOU the key and let you do it yourself (client-side), or the banker can do it themself and never expose the key to you. Both ways will get you your money, but obviously letting the banker keep the key to themself is the safest, most secure route.
Using C# with AJAX
This section does assume you understand the basic concepts of C#.
All that I really have to show here is two pieces of code.
The C# portion which is server-side. (Does the actual call to the API and gives it to the Ajax)
The Ajax/Javscript portion which will get the data from the C# portion and do all the fun stuff.
Let's examine the Javascript portion first
(I named both the Javascript and C# function "rosterPull", FYI)
The basic concept is this, I have a function called rosterPull. I use this to get player data from a team. I specify:
url: This is the location and name of my METHOD in C#.
type: Technically should probably be a "GET", but I specified POST within my C#.
data: This is a parameter that I am passing to my C# function(would be similiar to saying return rosterPull(playerIdString))
dataType: I am obviously getting a json, so I specify json here.
success: As mentioned in tutorial 1, this is actually a function that will ONLY execute if the above works.
After this goes to the C# (and works) it will run the success statement, where I then parse the JSON (it is in an object from C#) so I have swap it back to the Javascript-version of JSON.
And finally, I just store each piece of member data into another seperate Javascript variable (teamRoster[i] = json[teamRoster[i]];)
As you can see, I pass nor specify the API Key anywhere within that code. I only ask for the JSON, and only deal with the JSON.
Let's examine the C# portion now
The basic concept here is I navigate to my method. My method is inside of a folder/controller called Competitive and is it's rosterPull method.
The important parts here are:
webClient: This is a C# utility I found that downloaded JSON for me.
json2: Here is where I am building the DownloadString (part of webClient's library methods), notice that THIS is the API url with my key.
return JSON: Finally, I specifically return a Json() object. It is this object that I pass back to my Javascript functions.
So it is quite simple. All my Javascript functions simply ask my secure methods to do the calls for them, and I can pass back parameter data as well for more specific calls as shown above.
You sure this is secure?
But if you are still wondering how this can be secure, well obviously anything can be broken into.
However if they wanted this API key they would have to
Break into my web host's servers.
Download my program's binary (as when I compile this, all my C# code is turned into crazy machine language).
They will then have to de-compile it and hope they know what they are doing.
And finally they could probably sort out where the key is.
But if someone does this, then either they really have no life or have a serious grudge against you haha.
As far as Riot is concerned they are fine with having the key compiled into a program as per my question Is storing my key in the Controller safe enough?
I hope you enjoyed this tutorial! I am by no means a security expert, but this will keep your key secure enough from the general populace! Please comment on the home thread for any additionals you want!
