How to retrieve API key safely from .env file into javascript View - Laravel

Question

I have the key placed safely in .env file and I would like to make an ajax request to a paid API service. I have the Javascript file (containing ajax code) which is in public/ajax.js

I can retrieve in this way, put this line of code : $key = env('SECRET_API_KEY'); in controller and pass it to javascript directly using https://github.com/laracasts/PHP-Vars-To-Js-Transformer but then I am forced to put @include('footer') in some X page. So, when I check the source I see my API key :/

I am able to pull the data successfully but How to prevent this?

my current url : url:"http://johndoe?param1=abc&param2=def&_token="+key, in Ajax code.

If I directly put this in javascript $key = env('SECRET_API_KEY'); I get an error Uncaught ReferenceError: env is not defined

What is the best approach to retrieve api key?

If you use the API key in JS it will be visible to the end user. If you don't want it to be visible you will have to set up an "API proxy". Your JS calls your Php code which in turn calls the API with the key — JimL
– JimL, Commented Apr 9, 2017 at 1:44
@jimL can you show an example or steps to achieve in my case. — Murlidhar Fichadia
– Murlidhar Fichadia, Commented Apr 9, 2017 at 1:48
Do not make the call from your JavaScript application. Make the call to your server, which will call the API. Then, your server can return the API response to your ajax request. — Ohgodwhy
– Ohgodwhy, Commented Apr 9, 2017 at 2:24
@Ohgodwhy Can you please show, how to do in laravel ? Because i understand theoretically but dont know how to do it. JS is client side, so anything kept would be public. I need some server side script, that does the get request and prints output or response. Right? — Murlidhar Fichadia
– Murlidhar Fichadia, Commented Apr 9, 2017 at 2:35
@Ohgodwhy what if i dont want even the response to be directly accessed by going to example.com/abc.json page. I only want my application to make use of the response and want to restrict all other kind of access to the data i m retriving. Steps on how to approach would be appreciated — Murlidhar Fichadia
– Murlidhar Fichadia, Commented Apr 9, 2017 at 2:37

EddyTheDove · Accepted Answer · 2017-04-09 03:42:20Z

3

Define a route that your JS will call, from that route, define a controller and function that will handle the request and make the API call to the paid service.

Route::get('api-call', 'APIController@call');

//APIController
//use GuzzleHttp\Exception\GuzzleException;
//use GuzzleHttp\Client;
...

public function call(Request $request)
{
    $params = $request->all();

    $api_key = env('SECRET_API_KEY');
    $url = 'url-to-paid-service?' . $params . '&key=' . $api_key; 
    $client = new Client();
    $res = $client->get($url);

    return response()->json($res->getBody());
}

From your ajax, make the call http://your-own-site/api-call

answered Apr 9, 2017 at 3:42

EddyTheDove

13.2k2 gold badges40 silver badges46 bronze badges

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

6 Comments

Murlidhar Fichadia Over a year ago

thanks for the solution. I will try now. I have to do this every 1 second. What piece of code do I put to repeat every 1 second?

Murlidhar Fichadia Over a year ago

What is with $params? do I need to include in order for it to work? $url = "url-to-domain?param1=value1&param2=value2&_token="+$api_key;

EddyTheDove Over a year ago

In this case, $params = param1=value1&param2=value2 because I already took those with $request->all();

EddyTheDove Over a year ago

You will have to call it from JS every second using setInterval() : sitepoint.com/setinterval-example

Murlidhar Fichadia Over a year ago

I get the part Client side does the call to /api and and server side gets the data. But if there are 100 users who visit example.com simultaneously would Client-side talking to Server-side and Server-side talking to data api be 1 endpoint or 100 endpoints? Behind the scene how does Client-Server-data_api work?

|

Collectives™ on Stack Overflow

How to retrieve API key safely from .env file into javascript View - Laravel

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related