I have a doubt about the architecture of a web app when it comes down to differentiating between regular website requests and API requests.
For the purpose of explaining, suppose I am the creator of a service (let's take darksky.net for example). I offer both a website and APIs.
On one side I have my API endpoints, for instance
GET https://api.darksky.net/forecast/[key]/[latitude],[longitude] that allow a developer to extract weather forecast for a specific
[latititude/longitude] pair. I want people to pay to use those APIs. In order to do so, they have to sign up to the website and pay a subscription in order to to be granted a token (
[key]) that allows them to authenticate to the APIs and so perform requests (how we use the token to authenticate the requests does not matter).
On the other side I also have a website that I want people to have access to to look up weather forecasts. There is a search form where you can type in a location and the website shows you the forecast for that location. If I want to know the forecats for San Francisco, I type San Francisco and search.
[latitude, longitude] pair and the request is done by the coordinates instead of the location name.
Now, here comes my doubt. I would expect the website to use the APIs, since the API does exactly what the website wants, which is to return weather forecast information of a specific location. The website JS code would then interpret the API response and use it to graphically display information on the website.
But this would not be a nice solution. Doing this would mean that we would have to have a token stored somewhere on the client side code to authenticate requests. This would allow anyone that is able to do
F12 on a webpage and go through the code to access it and basically get a free API token to use, instead of paying a subscription to the API service.
So, how do you differentiate the two situations?
Please let me know if my question was not clear.
Thank you very much!