how can I put api key in the back when i call api from angular

Question

In my current Agular app im sending a request to back end and i need to add api key as below:

         let header = new HttpHeaders()
        header = header.append("api-key","jkhjkh") 
        this.http.get(`https://api/${"EUR"}+${"SEK"}`,{headers:header}).subscribe(s=>{....

the problem is im exposing the api key to the user,its shown on the browser which is not secure,i was seraching on the google and found they say you have to put api key on the backend,if i do that how can i call then?please help me with an example or suggestion

You've pretty much answered yourself, you store the key in your server and never, for any reason, send it to the client. Just do the request from the server too. — Alejandro
– Alejandro, Commented Jan 11, 2022 at 12:42
@Alejandrowhat do you mean by do the request from the server,sorry i got confsuded — moris62
– moris62, Commented Jan 11, 2022 at 12:49
@moris62 Don't send the key to Angular, and don't use Angular to do the request. Use your server backend to send the request, I guess ASP.NET Core from the tag in the question. As soon as you use Angular, the user has access to it. — Alejandro
– Alejandro, Commented Jan 11, 2022 at 13:02
@Alejandro since im new to this i may ask one more question,imagine you are a user and by clicking a Pay button on the browser,you are going to call an API which does the payment,that api needs api key to be authenticated, here is where im lost,how does this scenario work with your solution? thanks in advance — moris62
– moris62, Commented Jan 11, 2022 at 13:07

BobbyTables · Accepted Answer · 2022-01-11 13:06:13Z

1

You need to keep the API-key away from the Angular frontend. If you have an dotnet core backend, create a controller there that wraps your call to the API (with for example HttpClient) and returns the response.

Angular <-> backend <-> API 
                    key

Instead of

Angular <-> API 
        key

answered Jan 11, 2022 at 13:06

BobbyTables

4,7452 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moris62 Over a year ago

i got the point that i should put the API on the server side,but I;d like to give a scenario which i would appreciate if you explain me the solution ,imagine you are a user and by clicking a Pay button on the browser,you are going to call an API which does the payment(api address is on the angular side),that api needs api key to be authenticated, how can i call that url without api key in the frontend?

BobbyTables Over a year ago

@moris62 That wold warrant a new question. Post it like you did with this (not as a comment) and you'll get replies

Collectives™ on Stack Overflow

how can I put api key in the back when i call api from angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related