As a beginner in developing web APIs and other web technologies I'm wondering what could be the best approach for securing a tool in a customer's frontend.

Let's say I'm offering a tool that can be used in other website's frontend and would want to secure the usage of it. So a customer has to register, login at my server and generate an API key and secret. Then the customer implements the tool in their website. How can I (or better the tool) verify that the customer has a valid API key and count the usage of the tool. If the key is invalid or blocked by my server, the tool will not work. The internal function of proving and blocking of the tool is not a question here. The question is just the verification/authentication/identification.

Packing the API key and secret directly in the frontend code of the tool isn't an option I guess. Everybody could read it out. So, what is the best pattern for reaching that goal of authenticate the usage with customers credentials? Are there any good resources or documentation for that specific issue? Most of what I read was about OAuth (with user credentials involved) and client apps for desktop or mobile (where it is easier to hide the customer credentials).

Edit 1:

In case of Google Maps, which uses just an API key, they recommend different methods for securing the key and API access like URL limitation and periodically regeneration. Also they say the key should provided by environment variables or files outside the source code.

The focus for securing a Google Maps API key seems to lay on restricting the URL. But is that really best practice? Is it not possible to "simulate" the URL for locally executed javascript code and sending tons of requests to raise up the usage count for the key owner?

Google Maps: Best practices for securely using API keys


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.