Angular - Cannot see how to hide this API key

Question

I have the following code in the angular application declaration - the Facebook API key (for implementing the Share button):

.run(function($FB){ $FB.init('9xxxxxxxxxxxx94'); }) 

So, I know the general answer to this question: "API keys should be stored on the server side," however, I do not see how to actually implement this.

The call method for sharing is performed on the front end, so even if my server saved the API key and sent it, it will still be visible on the front end, otherwise how will the sharing button work?

So my question is, how do I hide this Facebook API key?

Thanks.

Answer 1

Key Request

The first thing that happens is that the client will request a key. This will only happen on certain pages, such as registering and entering pages. The idea here is that we want to make sure that only users browsing with a well-known client (in this case, the official site or the main client as their name) can take actions such as creating or authenticating the user.

Therefore, when a client application requests a login page, the server generates a unique token based on the information sent in the request. The information used is always something that the server knows, something that the client knows, and something both know. So, for example, the server can generate a unique key based on User agent + current time + secret key . The server generates a hash based on this information, and then saves a cookie containing only the hash on the client machine.

Permission settings

At the moment, our key is indeed no longer the key. It has been converted to an access token. Then, the server must use this access token and save it for later retrieval. You can put the key in the database, but since this type of data needs to be extracted often, I would suggest using a key value store like Redis to reduce read / write database and improve performance.

When you store a token, you should also store a separate piece of data to indicate which permissions are associated with the token. In this case, our token acts only as a way to register and authenticate users, so we store it next to a value that indicates who owns the token (application web interface) and what permissions it has (limited to creating and authenticating users), We consider its just like any other client API, so that we can record statistics and control how it is used.

Request Authorization

When the client then makes a POST request to create a new user or logs on to the server, it checks to see if the client has sent an identifying cookie along with the request. If not, we reject the request. If it sends a cookie, the server must again generate a hash using the values ​​used earlier (these values ​​are either already known or sent with the request anyway, so they don’t really burden the server too much) compare it with the cookie sent to us, and if the values ​​match, the request continues.

Sources - API Key Protection

OR

Just send a request to your Server and let it process your request using a hidden API key and just return the result of your request to your interface.