How can I hide an external API key in a Wordpress PHP file?

Question

I've spent hours trying to research and solve this but am still struggling unfortunately.

I have created a custom 'courses' post type in Wordpress that involves using embedded Calendly event registrations. I am using the Calendly embed API to notify the parent window when an event registration takes place. The notification payload provides the URI of the event, which I then want to look up using the Calendly API and return the name of the event. I am struggling with hiding the API key in the header:

    "Content-Type": "application/json",
    "Authorization": "Bearer MY_API_KEY"
  }

I've tried to add a line in wpconfig to define the key:

define( 'CALENDLY_KEY', '**key**' );

But I don't know how to then use this in my function without exposing it via 'echo'.

Any advice would be much appreciated.

Extended code below:

<!-- Calendly widget script -->
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

<script>function isCalendlyEvent(e) {
  return e.data.event &&
         e.data.event.indexOf('calendly') === 0;
};
 
window.addEventListener(
  'message',
  function(e) {
    if (isCalendlyEvent(e)) {
        if (e.data.event == "calendly.event_scheduled") {
            console.log("event scheduled!");
            let event_uri = e.data.payload.event.uri;
            console.log(event_uri);

            fetch(event_uri, {
  "method": "GET",
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer MY_API_KEY"
  }
})
.then(response => response.json())
  .then((json) => {
    console.log(json);
    let ordered_course = json.resource.name;
    console.log(ordered_course);

  })



        }
      console.log(e.data);
    }
  }
);</script>

Dont do this request from the front-end if the key has to remain secret. You can put the request in a separate PHP file and use it to update the calendar — Luca Kiebel, Jan 20 '22 at 11:04
Thank you @LucaKiebel, appreciate your response. I'm still quite a noob when it comes to PHP and am struggling to understand how to call a separate PHP file in the context of this function, do you have any advice? — Tom Mitchell, Jan 20 '22 at 11:22
Instead of `get`ting that `event_uri` `get` the new PHP file, just a standard request to it, your logic doesnt have to change, you can use PHP to pass the returned data along to your JS here — Luca Kiebel, Jan 20 '22 at 11:24
Thanks @LucaKiebel - I've put all of the above request into a separate PHP file and called it in the following way from the main file but I've clearly got it totally wrong `` — Tom Mitchell, Jan 20 '22 at 11:53
Thanks @ViktorAndonov - I've tried to research how to do this but I'm at a dead end. Some articles suggest I need Composer...? Apologies for the noobness - do you have any advice on how to store the API key as a variable in the .env file, where to put the file, and then how to call the variable? Thanks so much. — Tom Mitchell, Jan 20 '22 at 19:37
Related: https://stackoverflow.com/questions/20545301/partially-hide-email-address-in-php — Jesse Nickles, Aug 01 '22 at 08:09

score 2 · Accepted Answer · answered Jan 21 '22 at 22:32

You should use dotenv (.env) file for your API key.

You can install support for dotenv (.env) via the vlucas/phpdotenv package with Composer package manager for PHP on your server.

Easier option - if you don't have experience as you say, is to use a WordPress plugin dontenv, this you will create .env file and inside you will write MY_API_KEY=123456, then in your code, you can retrieve this .env key by using getenv('MY_API_KEY');

This is for PHP but your code is JS, so you should install npm package manager then run npm i dontenv then in your code Bearer ${process.env.MY_API_KEY}.

Also, .env files should not be uploaded on GitHub.

How can I hide an external API key in a Wordpress PHP file?

1 Answers1