0

How to hide my Unsplash api key in Laravel

I am making a call from a Vue component but my "Authorization id" api key is visible for everyone as you can see.

How can I hide the API key in Laravel? I am using Laravel 9.

I want to hide the "headers or just the "Authorization".

Hope someone can guide me :))

Unsplash.vue file:

const myAsync = async function fetchUnsplash() {
  const response = await fetch('https://api.unsplash.com', {
    headers: {
      Authorization: 'Client-ID 1234',
    },
  });
};
Qais Wardag
  • 63
  • 2
  • 9
  • 2
    you can try to call your own server incited of calling directly https://api.unsplash. create own route in Api.php and call from their. so url will become invisible from user. – Jayesh Nai Oct 12 '22 at 13:13
  • https://stackoverflow.com/questions/59109090/how-to-hide-my-api-key-on-an-upload-form-on-php try above link hope it helps – Adarsh Sharma Oct 12 '22 at 13:15
  • Give a read to that one: https://stackoverflow.com/a/72439112/8816585 – kissu Oct 12 '22 at 16:01
  • You use the backend to connect with unsplash rather than the frontend, that is one of the purposes of a backend. So in your .env you put your unsplash apikey and create a route that will do whatever you need from unsplash, that route will attack a method in a controller, lets say UnsplashController and maybe have a class like UnspalshService to have different methods that will connect with different functionality for unsplash. After all this your frontend just needs to attack the endpoint you created to do whatever your user haves to do (validations on request probably needed for your endpoint – MP-programming Oct 12 '22 at 18:48

1 Answers1

1

I don't know anything about the API that you are using, nor about Laravel, but I assume, you have a fixed string, that you have to send in the HTTP requests.

Because you mentioned you are using Laravel, you have both frontend and backend code.

So in my opinion

  1. you can create a new endpoint in your Laravel REST API: v1/entries
  2. In the PHP code, you have to call the https://api.unsplash.com API, with the secret Client ID.
  3. From the Vue component, you have to send your request to your Laravel API endpoint (example: http(s)://<api-baseurl>/v1/entries).
Márk Dobó
  • 43
  • 1
  • 5
  • I did that. But now anyone can use the api endpoint I created: http://127.0.0.1:50004/api/third-party/unsplash Maybe now I need to create some kind of Gates & Policies for my api? – Qais Wardag Oct 12 '22 at 14:01
  • You can also authenticate your users individually into unsplash: https://unsplash.com/documentation#user-authentication – Márk Dobó Oct 13 '22 at 13:21